Oura Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

12type steps

6radius steps

4pxspacing base

Oura, in one page

Oura's web presence reads like a printed field journal that learned to breathe. The default surface is a warm paper cream ({colors.canvas} — #f7f1e8) rather than white, and everything sits on it with generous air: a light, high-contrast serif for the big statements, a calm grotesque sans for everything you actually read, and full-bleed lifestyle photography that carries most of the emotional weight. Where a typical wellness-tech site would reach for gradients and glassmorphism, Oura reaches for restraint — flat fills, hairline rules, and long vertical silences between sections.

The system runs three surface "worlds." The cream world ({colors.canvas}) is home base for marketing and editorial content. The ink world ({colors.ink-band} / {colors.ink-band-soft}) is a near-black stage reserved for the footer and the "In the News" band, where cream cards float like clippings on a dark table. The silver world ({colors.surface-grey} → {colors.silver}) is a cool, machined grey gradient used only on the product-showcase pages, where the ring is photographed like jewellery.

Color discipline is the signature move. The whole palette is earth-toned — mustard and gold ({colors.gold}, {colors.ochre}), clay and espresso ({colors.clay}, {colors.espresso}), olive and sage ({colors.forest}, {colors.sage}) — and these appear as accent bands, illustration, and score/data-visualisation, never as buttons. Buttons carry a single, deliberate exception: action blue ({colors.primary} — #2a72de), used only for the decisive conversion moments ("Explore", "Shop All Products"). The warm brand neutral {colors.stone} (#4a4741) does the quieter work — the wordmark, editorial pills, form fields, outlines, and links — so the blue never has to compete.

Key Characteristics:

Warm-paper canvas ({colors.canvas}) as the default surface, not white — cream is the brand's resting state.
A two-typeface voice: {typography.display} (Editorial New, a light high-contrast serif) for headlines, {typography.body} (AkkuratLL, a neutral grotesque) for reading.
One decisive action blue ({colors.primary}) reserved strictly for primary CTAs; every other button is warm-neutral {colors.stone} or cream.
An earth-tone accent family — mustard, clay, olive — used for bands, illustration and data-viz, deliberately kept off buttons.
Fully-rounded pill buttons ({rounded.full}) against softly-rounded cards ({rounded.lg}) and large-radius product images ({rounded.xl}).
Three surface worlds cycling in a predictable rhythm: cream editorial → black news/footer band → silver product stage.
Photography-first hierarchy: full-bleed imagery leads, UI recedes to hairlines and quiet labels.

Do's and don'ts

Do

Reserve {colors.primary} strictly for the primary conversion CTA — one blue moment per view, maximum.
Default every surface to {colors.canvas} (warm paper), not white. White ({colors.surface}) is for elevated cards and inputs, not backgrounds.
Use {colors.stone} for the wordmark, secondary pills, outlines, form fills, and links — it is the workhorse neutral.
Pair {typography.display} (thin serif) at large sizes with {typography.body} (grotesque) for reading; let scale create hierarchy.
Keep pills fully rounded ({rounded.full}) and cards softly rounded ({rounded.lg}); use {rounded.xl} only for large product imagery.
Let the earth-tone ramps (gold, clay, olive) live in bands, illustration, and data-viz — as color-blocked sections that pace the scroll.
Give sections large vertical breathing room; treat empty cream as structure.

Don't

Don't use {colors.primary} for links, accents, icons, or decorative fills — it must stay unique to the primary CTA.
Don't put the mustard/olive accent colors on buttons — they are surfaces and illustration, never actions.
Don't set body copy in {typography.display}; the thin serif is display-only and gets illegible at small sizes.
Don't default backgrounds to white — it breaks the warm-paper identity.
Don't add heavy or hard-edged shadows; elevation here is soft, warm, and low-opacity.
Don't crowd sections — compressing the vertical rhythm collapses the calm, editorial pacing that defines the brand.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Oura design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #2a72de
- on-primary: #ffffff
- stone: #4a4741
- on-stone: #ffffff
- clay: #6b443d
- espresso: #39221e
- gold: #af751b
- ochre: #bc924c
- gold-soft: #ddaa61
- gold-pale: #ddbe78

Type:
- families: Editorial New, AkkuratLL, Fraunces, Newsreader
- scale: 12, 13, 14, 16, 18, 20, 24, 32, 40
- weights: 100, 300, 400, 600, 700

Shape:
- radius: 0, 4, 8, 12, 24, 40
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.

Spacing: 4, 8, 12, 16, 24, 32

Rules:
- Reserve `{colors.primary}` strictly for the primary conversion CTA — one blue moment per view, maximum.
- Default every surface to `{colors.canvas}` (warm paper), not white. White (`{colors.surface}`) is for elevated cards and inputs, not backgrounds.
- Use `{colors.stone}` for the wordmark, secondary pills, outlines, form fills, and links — it is the workhorse neutral.
- Pair `{typography.display}` (thin serif) at large sizes with `{typography.body}` (grotesque) for reading; let scale create hierarchy.
- Keep pills fully rounded (`{rounded.full}`) and cards softly rounded (`{rounded.lg}`); use `{rounded.xl}` only for large product imagery.
- Let the earth-tone ramps (gold, clay, olive) live in bands, illustration, and data-viz — as color-blocked sections that pace the scroll.

Avoid:
- Don't use `{colors.primary}` for links, accents, icons, or decorative fills — it must stay unique to the primary CTA.
- Don't put the mustard/olive accent colors on buttons — they are surfaces and illustration, never actions.
- Don't set body copy in `{typography.display}`; the thin serif is display-only and gets illegible at small sizes.
- Don't default backgrounds to white — it breaks the warm-paper identity.
- Don't add heavy or hard-edged shadows; elevation here is soft, warm, and low-opacity.
- Don't crowd sections — compressing the vertical rhythm collapses the calm, editorial pacing that defines the brand.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Source pages analysed: the homepage, the Oura Ring 5 store page, the Activity & Movement page, and the Clinical & Science Experts page. The palette below reconciles all four into one system.

Brand & Accent

Action Blue ({colors.primary} — #2a72de): the single conversion color. Fills the primary CTA pill ("Explore", "Shop All Products") with {colors.on-primary} text. Used nowhere else — not for links, not for accents.
Stone ({colors.stone} — #4a4741): the warm taupe-brown brand neutral. Carries the wordmark, secondary/editorial pill buttons, form-field fills, circular-icon outlines, and default link color. This is the color that makes Oura feel "Oura."
Clay ({colors.clay} — #6b443d): a warm reddish-brown used for accent bands and content cards (e.g., the Activity page's "Your Oura Activity Score" band).
Espresso ({colors.espresso} — #39221e): the darkest brown, for deep accent fills and rich text on gold surfaces.
Gold ({colors.gold} — #af751b) / Ochre ({colors.ochre} — #bc924c) / Gold Soft ({colors.gold-soft} — #ddaa61) / Gold Pale ({colors.gold-pale} — #ddbe78) / Gold Deep ({colors.gold-deep} — #684d07): the mustard ramp. Powers warm illustration, the activity-ring dashboard card, and score data-visualisation.
Forest ({colors.forest} — #224228) / Olive ({colors.olive} — #5c6f5d) / Sage ({colors.sage} — #849671) / Sage Mute ({colors.sage-mute} — #7b886d) / Sage Pale ({colors.sage-pale} — #ced4b8): the olive ramp, used for calm accent bands, illustration, and secondary data-visualisation.

Surface

Canvas ({colors.canvas} — #f7f1e8): the signature warm-paper background for all editorial and marketing surfaces.
Surface ({colors.surface} — #ffffff): pure white, for elevated cards, inputs-on-cream, and the circular "+" overlay buttons on person cards.
Surface Grey ({colors.surface-grey} — #ececec): the light end of the product-page gradient and light utility fills.
Silver ({colors.silver} — #cccac7): the cool grey used on product-showcase pages and as the selected-tab border.
Ink Band ({colors.ink-band} — #000000): the true-black stage for the footer / news band.
Ink Band Soft ({colors.ink-band-soft} — #19191c): the near-black used for the footer surface, a hair warmer than pure black.
Hairline ({colors.hairline} — #e1dcd3): the warm 1px divider on cream (a low-opacity ink wash blended onto canvas).

Text

Ink ({colors.ink} — #1c1b1a): primary heading and body text on cream.
Stone ({colors.stone} — #4a4741): secondary text and editorial emphasis on cream.
Ash ({colors.ash} — #838280): muted grey for meta text, titles-under-names, and utility captions.
Mute ({colors.mute} — #a8a5a0): warm grey for the quietest captions and for secondary text on dark bands.
On Dark ({colors.on-dark} — #ffffff): text and icons on the ink and silver worlds.

Semantic

Error ({colors.error} — #e33a22): validation and focus-error state on form fields (the focused email field border).

Type scaleRead the full spec

Font Family

Two families carry the entire system, and the tension between them is the point.

Editorial New ({typography.display}, {typography.heading-1}, {typography.heading-2}, {typography.lead}): a light, high-contrast transitional serif used for display headlines, section titles, and the occasional light-serif lead paragraph. Weights run thin — 100 and 300 — so the large sizes read as elegant, not heavy. The Activity page shows it in italic ("move *count*") for a hand-set editorial flourish.
AkkuratLL ({typography.heading-3} through {typography.caption}): a neutral Swiss grotesque that does all the real reading work — subheads, body, UI labels, buttons, captions. Weights 300 / 400 / 600 / 700.

Hierarchy

Token	Family	Size	Weight	Line Height	Use
`{typography.display}`	Editorial New	110px	300	1.05	Homepage hero headline ("Subtle. Power.")
`{typography.display-2}`	Editorial New	80px	300	1.1	Secondary-page display headlines
`{typography.heading-1}`	Editorial New	68px	300	1.1	Large page titles
`{typography.heading-2}`	Editorial New	40px	300	1.15	Section headlines
`{typography.heading-3}`	AkkuratLL	40px	400	1.25	Sans section headings / large stats
`{typography.title}`	AkkuratLL	32px	400	1.25	Card titles, sub-section titles
`{typography.lead}`	Editorial New	24px	100	1.25	Light-serif intro / lead paragraphs
`{typography.body-lg}`	AkkuratLL	20px	400	1.5	Emphasised body copy
`{typography.body}`	AkkuratLL	18px	400	1.5	Default body text
`{typography.body-sm}`	AkkuratLL	16px	400	1.5	Dense body, links, form text
`{typography.button}`	AkkuratLL	16px	600	1	Button labels
`{typography.ui}`	AkkuratLL	14px	400	1.4	Nav links, tabs, utility UI
`{typography.caption}`	AkkuratLL	13px	400	1.4	Captions, footnotes
`{typography.eyebrow}`	AkkuratLL	12px	700	1.2	Small-caps overlines ("IN THE NEWS", "FEATURED ARTICLE")

Principles

Serif for feeling, sans for facts. {typography.display} and its siblings appear only at large sizes where the high stroke contrast is legible and expressive; everything at reading scale is {typography.body}.
Thin display weights. Big serif headlines lean on weight 100–300, so scale — not boldness — creates hierarchy.
Quiet overlines. Section context is set with {typography.eyebrow} (uppercase, lightly tracked) rather than heavy kickers.

Note on Font Substitutes

Both faces are proprietary. For open-source builds, substitute Editorial New with Fraunces or Newsreader (both high-contrast serifs — set optical size high and weight low to match the thin display feel), and AkkuratLL with Inter or Hanken Grotesk (neutral grotesques with similar x-height). When substituting, nudge display line-height up slightly (Fraunces runs a touch taller than Editorial New) and keep body tracking at 0.

Components and layoutRead the full spec

Only Default and (where genuinely extracted) Active/Pressed states are documented. Variants live as separate components: entries in the front matter.

Navigation

nav-bar — Top navigation on cream

Background {colors.canvas}, links in {colors.stone} at {typography.ui}, no radius. Slots: OURA wordmark (left, {colors.stone}), center dropdown links (Shop, Your Health, Why Oura, For Organizations), cart icon (right). Sits flush on the cream canvas with no divider until scrolled.

announcement-bar — Top promo strip

Full-width cream strip above the nav, centered {typography.eyebrow} text in {colors.ink} (e.g. free-trial offer copy). No radius, no background shift — it reads as the top edge of the paper.

Hero

hero — Page-opening statement

Cream background, {typography.display} serif headline in {colors.ink} (homepage: "Subtle. Power."), a small serif eyebrow label above, and a single button-primary blue pill CTA. Often paired with full-bleed product/lifestyle photography directly beneath the headline.

Buttons

button-primary — Primary conversion CTA

Background {colors.primary}, text {colors.on-primary}, type {typography.button}, fully rounded ({rounded.full}). The only blue in the interface. Used for "Explore" and "Shop All Products".

button-secondary — Editorial / secondary action

Background {colors.stone}, text {colors.on-stone}, {typography.button}, {rounded.full}. The warm-neutral pill for content actions ("Why Oura", "How It Works").

button-on-dark — Cream pill on dark surfaces

Background {colors.canvas}, text {colors.stone}, {typography.button}, {rounded.full}. Used for "Read More" and card actions floating on the black news band. (Extracted button variant: cream fill, stone text, full radius.)

button-outline — Outline pill on dark/photo

Transparent over {colors.ink-band}, 1px {colors.on-dark} border, white text, {rounded.full}. For low-emphasis actions over dark imagery.

button-outline-stone — Outline pill on cream

Cream background, 1px {colors.stone} border, {colors.stone} text, {rounded.full}. Low-emphasis action on the paper canvas.

button-icon-circular — Circular icon control

Circular ({rounded.full}) control for carousel arrows and the person-card "+" affordance. Two flavours: a white surface circle ({colors.surface}) with a hairline edge for the "+" overlays, and a stone-outlined circle for the carousel arrows.

Inputs & Forms

text-input — Newsletter / email field

Background {colors.stone}, text {colors.on-stone}, {typography.body-sm}, radius {rounded.md} (12px), padding roughly 8px vertical / 20px left with a trailing submit affordance on the right. The dark taupe fill makes the field feel like part of the footer rather than a bright form box.

text-input-focused — Focused / error field

On focus the field lifts to a light surface ({colors.surface}) with {colors.ink} text and a {colors.error} border for the validation-error state. Radius stays {rounded.md}.

Cards & Containers

feature-card — Content / benefit card

White surface ({colors.surface}), {colors.hairline} border, {colors.ink} text, {typography.body}, radius {rounded.lg}, padding {spacing.lg}. The default soft-cornered content container on cream.

feature-card-elevated — Floating content card

Cream surface ({colors.canvas}) with a soft Level-1/2 shadow, {rounded.lg}, padding {spacing.lg}. Used where a card floats over imagery or the black band (news clippings, spec card).

product-card — Product-showcase media card

Cool grey surface ({colors.surface-grey}), large radius {rounded.xl} (40px), holds a machined product render on the silver stage, often with a subtle radial glow behind the ring.

person-card — Expert / leadership card

Cream background, portrait photo with radius {rounded.lg}, a white circular button-icon-circular "+" in the corner, name in {typography.body}/{typography.title} and role in {colors.ash} {typography.caption}. Appears in horizontal carousels.

news-card — News clipping on the dark band

Cream card ({colors.canvas}) floating on {colors.ink-band}, {colors.ink} text, {typography.body}, {rounded.lg}, padding {spacing.lg}. Carries a publication quote plus a circular arrow link.

Signature Components

stat-badge — Circular stat readout

Perfect circle ({rounded.full}) on cream with a large {typography.title}/{typography.heading-3} number in {colors.stone} and a small caption beneath (e.g. "99% / 95% / 90%" accuracy figures on the product page).

pill-tab — Product selector tab

Fully-rounded ({rounded.full}) tab in a horizontal selector row; selected state gets a {colors.silver} (2px) border, label in {typography.ui}, {colors.stone} text on cream. Used for the "Everyday health sensing" category switcher.

eyebrow-label — Section overline

Uppercase {typography.eyebrow} label in {colors.ink} on cream, no background, marking section context ("ACTIVITY & MOVEMENT", "FROM THE PULSE BLOG", "FEATURED ARTICLE" as a small pill on imagery).

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-oura {--page-bg: #f7f1e8;
  --page-bg-gradient: none;
  --text-color: #1c1b1a;
  --heading-color: #1c1b1a;
  --link-color: #2168d3;
  --link-hover-color: #1a52a7;
  --border-color: #d0cac3;
  --card-bg: #f7f1e8;
  --card-shadow: 0 1px 2px rgba(28,27,26,0.06);
  --card-hover-shadow: 0 6px 18px rgba(28,27,26,0.12);
  --header-bg: #1c1b1a;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #f7f1e8;
  --footer-text-color: #696662;
  --button-bg: #2a72de;
  --button-text-color: #ffffff;
  --button-hover-bg: #1d5bb8;
  --button-border: none;
  --button-border-radius: 12px;
  --button-secondary-bg: #eae4dc;
  --button-secondary-text-color: #1c1b1a;
  --button-secondary-hover-bg: #ddd7cf;
  --button-secondary-border: 1px solid #d0cac3;
  --prompt-bg: #ece6de;
  --prompt-text-color: #1c1b1a;
  --base-font: var(--font-inter);
  --heading-font: var(--font-helvetica);
  --card-border-radius: 12px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

mistral.ai 75.1%
claude 74.6%
cocomeister 72.2%
bmw 72.2%
ferrari 71.6%

Where this came from

Source document: volt/design-md/oura/DESIGN.md · 30.8 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.