Oura Mobile — design system & UI screens

Health & Fitness · 11 screens · ouraring.com

Personal health monitoring dashboard displaying daily vital signs and readiness metrics. The screen uses a dark theme with a card-based bento grid layout showing key health indicators: Readiness Score (88, Optimal status), Symptom Radar (showing no signs via a circular visualization), Sleep Score (84, Good status), and Body Clock (showing circadian rhythm alignment via line graph).

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-mobile.

Decoded design system

Oura Mobile's decoded design system: background #19191C, text #F1E7E2, accent #203634, link #203634, primary #203634; type scale h1 34px / h2 22px / body 17px; 8px spacing base; 12px base radius. The single interactive/action color is #203634 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#19191C`
surface	`#252527`
border	`#393739`
text	`#F1E7E2`
text_muted	`#9E9896`
primary	`#203634`
accent	`#203634`
link	`#203634`
button_bg	`#203634`
button_text	`#19191C`

Using these colors

Action color #203634 — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, link, button_bg are all #203634 — one role, not several (the action color).
accent #203634 — 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.

Typography

h1: 34px
h2: 22px
body: 17px

Spacing

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

Radii

base: 12px
button: 12px

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 →