Oura Ring Design System

Overview

Oura's storefront is the most editorial interface in the smart-wearable category — a sandstone-cream chassis ({colors.canvas-sandstone} — #f7f1e8) carrying warm graphite ink ({colors.ink-graphite} — #1e2427), with one Editorial New serif italic phrase dropped into every heading as the brand's only ornamental gesture. Where most fitness-wearable storefronts open with a dark dashboard mockup behind glass and a neon-cyan heart-rate gradient, Oura opens with a 96px AkkuratLL hero at weight 500 and an italicized "Made for you" serif span — the page reads as a magazine cover, not a product spec sheet.

The type system is bi-modal. AkkuratLL grotesque sans handles 90% of the page across weights 200, 300, 400, 500, 600, 700 — body, navigation, button labels, product names, footer columns. Editorial New serif italic appears as --font-serif at the same point sizes as its surrounding sans head, scoped to one noun-phrase per heading: "Made for you" at 96px / 500, "a voice" at 40px / 300, "your every day" at 80px / 300. This is the system's strongest editorial decision — one typeface holds the page; one italic phrase holds a single emotional turn per section.

Italic-as-emphasis: Oura's interface inherits its voice from print-magazine typography — a sans-serif headline interrupted by a single italicized phrase that names the brand promise. Where most consumer-electronics brands separate display and emphasis with weight (regular vs bold), Oura separates them with style (grotesque vs italic-serif). Where the typical health-tech storefront amplifies authority with deep slate panels and chart cards, Oura runs warm cream panels and lets a macro-photograph of the ring on a knuckle carry the entire technical claim.

Key Characteristics:

