Oura — design system & UI screens

Consumer · 1 screen · 6 sections · ouraring.com

A long-scroll consumer landing page anchored by a centered editorial serif hero headline over a cinematic product photo, followed by a two-up promotional product card row, generous oversized typographic statement sections on soft pastel gradient backgrounds, and a dark-themed press/news section using a featured image card beside stacked quote cards. Visual hierarchy leans on dramatic serif display type, abundant whitespace, and a warm cream-to-charcoal contrast between editorial and footer zones.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/oura.

Decoded design system

Oura's decoded design system: background #F7F1E8, text #4A4741, accent #2A72DE, link #5B6550, primary #F7F1E8; type scale h1 110px / h2 18px / body 16px; 8px spacing base; 4px base radius. The single interactive/action color is #2A72DE — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#F7F1E8`
surface	`#ECE6DD`
border	`#DDD7CE`
text	`#4A4741`
text_muted	`#8B8780`
primary	`#F7F1E8`
accent	`#2A72DE`
link	`#5B6550`
secondary	`#2A72DE`
button_bg	`#2A72DE`
button_text	`#FFFFFF`

Using these colors

Action color #2A72DE — the single interactive color; only on things you click or must notice, never large fills.
accent, secondary, button_bg are all #2A72DE — one role, not several (the action color).
accent #2A72DE — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
primary #F7F1E8 — a neutral UI color (chips, tags, icon fills, chrome), not the action color (action = #2A72DE).
link #5B6550 — reads as a neutral UI color, not a link accent — verify against the reference (action = #2A72DE).

Typography

Heading: Editorial New
Body: Akkurat LL
h1: 110px
h2: 18px
body: 16px

Spacing

base unit: 8px
scale: 8px, 10px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px

Radii

base: 4px
button: 9999px

Shadows (elevation)

card: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 300ms · 500ms
easings: cubic-bezier(0.4, 0, 0.2, 1)
animated properties: opacity, color, background-color, border-color

Native design tokens

Token	Value
`--color-component-overlay-bg`	`rgba(25, 25, 37, 0.9)`
`--color-component-button-primary-bg-default-neutral-inverse-resting`	`#ffffff`
`--color-component-button-primary-text-default-neutral-inverse-resting`	`#0c0c14`
`--color-component-button-primary-bg-default-neutral-inverse-hover`	`#e5e5e9`
`--color-component-button-primary-text-default-neutral-inverse-hover`	`#313142`
`--color-component-button-secondary-icon-default-neutral-inverse-resting`	`#ffffff`
`--color-component-button-secondary-text-default-neutral-inverse-resting`	`#ffffff`
`--color-fill-brand-indigo`	`#4a4af4`
`--color-primary-light`	`#A8A9FC`
`--color-primary-dark`	`#2F2FC1`

…and 110 more measured on the page.

Button states (measured)

primary focus: outline 2px solid rgb(49, 132, 255)

Layout (measured)

container max-width: 1440px
nav: 90px sticky
common grid: 24 columns

Motion choreography (measured)

Load order: span.text-base×3 → span.text-base×3 → span.text-base×3 → span.text-base×3

Scroll reveal: 4 elements rest at opacity 0, animate in over 1000ms.

Stagger: div ×6 — 250ms apart.

Input (measured)

height 40px · radius 12px

Responsive (measured)

breakpoints: 320px · 425px · 550px · 768px · 896px · 1024px
mobile (390px): hero 48px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Consumer Health Wearable Product Landing Page with Editorial Hero