# Oura — Marketing Site Design Spec

> Source: ouraring.com (live DOM, computed styles), 2026-07-30 (desktop 1512px). Built on Tailwind v4 (many `--color-*` are Tailwind defaults); the brand palette below is read from computed styles + the brand-relevant tokens, with Tailwind/OneTrust/Affirm values excluded.
> Coverage: logged-out homepage. Member web app: behind login, `needs-dashboard`.
> Reality check: the queue hint ("dark premium minimal, ring-metal palette") is WRONG on "dark". The marketing homepage is LIGHT — a warm CREAM `#f7f1e8` canvas with full-bleed premium ring photography and soft warm/blue radial auras, dropping only occasionally into dark bands (`#1c1b1a` / slate `#27455c`). "Premium minimal" holds, and "ring-metal" is evoked by the warm metallic photography, but the palette is warm cream + warm charcoal-brown `#4a4741`, not metal grey. The real signature the hint misses is a TYPE PAIRING: a light-weight Editorial New display serif at huge sizes (110px, weight 300, -5.5px tracking) over AkkuratLL Swiss grotesque — elegant editorial, not dark-minimal.

## 1. Visual Theme & Atmosphere

A premium wellness brand that reads like a fashion editorial. The homepage opens on a warm cream stage lit by soft radial auras (warm sand and pale blue, mixed in oklab), with the ring shot as full-bleed lifestyle photography. The recognisable move is typographic contrast: an enormous, light-weight Editorial New serif ("Subtle. Power.", 110px, weight 300, tightly tracked) paired with AkkuratLL, a neutral Swiss grotesque, for every label, nav item and paragraph. Colour is warm-neutral and restrained — cream, black, a warm charcoal-brown and warm greys — so the product photography carries all the richness, with one functional blue reserved for the call-to-action. Occasional full-bleed dark bands (near-black or slate blue) provide chapter breaks. Feels: premium, calm, editorial, warm.

## 2. Color Palette & Roles

Chrome is a warm-neutral system; a single blue drives actions; a Tailwind-derived set colours health metrics.

### Text
| Token | Hex | Role / usage |
|---|---|---|
| black | `#000000` | Nav, primary UI text |
| brown-ink | `#4a4741` | Display + body text (warm charcoal-brown, the workhorse ink) |
| muted | `#a8a5a0` | Warm muted / captions |
| sage | `#5b6550` | Occasional olive-tinted labels |
| gray-mid | `#696969` | Secondary grey |
| gray-soft | `#555555` | Tertiary grey |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| cream | `#f7f1e8` | Canvas — the signature warm off-white |
| gray-100 | `#f3f1f0` | Soft panel tint |
| gray-200 | `#ececec` | Dividers |
| gray-300 | `#d3d1ce` | Warm hairline borders |
| white | `#ffffff` | Cards / cream-text bg |
| off-100 | `#f0efef` | Cool-neutral panel |

### Dark bands
| Token | Hex | Role / usage |
|---|---|---|
| ink-950 | `#1c1b1a` | Near-black chapter band |
| ink-900 | `#232328` | Dark surface |
| slate | `#27455c` | Slate-blue feature band |
| border-dark | `#34383b` | 2px dark border |

### Accent (action blue) & focus
| Token | Hex | Role / usage |
|---|---|---|
| blue | `#2a72de` | Primary CTA fill, active borders, links |
| blue-hover | `#2056a6` | CTA hover (darker) |
| focus | `#3184ff` | Focus-visible ring colour |

### Health-metric data palette (Tailwind-derived, in charts/scores)
| Token | Hex | Role / usage |
|---|---|---|
| red-400 | `#ff6467` | Metric red |
| green-600 | `#55dc83` | Metric green |
| orange-300 | `#c0865d` | Warm metric orange |
| emerald-600 | `#009966` | Metric emerald |

Rule: chrome is warm-neutral + one blue `#2a72de`; keep the vivid health-metric colours for charts and score rings, never chrome. Let photography carry richness.

## 3. Typography Rules