• Warm cream-sandstone canvas ({colors.canvas-sandstone} — #f7f1e8) used 512 times across surface, border, and background — the dominant chassis tone. Tinted just enough to read as paper, not screen.
• Graphite ink ({colors.ink-graphite} — #1e2427) for the primary CTA fill, paired with the deeper {colors.ink} (#1c1b1a) for body text. Two near-blacks, neither pure.
• Full-pill geometry ({rounded.pill} — 9999px-class) on every primary CTA at 48px height — the same continuous-curve grammar as the titanium ring itself.
• AkkuratLL is the default sans across weights 200 through 700; Editorial New italic appears exactly once per heading, never on body, never on buttons.
• Dual chrome-card geometry on the hero ring-grid: 24px 0px 0px 24px for the top-rounded panel and 0px 0px 24px 24px for its bottom-rounded sibling — the split corner grammar that lets product imagery span two stacked panels.
• Photography carries warmth: macro-shots of the ring on skin under low warm light, no clinical white-bench studio, no abstract data-visualization renders.
• Dark editorial rail ({colors.ink-deep} — #0c0c14) used for the "In the news" press section and the footer — the page inverts to a dark canvas exactly twice per scroll.
• Section rhythm 48px 24px interior padding inside cards; 0px 0px 32px for stacked vertical breathing — denser than the 80px Apple-marketing standard, looser than a magazine column.

Colors

Ink

• Graphite Ink ({colors.ink} — #1c1b1a): frequency 1. Used as background on the dark inverted panels. The deepest near-black in the system — chosen instead of pure #000000 to keep the page warm rather than pharmaceutical. Token surfaces in --color-gray-550 / --color-gray-600 / --color-component-overlay-bg.
• CTA Graphite ({colors.ink-graphite} — #1e2427): frequency 3. Used as bg (1), gradient stops (2). The exact fill of {component.button-primary} and the dark press-card surface. Cooler than {colors.ink} by a few hue degrees — the small chromatic shift is intentional so buttons read as objects rather than ink stains.
• Deep Tile ({colors.ink-deep} — #0c0c14): the inverted-canvas hex for the footer and the "In the news" editorial rail. The faint purple cast (oklch hue 284°) is what separates Oura's dark surface from a flat neutral.
• Warm Graphite ({colors.ink-warm} — #4a4741): frequency 52. Used as text (39), bg (7), border (6). The workhorse body-text color and the nav-link rest tone — the warm-gray that everything below display size sits on. Token name --color-sandstone-500.
• Soft Graphite ({colors.ink-soft} — #838280): frequency 3. Used as text (2) and border (1). A mid-gray reserved for sub-labels and meta information.
• Quiet Graphite ({colors.ink-quiet} — #a8a5a0): frequency 24, all text. The disabled-state tone and the caption color on secondary metadata.
• Disabled ({colors.ink-disabled} — #d3d1ce): a near-hairline gray used as the text color for disabled buttons and form labels.

Canvas

• Cream ({colors.canvas-cream} — #fefaef): the lightest sandstone in the ladder. Tinted just past pure white. Used as the membership panel background and the pill-tag fill.
• Sandstone ({colors.canvas-sandstone} — #f7f1e8): the dominant canvas tint, surfacing as --color-sandstone-200 and clustering at frequency 512 with the gray-100 hairline neighbor. Used as the page floor, the hero card background, and the on-dark button text color.
• Sandstone Deep ({colors.canvas-sandstone-deep} — #efe6db): the warm-tile background inside the hero ring-product cards. One step deeper than the page canvas — just enough chromatic separation for the card to read as a surface without a border.
• On Ink ({colors.on-ink} — #f7f1e8): the text color for content sitting on the graphite CTA — the same sandstone hex as the page floor. The button label reads as cut-out cream against dark, not white-on-black.
• Pure White ({colors.on-ink-pure} — #ffffff): frequency 17. Used as text (8), bg (5), border (3), shadow (1). Reserved for the dark editorial rail and footer where sandstone is too warm and the press headlines need pure-white legibility.

Hairline

• Hairline ({colors.hairline} — #ececec): frequency 512. Used as border (398), text (94), bg (19), gradient (1). The dominant 1px border tone — every product tile, button outline, and hairline rule sits on this exact warm gray. Functions across the page as separator-not-shadow.
• Warm Hairline ({colors.hairline-warm} — #eadccf): a sandstone-tinted hairline used inside warm-tile sections where the cooler {colors.hairline} would visually pop. Scoped narrowly.

Brand Voltage

• Mustard ({colors.brand-mustard} — #af751b): frequency 2, both gradient. Token --color-mustard-500. The mustard accent appears on the homepage only in a faint warm gradient — Oura keeps the most chromatic color in the system reserved for product-color callouts (the Oura Ring Gold finish) rather than as a UI voltage.
• Mustard Soft ({colors.brand-mustard-soft} — #ffefd8): a cream-mustard tint used as a faint warm wash behind season-collection product callouts.
• Amber ({colors.brand-amber} — #ffb648): frequency 1, gradient. The brighter mustard sibling reserved for membership badge highlights — the "Oura Membership gives your body a voice" panel uses this in micro-gradient.
• Indigo ({colors.brand-indigo} — #4a4af4): the saturated brand-indigo. Token --color-fill-brand-indigo. Reserved for the embedded video player chrome and a small handful of in-app product moments — barely visible on the homepage itself.
• Indigo Deep ({colors.brand-indigo-deep} — #2f2fc1): token --color-primary-dark. The darker indigo sibling used for indigo-on-light hover and focus states.
• Indigo Soft ({colors.brand-indigo-soft} — #a8a9fc): token --color-primary-light. A washed lavender variant used for indigo-on-dark text and decorative chips.

Accent

• Sky Wash ({colors.accent-sky} — #b5e4fe): frequency 1, gradient. A pale-sky accent used only in the membership-panel atmospheric gradient — appears once per scroll. Outside the warm sandstone family entirely; the contrast is deliberate.
• Olive ({colors.accent-olive} — #5b6550): frequency 1, all text. Token --color-olive-700. A muted olive reserved for occasional health-claim headlines on the women's-health and longevity sub-rails. Never as a button fill.

Typography

Font Family

The system runs AkkuratLL as the default sans across the entire page — declared as both --font-sans and --default-font-family. Weights 200, 300, 400, 500, 600, 700 are all in use, with the heaviest end (700) reserved for the small 18px eyebrow labels in caps and the very thin 200 / 300 reserved for the 80–96px hero display. Editorial New serif appears as --font-serif, deployed only on <em> spans inside headings — one italicized noun-phrase per section.

The split is editorial:

• AkkuratLL 400 → body, captions, footer, button labels
• AkkuratLL 300 → display tier at 40px and 80px sizes
• AkkuratLL 500 → the 96px hero only
• AkkuratLL 700 → the 18px eyebrow heads and 14px body-strong
• Editorial New italic 300 / 500 → exactly one noun-phrase per heading ("Made for you", "a voice", "your every day")

Hierarchy

Principles

Oura's hero h1 sits at weight 500 with -2.4px tracking — the heavy tracking-tighten is what gives the 96px headline its compressed magazine cadence. The mid-page beats drop the weight to 300 and 200, so the page literally lightens as it scrolls. Editorial New italic appears at the same point size as its surrounding sans head, never resized — the only thing that changes is the typeface and the slant. Letter-spacing stays at 0 below 40px; negative tracking is reserved for display sizes 40px and up. Line-heights run tight at 1 for display tiers, loose at 1.5 for body — the rhythm reads as an editorial spread, not a SaaS dashboard.

If AkkuratLL is unavailable, Söhne or Untitled Sans at the same weights are the closest substitutes. For Editorial New, PP Editorial New is the direct source and Cormorant Garamond italic or GT Sectra Display italic are acceptable approximations. Never substitute a slab-serif 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.

Layout

Spacing System

• Base unit: 8px.
• Tokens: {spacing.xxxs} 2px · {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.band} 40px · {spacing.section} 48px.
• Dominant rhythm: 8px (39 occurrences) and 16px (13) — the body breathing units.
• Button padding: 12px 24px — the canonical pill CTA padding, 12 occurrences across the page.
• Card chrome: asymmetric 24px 0px 0px 24px for top-rounded panels and 0px 0px 24px 24px for bottom-rounded siblings — 6 occurrences each, the split-corner grammar that lets the hero ring grid render as two stacked panels with a continuous photograph.
• Section vertical rhythm: 0px 0px 32px between stacked cards; 20px 48px 28px inside the pull-quote band.

Grid & Container

• Max content width: ~1440px (the --breakpoint-xxl token).
• Hero ring grid: two-up card pair at desktop, stacking vertically at mobile.
• Press rail: 2–3-up dark cards at desktop, 1-up at mobile.
• Footer: 4-column dark link list at desktop, accordion at mobile.

Whitespace Philosophy

The warm canvas + 24px-rounded card chrome + 48px section padding create a magazine-spread pacing — Oura reads as an editorial feature on the ring rather than a marketing storefront. Section gaps stay generous (48px) so each card breathes; internal card padding stays compact (20–24px) so the ring photography sits as close to the headline as possible without crowding.

Elevation & Depth

The elevation philosophy is surface-step as separation: where most consumer-electronics storefronts use shadow tiers to ladder cards, Oura uses a 2-step warm-tint ladder (canvas → canvas-deep) and lets the chromatic shift do the lifting. The drop shadow is reserved for product photography composition only, never for chrome. The dark editorial rail at {colors.ink-deep} provides the strongest elevation moment per scroll — the entire surface flips to near-black, then returns to sandstone.

Shapes

Border Radius Scale

The two radii that carry the page are {rounded.xl} (24px) and {rounded.pill} (full). 24px appears 6 times in the extraction across card chrome. Full-pill geometry shows up 26 times — every interactive element that reads as an "action". The mid-tier radii (4 / 6 / 8 / 12) appear in form fields and dropdown chrome but never on the dominant card surfaces.

Photography

Oura's photography is the brand's load-bearing visual asset:

• Macro-shots of the ring on a single knuckle, low warm light, soft focus background
• Hand-skin tones — never face crops, often partial gesture or just-fingers framing
• The ring on its charging base in cream-tinted soft-light scenes
• Lifestyle shots of the ring under a watch cuff or against a cream linen surface

When photography is absent, the system falls back to warm-tile surfaces ({colors.canvas-sandstone-deep}) or dark inverted panels. Photography is never decorative — every shot carries the product.

Components

Top Navigation

top-nav — Sandstone nav bar pinned to the top of every page. Height 64px, {colors.canvas-sandstone} background, no border. Carries the Oura wordmark at left, primary horizontal menu (Why Oura, Shop, Membership, Health, App) and a search / sign-in / cart cluster at right. Menu items in {typography.body-lg} (AkkuratLL 16px / 1.5) with {colors.ink-warm} text and 12px 0px padding per link.

nav-link — Individual top-nav item. Transparent background, {colors.ink-warm} text, 12px vertical padding, {rounded.none} corners. No underline at rest.

Buttons

button-primary — The signature graphite pill CTA. Background {colors.ink-graphite} (#1e2427), text {colors.on-ink} (sandstone #f7f1e8), type {typography.body-strong} (AkkuratLL 16px / 700), padding 12px 24px, height 48px, {rounded.pill} full pill. Used for "Discover Oura Ring 4", "Get started", "Shop now".

button-primary-hover — Hover state darkens to {colors.ink} (#1c1b1a). The only state change documented in the system at the page-chrome level.

button-secondary — Sandstone pill button with hairline outline. Background {colors.canvas-sandstone}, text {colors.ink-graphite}, 1px {colors.hairline} border, same padding and height as primary. Used for "Learn more" and "Compare rings".

button-on-dark — Inverted CTA for dark editorial surfaces. Background {colors.on-ink-pure} (white), text {colors.ink-graphite}, same pill geometry and 48px height. Used inside the "In the news" dark rail.

button-text-link — Inline text button, no background. Used for "Read more" beneath press cards. Type {typography.caption-strong} (AkkuratLL 14px / 700), {colors.ink-warm} text.

Cards & Containers

hero-section — Sandstone hero card containing the 96px h1 and the inline italic phrase. Background {colors.canvas-sandstone}, padding 48px 24px, {rounded.xl} corners. Holds a left-aligned text column and a right-aligned ring photograph.

ring-product-card — The atomic catalogue unit on the hero ring grid. Background {colors.canvas-sandstone-deep} (one step deeper than the page canvas), {rounded.xl} corners, padding 20px. Carries a centered ring photograph, a 24px AkkuratLL product name (e.g., "Oura Ring 4", "Oura Ring · Ceramic"), a short price line, and a {component.button-primary} at the bottom.

ring-product-card-top — The top half of a vertically split ring-card panel. Same sandstone-deep fill, asymmetric padding 24px 0px 0px 24px to carry the top-rounded geometry. The lower half (with 0px 0px 24px 24px) stacks beneath it so a continuous ring photograph can span both panels.

ring-product-card-bottom — The bottom-rounded sibling. Mirror padding 0px 0px 24px 24px.

membership-panel — Cream panel with the centered 80px-300 pull-quote ("Oura Membership gives your body a voice"). Background {colors.canvas-cream}, {rounded.xl} corners, padding 48px 24px. The italic span inside the headline sits in {typography.display-lg-italic} (Editorial New 80px / 300).

pull-quote-band — Editorial mid-page band carrying the 80px / 300 weight pull quote with an italic phrase. Background {colors.canvas-sandstone}, padding 20px 48px 28px.

editorial-rail-dark — The dark "In the news" rail. Background {colors.ink-deep} (#0c0c14), text {colors.on-ink-pure} (white), type {typography.heading-sm} (AkkuratLL 24px / 400), {rounded.xl} corners, padding 32px. Carries 2–3 press cards inside.

press-card-dark — Individual press headline card inside the dark editorial rail. Background {colors.ink-graphite} (#1e2427), text {colors.on-ink-pure}, type {typography.caption} (AkkuratLL 14px / 400), {rounded.lg} corners, padding 20px. Carries a publication name, a 1–2 line headline, and a {component.button-text-link}.

pill-tag — A small cream-pill label used for product variant chips ("New", "Best for sleep"). Background {colors.canvas-cream}, text {colors.ink-warm}, type {typography.caption-strong} (14px / 700), {rounded.pill}, padding 8px 16px, height 32px.

Inputs & Forms

text-input — Email-capture form field used in the footer. Background {colors.ink-warm} (#4a4741), text {colors.on-ink-pure} (white), 1px {colors.hairline} border, type {typography.body-lg} (AkkuratLL 16px), {rounded.lg} corners, padding 8px 48px 8px 20px (the extra right padding accommodates the submit-arrow icon), height 40px.

newsletter-form — Pre-footer email-capture row. Single {component.text-input} field with an inline submit arrow on the right. Padding 16px 24px.

Decoration

hairline-rule — 1px horizontal rule in {colors.hairline}. Replaces every place a drop shadow would normally separate sections in other systems.

eyebrow-label — Small all-caps eyebrow text above section headings. Type {typography.eyebrow} (AkkuratLL 18px / 700), {colors.ink-warm} text. Used for category labels like "FORM MEETS FUNCTION".

Footer

footer-dark — Dark footer with 4-column link list. Background {colors.ink-deep} (#0c0c14), text {colors.canvas-sandstone} (the cream-on-dark inversion is the brand's strongest contrast moment), type {typography.body-lg} (AkkuratLL 16px / 1.5), padding 48px 24px. The footer inverts to dark because the hero opens on cream — the page bookends with a sandstone-to-near-black arc.

footer-link — Individual footer link. Transparent background, {colors.canvas-sandstone} text, type {typography.caption} (AkkuratLL 14px / 400), 8px vertical padding. Hover state is undocumented in the extraction.

Do's and Don'ts

Do

• Anchor every page on the cream-sandstone canvas {colors.canvas-sandstone} (#f7f1e8). Pure white reads as health-tech-lab; the warm tint is the brand differentiator.
• Use {colors.ink-graphite} (#1e2427) for the primary CTA fill and {colors.ink} (#1c1b1a) for body text — the two-near-black system. Never #000000, which reads as pharmaceutical.
• Render every primary action surface at {rounded.pill} (9999px-class). The full-pill geometry is the system's strongest tactile signal — the same continuous curve as the titanium ring itself.
• Reserve Editorial New italic for exactly one noun-phrase per heading. "Made for you", "a voice", "your every day" — that scoping is what makes the italic moment land.
• Preserve the asymmetric 24px 0px 0px 24px / 0px 0px 24px 24px card-pair grammar for the hero ring grid. The split-corner panels carry a continuous ring photograph across two stacked surfaces.
• Use the 2-step warm-tint ladder ({colors.canvas-sandstone} → {colors.canvas-sandstone-deep}) for card elevation. Color step replaces shadow.
• Apply hairline borders (1px solid {colors.hairline}) instead of drop shadows for every UI elevation moment. Drop-shadow is reserved for photography composition.
• Invert to {colors.ink-deep} (#0c0c14) exactly twice per scroll — once at the editorial press rail, once at the footer. The dark surface earns its weight through scarcity.

Don't

• Don't use pure black (#000000) for body text — it reads as pharmaceutical against sandstone and breaks the warm-graphite continuity. Reserve true black only for the --color-black gradient-stop token, never for surface fills.
• Don't paint the brand-indigo {colors.brand-indigo} (#4a4af4) across primary CTAs — the homepage barely deploys this color and using it as a button fill destroys the graphite-and-cream restraint. Indigo is scoped to embedded video chrome and in-app moments.
• Don't run Editorial New italic on more than one phrase per heading. Two italicized spans in a single h1 read as decoration rather than emphasis; the scarcity is the design.
• Don't render the primary CTA at 8px or 12px radius — every "action" element uses the full pill. A {rounded.md} (8px) button immediately reads as a different brand.
• Don't substitute a slab-serif or condensed display face for Editorial New. The italic-serif moment relies on humanist contrast against AkkuratLL; a slab would shift the page from health-editorial to publication-magazine.
• Don't add box-shadow to product cards or panels. The system uses surface-color steps for separation; shadows immediately read as Material-Design dashboard.
• Don't invert the membership panel to dark. Oura's mid-page editorial moments stay on cream because the brand reserves the dark-canvas inversion for the press rail and footer — using it three times destroys the bookend.
• Don't pair the brand-mustard {colors.brand-mustard} (#af751b) with the brand-indigo {colors.brand-indigo} (#4a4af4) on a single surface — both are scarcity voltages and live in separate sub-rails. Putting them together creates a saturated chord the rest of the page is calibrated to avoid.

Known Gaps

• AkkuratLL and Editorial New are licensed typefaces not available as public web fonts. Substitutes (Söhne / Untitled Sans for AkkuratLL; PP Editorial New / Cormorant Garamond italic for Editorial New) are documented in the typography section.
• Oura's product macro-photography (warm-lit ring-on-skin shots, low-key linen surfaces, partial-gesture hand framing) is the brand's load-bearing visual asset, and photography direction is out of scope for a token document.
• Cart flyout, checkout flow, account dashboard, and the in-app companion chrome are not extracted from the homepage capture.
• The Oura Ring app's data-visualization chrome (sleep charts, readiness scores, cycle insights) is a separate component system from the marketing storefront and lives behind authentication — those tokens are not present in this extraction.
• Motion behavior (hover-lift product tiles, scroll-snap pull-quote bands, video-loop hero) is undocumented.
• The embedded video player chrome uses {colors.brand-indigo} (#4a4af4) at saturated weight — that is the only place the saturated indigo appears, and it is a third-party player surface rather than canonical Oura chrome.
• Dark-mode counterparts for the cream sandstone surfaces were not surfaced — the system documented is the light-dominant variant the storefront ships by default.
• Letter-spacing on body sizes is reported as "normal" by the extractor; the precise pixel offset is undocumented and may vary by platform.