What is Oura's primary brand color?

Oura does not run a saturated brand voltage on the homepage. The dominant token is the warm cream-sandstone canvas #f7f1e8 (clustered frequency 512 across surface, hairline, and background), paired with graphite ink #1c1b1a for text and #1e2427 for the primary CTA fill. Mustard #af751b lives in the token system as `--color-mustard-500` and indigo #4a4af4 as `--color-fill-brand-indigo`, but the homepage deploys each only once or twice — both are scarcity accents rather than load-bearing brand voltages. The page is carried by sandstone and graphite, with photography of the ring on skin supplying the warmth that pigment would otherwise handle.

What typography does Oura use, and what should I substitute if AkkuratLL is unavailable?

Oura runs AkkuratLL as the default sans across the page (declared as `--font-sans` and `--default-font-family`) at weights 200, 300, 400, 500, 600, 700. Editorial New serif appears as `--font-serif`, deployed only on italic emphasis spans inside headings — phrases like 'Made for you', 'a voice', 'your every day'. If AkkuratLL is unavailable, Söhne, Untitled Sans, or Inter at the same weights are the closest grotesque substitutes. For Editorial New, PP Editorial New is the direct source; Cormorant Garamond italic or GT Sectra Display italic are acceptable approximations. Never substitute a slab or condensed display face — the italic-serif moment relies on humanist contrast against the sans, and a slab would shift the page from health-editorial to publication-magazine.

Why does Oura use full-pill CTAs at 48px height?

The primary action surface is a 48px-tall capsule with a 33554432px (`9999px`-class) border-radius — full-pill geometry — fill `#1e2427` (near-black graphite), text `#f7f1e8` (cream sandstone), padding 12px 24px. The pill reads as a wearable-object signal: the same continuous-curve geometry as the ring itself. Where most consumer-electronics storefronts use squared or 8px-rounded rectangles for primary CTAs, Oura uses the full pill because the button is geometric kin to the product. The secondary CTA inverts to cream-on-graphite at the same height with a 1px hairline border.

Why does Editorial New italic appear only on a single phrase per heading?

Across the homepage extraction, every Editorial New italic span sits at the same size and weight as its surrounding AkkuratLL heading — 96px / 500 at the hero, 80px / 300 inside section heads, 40px / 300 in mid-page beats. The italic break-out is editorial-magazine syntax: a sans-serif headline interrupted by a single italicized noun-phrase. It is the strongest voice signature in the system because it is scoped so narrowly — one phrase per heading, never two. Using it for body emphasis, button text, or product titles destroys the editorial scarcity that makes the moment land.

What spacing rhythm does Oura use?

The system snaps to an 8px base, with 8px (39 occurrences) and 16px (13) as the dominant breathing units. The primary button uses 12px 24px padding. Card chrome uses asymmetric 24px 0px 0px 24px / 0px 0px 24px 24px to render the top-half-rounded and bottom-half-rounded panel splits visible in the hero ring-card grid. Section vertical rhythm runs 32px and 48px. Token-level CSS variables expose a full 2 / 4 / 8 / 12 / 16 / 24 / 40 / 80px ladder under `--components-spacing-*`, but the rendered page leans on the lower half — 8 / 12 / 16 / 24.

Can I use this DESIGN.md to build my own React app?

Yes — the file is structured to feed Claude, Cursor, or any AI agent that reads structured design tokens. The agent reproduces Oura's actual chassis: sandstone canvas, graphite ink, AkkuratLL + Editorial New italic duet, full-pill primary CTAs, 12px-rounded card chrome, photography-friendly warm tints. Every color, type style, radius, and spacing value is a quoted token ready to paste into Tailwind config, CSS variables, or your own component library. Pair with macro-photography of a product on skin or in soft warm light to land the brand voice fully — the chrome is calibrated to recede behind imagery, so without photography the system reads thinner than it should.

Oura Ring Design System

Oura Ring's consumer-health design system as a DESIGN.md file.

About Oura Ring DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source ouraring.com

Consumer Electronics
Healthcare & Wellness

Oura's storefront is built around an unusual contradiction for a wearable-health brand: the page rejects every fitness-tech cliché. There is no neon-green heart-rate gradient, no dashboard mockup behind glass, no slate-and-cyan dark canvas. The chassis is a warm sandstone (#f7f1e8) tinted just past cream, body type runs AkkuratLL at 16px / 24px line-height, and the hero h1 sits at 96px weight 500 with negative tracking — the editorial cadence of a magazine cover. Once per heading, a single phrase ("Made for you", "a voice", "your every day") flips to Editorial New serif italic. That one swap is the entire brand-voice signature.

This page captures the homepage system as a DESIGN.md file — Google Labs' open spec for machine-readable design tokens. Inside: 22 color tokens grouped into ink, sandstone-canvas, hairline, brand-voltage, and accent layers; 12 typography tokens covering AkkuratLL across weights 200 through 700 plus the Editorial New italic display-emphasis pair; a 6-step radius scale that pivots between 12px medium chrome and full-pill CTAs; an 8px-based spacing rhythm dominated by 8px (39 occurrences) and 16px (13); and 22 components covering the top nav, hero card, ring product tiles, membership panel, dark "in the news" rail, footer email capture, and the inverted dark surface used for editorial section breaks.

Feed the file to Claude, Cursor, GitHub Copilot, or any agent that reads structured tokens. The agent reproduces Oura's actual voice — sandstone restraint, two-typeface italic duet, full-pill CTAs, photography-first warmth — instead of a generic health-tech theme of dark dashboards and neon vitals. Reference tokens directly in Tailwind config, audit an existing wellness storefront against this baseline, or read the file as a study in how to sell a sleep-tracking ring without ever showing a sleep chart on the homepage.

What makes it distinct

Two-typeface duetAkkuratLL grotesque handles 90% of the page; Editorial New serif italic appears exactly once per heading on the phrase that carries the emotional turn
Sandstone canvas ladderthree warm cream tints (#fefaef, #f7f1e8, #efe6db) replace the white-card convention, with photography of the ring on skin doing the warmth work
Full-pill CTAs at 48px heightprimary action is dark graphite #1e2427 on cream sandstone, never the saturated indigo or mustard the design tokens reserve
Weight 300 hero at 80–96pxthe display tier sits airy and editorial; weight 700 is reserved for the small 18px sub-heads in caps
Mustard and indigo as scarcity voltage#af751b and #4a4af4 live in the token system as accents that the homepage barely deploys, letting graphite and cream carry the page

Live at ouraring.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

ouraring.com

Explore Oura Ring

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Oura Ring design system FAQ

Common questions about Oura Ring's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Oura Ring — official site

The Finnish smart-ring brand's own storefront — the source for this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Oura Ring in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→