- Font stacks: **Editorial New** (display serif, 34×) + **AkkuratLL** (Swiss grotesque, workhorse, 1274×), plus Times (1×, negligible). Preview substitutes **Fraunces** (light) for Editorial New and **Inter** for AkkuratLL — recorded here so the spec never implies the licensed faces.
- Body: 16px / 24px / 400 / `#4a4741` (AkkuratLL).

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | Editorial New (serif) | 110 / 121 | 300 | -5.5px (-5%) |
| Eyebrow (h2) | AkkuratLL | 18 / 27 | 700 | normal (often UPPER) |
| Sub head (h3) | AkkuratLL | 40 / 40 | 300 | normal |
| Body | AkkuratLL | 14–16 / 21–24 | 400 | normal |
| Nav | AkkuratLL | 16 / 24 | 400 | normal `#000000` |
| Emphasis line | AkkuratLL | 14 | 700 | normal |

Patterns: the display face is a LIGHT serif (weight 300) set very large with tight negative tracking — elegance from letterforms, not weight. Everything else is AkkuratLL grotesque at 300/400/700. Eyebrows are small bold uppercase.

## 4. Component Stylings

### Buttons
- **Primary (Explore / Shop now)**: bg blue `#2a72de`, text `#ffffff`, **full pill** radius, h 48px, padding `12px 24px`, AkkuratLL 16px. Hover: bg → `#2056a6`.
- **Nav pill**: transparent, black text, full pill, h 48px, padding `12px 24px`.
- **Secondary / outline**: transparent with a 1px border (`#d3d1ce` warm grey or `#2a72de` blue for active), full pill.

### Inputs
- Focus handled by the global focus-visible ring (below); fields sit on the warm-neutral surfaces at small radii.

### Cards / panels
- Radius 8px (dominant), warm bg, 1px `#d3d1ce` hairline, soft and rare shadows.

### States
- Hover: primary blue darkens to `#2056a6`.
- Focus: `:focus` sets `outline:none`, BUT `:focus-visible` provides a real ring — **`outline: 2px solid #3184ff; outline-offset: 4px`** on links, buttons and inputs. (Not an anti-pattern — the visible ring is correctly scoped to keyboard focus.)

## 5. Layout Principles

- Full-bleed photographic hero with a thin announcement bar above the nav; nav is transparent over the photo (white or black text depending on band).
- Nav: OŪRA wordmark (macron over the U) left; centered dropdown links (Shop / Health Features / Experience / For Organizations); cart icon right; all as 48px full pills.
- Section rhythm alternates warm-cream and full-bleed dark/slate photographic bands; generous whitespace; content width scales fluidly.
- Hero anatomy: giant Editorial New serif display → AkkuratLL sub → blue pill CTA, over lifestyle imagery.
- Dense responsive ladder (see §10).

## 6. Depth & Elevation

- Radii: `8px` dominant (63×), plus `4px` / `2px` / `12px` / `24px` and large `90px`+ / full pills for buttons.
- Shadows: soft and rare — `rgba(0,0,0,.2) 0 0 18px`, `rgb(153,153,153) 0 2px 10px -3px`; most box-shadows are transparent Tailwind ring placeholders. Depth is photography and colour bands, not elevation.
- Borders: 1px `#2a72de` (blue active), 1px `#d3d1ce` (warm grey), 2px `#000000` and 2px `#34383b` for strong emphasis.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color/bg/border (Tailwind) | 0.15s | cubic-bezier(0.4,0,0.2,1) | hovers, links |
| all | 0.5s | cubic-bezier(0.4,0,0.2,1) | large reveals |
| opacity | 0.3s | cubic-bezier(0.4,0,0.2,1) | fades |
| all | 0.25s | ease-out | misc controls |

- House easing is the material `cubic-bezier(0.4,0,0.2,1)`; durations 0.15–0.5s.
- Brand keyframes are minimal: `spin`, `pulse`, `button-loading-spinner` (loaders). Other keyframes (`affirm_*`, `onetrust-*`, `ot-slide-*`) belong to the Affirm and OneTrust widgets and are excluded.
- No animation library detected (native / Next). Ships **5 `prefers-reduced-motion` blocks** — thorough reduced-motion support.

## 8. Backgrounds, Effects & WebGL

