Sage Whisper
#5b6550Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Oura Ring
ouraring.comWebsite preview
The design language
Oura speaks in a warm, tactile language of skin and ceramic: a cream-oatmeal canvas (#f7f1e8), deep charcoal text, and photography that fills every viewport with human-scale detail. The type system pairs a precise grotesque (AkkuratLL) for everything functional with an editorial high-contrast serif (Editorial New) for emotional headlines — italic flourishes in the serif whisper rather than shout. Color is nearly absent by design: the entire palette lives in warm neutrals, with a single muted olive (#5b6550) used as the only chromatic accent. Components are quiet and rounded — pill buttons, 8px-radius cards, 12px-radius inputs, hairline 1px borders in #ececec. The feeling is luxury wellness: less technology product, more considered object you wear on your body.
Color palette
accent
neutral
Cream
#f7f1e8Page canvas, hero backgrounds, card surfaces — the warm paper-white that makes every photograph feel tactile
Soft Charcoal
#4a4741Body copy, secondary headings, button borders, input borders — warm near-black that sits softer than pure #000
Pure Black
#000000Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color
Bone White
#fefaefSecondary card surface, button border tint, subtle elevated panels
Stone Border
#ecececHairline dividers, image borders, card outlines, input borders — the structural 1px that holds the system together
Ash Mist
#a8a5a0Muted helper text, secondary metadata, inactive nav, sub-labels
Slate Stone
#838280Tertiary text, icon secondary states, disabled button text
Dusk
#d3d1ceSubtle background fills for alternating sections, muted surface layer
Pure White
#ffffffText on dark fills, inverted button text, clean card highlights
Onyx Pill
#222428Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Typography
Type scale
Minor Third (1.2) · 15px basedisplay-xl
96px · 500 · 1 · -4.8px trackingThe quick brown fox jumps
display
80px · 300 · 1 · -2px trackingThe quick brown fox jumps
heading-lg
48px · 200 · 1.25 · -1.2px trackingThe quick brown fox jumps
heading
40px · 300 · 1.25 · -1px trackingThe quick brown fox jumps
text-30
30px · 100 · 1.5The quick brown fox jumps
heading-sm
24px · 400 · 1.38The quick brown fox jumps
subheading
18px · 700 · 1.5The quick brown fox jumps
body
16px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
AkkuratLL
- Weights
- 200, 300, 400, 500, 700
- Sizes
- 12, 14, 16, 18, 24, 40, 48, 80, 96
- Line height
- 1.0–1.5
- Letter spacing
- -0.05em at 96px, -0.025em at 48–80px, 0.025em at 12–14px, 0.05em at small caps
- Fallback
- Inter
- Features
- "kern" 1, "liga" 0, "dlig" 0, "onum" 0, "ss01" 0, "tnum" 0
Primary workhorse — body text, navigation, buttons, labels, UI chrome. Weight 400 for body, 500 for labels, 700 for emphasis. Light weights (200/300) appear in large display sizes for an airy editorial feel. Custom alternative: Inter, Neue Haas Grotesk, or Söhne.
Additional typeface
Editorial New
- Weights
- 100, 300, 500
- Sizes
- 30, 40, 80, 96
- Line height
- 1.0–1.5
- Letter spacing
- -0.025em across all sizes
- Fallback
- GT Super
- Features
- "dlig" 0, "kern", "liga" 0, "onum" 0, "ss01" 0, "tnum" 0
Display serif reserved for hero headlines and emotional section titles. Light weight (100/300) with negative tracking creates high-contrast elegance. Italic cuts deliver the poetic 'Made for you.' moments. Custom alternative: GT Super, Canela, or Domaine Display.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1280px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 16px
Border radius
cards
8pxlarge
24pxsmall
4pximages
8pxinputs
12pxbuttons
9999pxSpacing scale
3px4px8px10px12px14px16px20px24px28px32px40px48px64px80px128pxGuidelines
Do
- Use Editorial New only for display headlines 30px and above — never for body text or UI labels
- Set body line-height to 1.5 and display line-height to 1.0–1.25 — the contrast between airy display and breathable body is a signature
- Use 8px border-radius for all cards and images, 9999px for all buttons, 12px for inputs — these three radii define the system's geometry
- Pair negative letter-spacing (-0.025em to -0.05em) with sizes 40px and above; use 0.025–0.05em positive tracking on 12–14px small text for refined micro-labels
- Default to #f7f1e8 cream as background; reach for #ffffff only when you need inverted contrast on a dark surface
- Use #5b6550 sage as the sole chromatic accent — restrict it to icon strokes and decorative moments, never use it for text or buttons
- Maintain 80px section gaps in long-form layouts; collapse to 40px only in product card grids
Don’t
- Do not use Editorial New for body copy, nav items, button labels, or any text under 30px — the serif is display-only
- Do not use pure #ffffff as the page background — the warm cream #f7f1e8 is what gives the system its tactile character
- Do not apply drop shadows to cards or panels — use 1px #ececec borders and surface differentiation instead
- Do not use #5b6550 for CTA buttons, links, or body text — it is decorative accent only
- Do not mix more than two typefaces in a single view — Editorial New for the headline, AkkuratLL for everything else
- Do not use fully saturated colors or bright hues — the entire palette lives in desaturated warm territory
- Do not break the 9999px button radius convention for rectangular buttons — all buttons are pills
- Do not use tight letter-spacing on small text — 12–14px sizes need positive tracking (0.025–0.05em) to breathe
Components
Dark Pill Button (Primary)
Primary CTA — filled, rounded-full, near-black on cream backgroundsBackground #222428, text #ffffff, border-radius 9999px, padding 14px 28px, font AkkuratLL weight 500 size 16px, letter-spacing 0.025em. Used for 'Discover Oura Ring 4', 'Shop', 'How It Works'.
Ghost Pill Button (Secondary)
Secondary action — outlined pill with no fillBackground transparent, border 1px #4a4741, text #4a4741, border-radius 9999px, padding 14px 28px, font AkkuratLL weight 500 size 16px. Used for 'Explore' next to Shop on product cards.
Product Card (Lifestyle)
Product showcase card with full-bleed photographyFull-bleed photographic background, 8px border-radius, 1px #ececec border, product name overlay in white (#ffffff) at 30–40px Editorial New weight 300, price label in body-sm AkkuratLL. Dark scrim at bottom for text legibility. Explore + Shop ghost buttons positioned bottom-right.
Navigation Bar (Top)
Primary site navigation with centered linksTransparent or #f7f1e8 background, no border, logo (Oura wordmark) left, nav links center (Shop, Health Features, Experiences, For Organizations) in AkkuratLL weight 400 size 14px #4a4741, account icon right. Dropdown carets in #838280.
Announcement Bar
Top promotional strip above navBackground #f7f1e8, text #4a4741 AkkuratLL weight 400 size 14px, centered single line. Minimal, no border.
Section Heading (Editorial)
Large display headline for content sectionsEditorial New weight 300 size 80–96px, color #4a4741 or #000000, letter-spacing -0.025em. Centered or left-aligned. Italic variant (weight 300 italic) for poetic phrases.
Body Paragraph
Standard body copy blockAkkuratLL weight 400 size 16–18px, line-height 1.5, color #4a4741, max-width ~600px for readability in body contexts.
Text Input
Form input for newsletter, account creationBackground transparent or #ffffff, border 1px #4a4741 or #ececec, border-radius 12px, padding 14px 20px, font AkkuratLL weight 400 size 16px #000000. Focus state: border darkens to #000000.
Membership CTA Pill
Dark pill button for membership conversionBackground #222428, text #ffffff, border-radius 9999px, padding 14px 28px, font AkkuratLL weight 500 size 16px. Same as primary button but used in lower-priority conversion contexts.
Hero Overlay Card
Small product teaser card overlaid on hero photographyDark background (#222428 or #1c1b1a), 8px border-radius, product thumbnail left, title + CTA right, white text, positioned bottom-right of hero. Compact 320px width.
Tab Navigation
Horizontal tab strip for product feature sectionsUnderline-style tabs in AkkuratLL weight 400 size 16px, color #a8a5a0 (inactive) and #000000 (active), 2px solid #000000 underline on active tab. Spacing: 40px between tabs.
Footer
Site footer with link columnsBackground #f7f1e8 or #d3d1ce, multi-column link lists in AkkuratLL weight 400 size 14px #4a4741, section headings weight 500 size 14px, generous 80px vertical padding.
Surfaces & elevation
Level 0
Cream Canvas
#f7f1e8Base page background — warm paper-white that makes photography feel organic
Level 1
Bone White
#fefaefSecondary card or panel surface, subtle differentiation from canvas
Level 2
Pure White
#ffffffInverted card surfaces, input fields, dark-on-light contrast zones
Level 3
Dusk Layer
#d3d1ceAlternating section bands, muted background fills for visual separation
Level 4
Onyx
#222428Dark surfaces — footer, hero overlay cards, filled buttons
Elevation is achieved through contrast, not shadow. The system relies on warm surface differentiation (cream → bone → dusk → onyx) and 1px #ececec hairlines rather than drop shadows. When shadows do appear, they are extremely soft and warm-tinted, barely perceptible. This keeps the interface feeling like printed paper rather than digital material.
Layout & imagery
Layout
Full-bleed hero with a large editorial headline left-aligned over a warm photograph filling the viewport. Navigation floats transparently over the hero. Below the fold: two-column product card grid with full-bleed photography and overlay text. Content sections alternate between cream canvas and subtle dusk bands. Section headings are centered or left-aligned at display size. Footer is a wide multi-column layout. Max content width approximately 1280px with generous 80px section gaps. The rhythm is slow, spacious, editorial — never information-dense.
Imagery
Photography is the dominant visual element — always full-bleed, always human-scale, always warm-toned. Lifestyle shots show hands wearing the ring, close-cropped skin texture, soft natural light. No product-on-white clinical shots. Color treatment is warm and slightly desaturated, with golden-hour undertones. Icons are line-drawn and minimal, rendered in #5b6550 olive or #4a4741 charcoal. No illustrations, no 3D renders, no abstract graphics — the product and the human body are the only visuals.
Design notes
Agent Guide
## Quick Color Reference - text: #000000 - background: #f7f1e8 - border: #ececec - accent: #5b6550 - secondary text: #4a4741 - muted text: #a8a5a0 - primary action: no distinct CTA color ## Example Component Prompts 1. **Dark Pill Button**: Background #222428, text #ffffff, border-radius 9999px, padding 14px 28px, AkkuratLL weight 500 size 16px letter-spacing 0.025em. Label: 'Discover Oura Ring 4'. 2. **Product Lifestyle Card**: Full-bleed warm-toned photograph, 8px border-radius, 1px #ececec border. Overlay text bottom-left: 'Oura Ring 4' in Editorial New weight 300 size 40px #ffffff, 'From €399' in AkkuratLL weight 400 size 14px #ffffff at 80% opacity. Two ghost pill buttons bottom-right: 'Explore' (border 1px #ffffff, text #ffffff) and 'Shop' (background #ffffff, text #000000). No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 4. **Tab Strip**: Horizontal row of 5 tabs, AkkuratLL weight 400 size 16px. Inactive: #a8a5a0. Active: #000000 with 2px solid #000000 underline. 40px gap between tabs. Content area below shows feature image left, description right. 5. **Section Heading Block**: Centered, Editorial New weight 300 size 80px #4a4741, letter-spacing -0.025em. Two lines, second line optionally italic. 80px vertical padding above and below.
Gradient System
Gradients are used sparingly as atmospheric warm glows — never as background fills. Two primary gradients: (1) a radial golden warmth rgba(255, 182, 72, 0.3) → transparent, positioned at 50% 85% to suggest candlelight or sunset on the page; (2) a diagonal dark-to-gold linear gradient rgb(30,36,39) → rgb(175,117,27) for premium moments like the charging case teaser. These are decorative warmth, not functional UI.
Similar brands
Aesop
Same warm cream backgrounds, restrained near-monochrome palette, and serif-grotesque type pairing for luxury wellness positioning
Ganni
Editorial serif display headlines over full-bleed warm lifestyle photography with pill-shaped ghost buttons
Mejuri
Warm neutral canvas, pill buttons, lifestyle product cards with overlay text, and a single muted accent tone
M.Gemi
Editorial New-style high-contrast serif for emotional headlines paired with clean grotesque body, warm paper-like backgrounds
By Far
Warm cream canvas, oversized serif display type, ghost pill CTAs, and full-bleed warm-toned lifestyle photography
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
