A premium smart-ring brand whose marketing reads like a fashion editorial and, contrary to the “dark minimal” expectation, is warm and LIGHT: a cream #f7f1e8 canvas lit by soft oklab radial auras (warm sand plus pale blue) with the ring shot as full-bleed lifestyle photography, dropping only occasionally into near-black #1c1b1a or slate-blue #27455c chapter bands. The real signature is a type pairing: a light-weight Editorial New display SERIF set enormous (110/121, weight 300, tightly tracked at -5.5px) against AkkuratLL, a neutral Swiss grotesque, which carries every nav item, small-bold uppercase eyebrow and paragraph — elegance from letterforms, not weight. Colour is warm-neutral and restrained: cream, black, a warm charcoal-brown #4a4741 ink, warm greys #a8a5a0/#d3d1ce and an olive #5b6550, so the product photography carries all the richness, with ONE functional blue #2a72de owning the primary CTA and links (darkening to #2056a6 on hover). Buttons are full pills at 48px, cards sit at an 8px radius with soft, rare shadows, and borders are warm #d3d1ce hairlines. The recognisable product surface is the trio of circular score dials — Readiness, Sleep, Activity — drawn on a dark band in the health-metric palette (red #ff6467, green #55dc83, orange #c0865d, emerald #009966) that is kept strictly out of the chrome. Built on Tailwind v4, it provides a correct keyboard focus ring (outline 2px #3184ff at 4px offset on :focus-visible) and ships five reduced-motion blocks; motion is material-eased cubic-bezier(0.4,0,0.2,1) at 0.15–0.5s with no heavy animation library, over a dense device-targeted breakpoint ladder from 320 to 2000.
⚠ needs-dashboard
Browse Oura in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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#f7f1e8canvas 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.
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.
Chrome is a warm-neutral system; a single blue drives actions; a Tailwind-derived set colours health metrics.
| 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 |
| 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 |
| 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 |
| Token | Hex | Role / usage |
|---|---|---|
| blue | #2a72de | Primary CTA fill, active borders, links |
| blue-hover | #2056a6 | CTA hover (darker) |
| focus | #3184ff | Focus-visible ring colour |
| 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.
#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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.