- Warm cream canvas with soft **radial "aura" gradients** in oklab: warm sand `radial-gradient(circle at 20% 20%, rgb(234,220,207), transparent 20%)` and pale-blue washes `radial-gradient(circle at 99% 27%, rgba(181,228,254,.5), transparent 20%)`, plus cream oklab fades `linear-gradient(in oklab, rgb(247,241,232), transparent)`.
- Atmosphere is full-bleed premium product/lifestyle **photography and video**; dark bands (`#1c1b1a`, slate `#27455c`) for chapter breaks.
- No canvas/WebGL, no grain/noise. Sticky nav may use a light backdrop blur.

## 9. Do's and Don'ts

### Do
- Keep the canvas warm cream `#f7f1e8` with warm charcoal-brown `#4a4741` ink; let photography carry the colour.
- Pair a LIGHT Editorial New serif display (weight 300, huge, tight -5% tracking) with AkkuratLL grotesque for everything else.
- Reserve blue `#2a72de` for the primary CTA and links (hover `#2056a6`); use full-pill buttons at 48px.
- Provide a real focus-visible ring: `2px #3184ff`, `4px` offset.
- Use soft radial cream/blue auras and full-bleed photography; break chapters with dark or slate bands.
- Keep the health-metric colours in charts and score rings only.
- Ship reduced-motion blocks (there are 5); keep motion to 0.15–0.5s material-eased transitions.

### Don't
- Don't render Oura as a dark site — the marketing surface is warm cream; dark is only banded.
- Don't set the display face bold or tracked loose — it is light weight 300 with tight tracking.
- Don't use metal-grey as the base palette; the neutrals are warm.
- Don't let health-metric colours into the chrome, or add a second CTA colour.

## 10. Responsive Behavior

- Dense min/max breakpoint ladder: 320, 400, 419/420/425/426, 530, 550, 600, 650, 768/769, 890/896/897, 1023/1024, 1280, 1440, 1568, 1920, 2000 — heavily device-targeted.
- `containerQueries: 0`; `darkSchemeBlocks: 0` (dark sections are content bands, not a theme); no dark toggle.
- Captured at desktop 1512px; nav condenses to a hamburger and the display type scales down on narrow widths.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#f7f1e8` · Text `#4a4741` (black `#000` for UI) · Muted `#a8a5a0` · Border `#d3d1ce` · Accent `#2a72de`
- Fonts: Editorial New serif (display, weight 300) + AkkuratLL grotesque (body) · Body: 16px · Radius: 8px card / full-pill buttons · Control height: 48px
- Focus: `2px solid #3184ff`, offset 4px (focus-visible) · CTA hover: `#2056a6`
- Health-metric palette (charts only): red `#ff6467` · green `#55dc83` · orange `#c0865d`

<oura-marketing_design_language>
Use the Oura marketing design language: a premium wellness brand that reads like a fashion editorial, on a warm CREAM #f7f1e8 canvas (not dark) with warm charcoal-brown #4a4741 ink and pure black #000000 for UI. The signature is a type pairing — a light-weight Editorial New display SERIF (substitute Fraunces light) set huge at 110/121 weight 300 with tight -5.5px (-5%) tracking, against AkkuratLL, a neutral Swiss grotesque (substitute Inter), carrying every nav item, eyebrow and paragraph at 300/400/700; eyebrows are small bold uppercase. Colour is warm-neutral and restrained — cream, black, brown-ink #4a4741, warm greys #a8a5a0/#d3d1ce, an olive #5b6550 — with occasional full-bleed dark or slate-blue #27455c chapter bands, so full-bleed product photography carries all the richness. One functional blue #2a72de owns the primary CTA and links (hover #2056a6); buttons are full pills at 48px, cards at an 8px radius, shadows soft and rare, hairlines warm #d3d1ce. Atmosphere is soft oklab radial auras (warm sand + pale blue) over photography and video. Provide a real focus-visible ring, 2px #3184ff at 4px offset, and keep the vivid health-metric colours (red #ff6467, green #55dc83, orange #c0865d, emerald #009966) in charts and score rings only. Motion is 0.15-0.5s material-eased (cubic-bezier(0.4,0,0.2,1)) with five reduced-motion blocks. Feels: premium, calm, editorial, warm. Avoid: rendering it dark, setting the serif bold or loosely tracked, using metal-grey neutrals, or letting health-metric colours or a second accent into the chrome.
</oura-marketing_design_language>