--- version: alpha name: Oura description: Biometric luxury system pairing Editorial New's ultralight serif with AkkuratLL's clean grotesque — a cream-and-charcoal canvas that communicates scientific authority without clinical coldness. colors: # Primary surfaces — warm cream / dark charcoal pairing background: "#f7f1e8" # warm parchment canvas (semantic primary from manifest) background-dark: "#000000" # pure-black hero sections and deep immersive moments surface: "#ececec" # cool mid-gray section bands and card fills surface-charcoal: "#4a4741" # warm dark charcoal — secondary surface, dark cards # Ink / text ink: "#1c1b1a" # near-black primary text (slightly warmer than pure black) ink-secondary: "#4a4741" # charcoal — secondary text, muted headings ink-muted: "#a8a5a0" # stone gray — captions, metadata, disabled states on-dark: "#f7f1e8" # cream text on black and dark charcoal backgrounds on-primary: "#ffffff" # white text on indigo CTAs # Brand accent primary: "#2a72de" # Oura blue — interactive CTAs (--color-blue-100) primary-dark: "#2056a6" # deeper blue — hover state (--color-blue-200) primary-indigo: "#4a4af4" # brand indigo — fill-brand-indigo variable, hero accent # Semantic / status success: "#55dc83" # health metric success (--color-green-600) warning: "#cc612c" # alert orange (--color-orange-500) error: "#d22c15" # critical error (--color-red-600) # Warm accent palette (data viz, metric states) accent-amber: "#ddaa61" # warm amber glow (--color-mustard-100) accent-sand: "#e1ba8b" # light sand (--color-orange-100) accent-olive: "#849671" # muted olive green (--color-olive-400) # Borders border: "#d3d1ce" # soft warm divider (rgb 211,209,206 from borders data) border-strong: "#4a4741" # charcoal outline for secondary pill buttons # Shadow tints shadow-soft: "#999999" # neutral medium shadow (manifest theme_color) typography: display-hero: fontFamily: "PP Editorial New, Georgia, serif" fontSize: 110px fontWeight: 300 lineHeight: 1.1 letterSpacing: -5.5px display: fontFamily: "PP Editorial New, Georgia, serif" fontSize: 80px fontWeight: 100 lineHeight: 1.25 letterSpacing: -2px heading-section: fontFamily: "AkkuratLL, Geneva, Arial, sans-serif" fontSize: 80px fontWeight: 300 lineHeight: 1.0 letterSpacing: -2px heading: fontFamily: "AkkuratLL, Geneva, Arial, sans-serif" fontSize: 48px fontWeight: 200 lineHeight: 1.0 letterSpacing: 0px heading-sub: fontFamily: "AkkuratLL, Geneva, Arial, sans-serif" fontSize: 40px fontWeight: 300 lineHeight: 1.0 letterSpacing: 0px heading-label: fontFamily: "AkkuratLL, Geneva, Arial, sans-serif" fontSize: 40px fontWeight: 400 lineHeight: 1.25 letterSpacing: -2px body-large: fontFamily: "PP Editorial New, Georgia, serif" fontSize: 40px fontWeight: 300 lineHeight: 1.25 letterSpacing: -1px body-medium: fontFamily: "AkkuratLL, Geneva, Arial, sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.8px body: fontFamily: "AkkuratLL, Geneva, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-bold: fontFamily: "AkkuratLL, Geneva, Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0px button-ui: fontFamily: "AkkuratLL, Geneva, Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0px nav-label: fontFamily: "AkkuratLL, Geneva, Arial, sans-serif" fontSize: 13px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.13px caption-upper: fontFamily: "AkkuratLL, Geneva, Arial, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 1.33 letterSpacing: 0px caption: fontFamily: "AkkuratLL, Geneva, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px spacing: xs: 8px sm: 12px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 96px 5xl: 128px rounded: none: 0px sm: 4px md: 8px lg: 12px xl: 24px pill: 9999px components: # Primary CTA — Oura blue pill button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-primary-hover: backgroundColor: "{colors.primary-dark}" textColor: "{colors.on-primary}" # Secondary CTA — cream pill (on dark sections) button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink-secondary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-secondary-hover: backgroundColor: "{colors.ink-muted}" textColor: "{colors.ink-secondary}" # Ghost CTA — outlined cream pill on dark canvas button-ghost: backgroundColor: "{colors.background-dark}" textColor: "{colors.on-dark}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px border: "1px solid {colors.on-dark}" button-ghost-hover: backgroundColor: "{colors.surface-charcoal}" textColor: "{colors.on-dark}" # Dark solid pill — charcoal surface button-dark: backgroundColor: "{colors.surface-charcoal}" textColor: "{colors.on-dark}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px # Navigation bar nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink-secondary}" typography: "{typography.nav-label}" rounded: "{rounded.none}" padding: 16px 24px # Feature card — warm surface card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 32px card-dark: backgroundColor: "{colors.surface-charcoal}" textColor: "{colors.on-dark}" rounded: "{rounded.lg}" padding: 32px # Metric / health data card card-metric: backgroundColor: "{colors.background-dark}" textColor: "{colors.on-dark}" rounded: "{rounded.xl}" padding: 24px # Email / newsletter input input: backgroundColor: "{colors.surface-charcoal}" textColor: "{colors.on-dark}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 8px 48px 8px 20px input-focus: backgroundColor: "{colors.surface-charcoal}" textColor: "{colors.on-dark}" border: "1px solid {colors.ink}" # Data badge / label tag badge: backgroundColor: "{colors.surface}" textColor: "{colors.ink-secondary}" typography: "{typography.caption-upper}" rounded: "{rounded.sm}" padding: 4px 8px badge-indigo: backgroundColor: "{colors.primary-indigo}" textColor: "{colors.on-primary}" typography: "{typography.caption-upper}" rounded: "{rounded.sm}" padding: 4px 8px --- # Oura Design System ## Overview Oura occupies an unusual position in health technology — it is a luxury object worn on the finger, a scientific instrument measuring physiological signals, and a consumer digital product all at once. The visual identity reflects this tension with uncommon elegance. A warm parchment canvas (`{colors.background}`) recalls the creaminess of premium printed matter — not clinical white, not cold tech gray, but something closer to fine paper or unbleached linen. Against this warmth, the charcoal (`{colors.surface-charcoal}`) and near-black ink (`{colors.ink}`) convey authority without aggression. The result is a palette that could credibly sit in a Scandinavian design journal as comfortably as in a biometrics research paper. The typography duet is the most distinctive design decision in the system. Editorial New, a contemporary editorial serif from Pangram Pangram, is used at outsized display sizes — 110px with weight 300 and aggressive negative tracking (-5.5px). Its ultralight forms at this scale have the quality of carved stone: deliberate, slow, certain. AkkuratLL, a Swiss neo-grotesque, handles all functional text — from 80px display headings down to 12px captions. The contrast between the serif's organic elegance and the grotesque's rational clarity creates a constant productive tension that signals both scientific precision and considered luxury. Neither font alone would achieve this; the pairing is the voice. Buttons throughout the site are fully pill-shaped — large radius values reducing to simple circles at small sizes — and the palette remains restrained until hover states reveal a deeper Oura blue (`{colors.primary-dark}`). Beneath the primary surfaces lies a richer color system: the CSS variables expose warm ambers, olive greens, and an indigo (`{colors.primary-indigo}`) used in app UI and data visualization contexts. These do not intrude on the marketing canvas; they wait. **Key Characteristics:** - Warm cream canvas (`{colors.background}`) — parchment tone anchors the brand's anti-clinical warmth - Dual-typeface system: Editorial New (ultra-light serif, display only) + AkkuratLL (grotesque, all UI) - Extreme display tracking at -5.5px on 110px type — condensed, carved-stone headline quality - All interactive elements are fully pill-shaped (`{rounded.pill}`) — circles at small, capsules at large - `{colors.primary}` Oura blue for primary CTAs; cream `{colors.background}` for secondary pills on dark sections - Five-value warm accent palette in CSS variables (amber, sand, olive, mustard, green) for data contexts - Black sections (`{colors.background-dark}`) used for immersive product moments and deep data UI - Generous vertical spacing (96px/128px section gaps) — breathing room signals product confidence - Subtle radial gradients on feature sections using warm stop colors (sand, blue-tinted) - Motion is fast and eased: 150ms default with `cubic-bezier(0.4, 0, 0.2, 1)` everywhere - OpenType features explicitly disabled (`dlig 0, liga 0`) — AkkuratLL runs clean, no auto-ligatures - Health metric states use dedicated semantic tokens: `{colors.success}`, `{colors.warning}`, `{colors.error}` ## Colors ### Primary - **Warm Parchment** (`{colors.background}`): The dominant canvas. Every light section uses this cream as its floor — warmer than white, more considered than standard gray. The slight yellow-beige temperature communicates handcrafted quality. - **Near-Black** (`{colors.ink}`): Primary text on cream backgrounds. Not pure black — the `#1c1b1a` value carries just enough warmth to harmonize with the canvas without going muddy. - **Charcoal** (`{colors.surface-charcoal}`): The secondary dark surface. Used for dark feature cards, dark mode inputs, and the "Why Oura" ghost button treatment. Warmer than pure black, softer as a surface. ### Brand Accent - **Oura Blue** (`{colors.primary}`): Primary interactive blue — links, primary CTA buttons, hover states on black links. The `#2a72de` maps to `--color-blue-100` in the CSS custom properties. - **Deep Blue** (`{colors.primary-dark}`): Hover state for primary blue CTAs. `--color-blue-200` at `#2056a6`. - **Brand Indigo** (`{colors.primary-indigo}`): The app's signature indigo, `--color-fill-brand-indigo`. Present in data badges, app UI overlays, and deep metric displays. ### Text - **Ink Secondary** (`{colors.ink-secondary}`): Charcoal warm-dark for secondary text, subheadings, and nav links. - **Stone Gray** (`{colors.ink-muted}`): Muted text for captions, disclaimers, timestamps. The `#a8a5a0` balances readability against the cream canvas. - **On Dark** (`{colors.on-dark}`): Cream `{colors.background}` recycled as text on black — preserves temperature unity across light/dark surface inversions. ### Warm Accent Palette (data / metric contexts) - **Amber** (`{colors.accent-amber}`): Sleep quality warm tones, metric positive states. - **Sand** (`{colors.accent-sand}`): Softer amber gradient stops, recovery metric backgrounds. - **Olive** (`{colors.accent-olive}`): Readiness and activity metric overlays. ### Semantic - **Success** (`{colors.success}`): Health metric achievement, green readiness scores. - **Warning** (`{colors.warning}`): Caution states in health data, unusual readings. - **Error** (`{colors.error}`): Critical metric alerts. ### Borders & Shadows - **Border** (`{colors.border}`): Warm hairline dividers between content sections. - **Border Strong** (`{colors.border-strong}`): Charcoal outline on secondary pill buttons in light contexts. - **Shadow Soft** (`{colors.shadow-soft}`): The primary shadow tint — used in diffused drop shadows on elevated modals and sticky navigation. ## Typography ### Font Family - **Display serif**: `PP Editorial New` (self-hosted: PPEditorialNew-Light.woff2, PPEditorialNew-Ultralight.woff2, PPEditorialNew-UltralightItalic.woff2), with fallbacks: `Georgia, serif` - **UI grotesque**: `AkkuratLL` (self-hosted: AkkuratLL-Regular.woff2, AkkuratLL-Light.woff2), with fallbacks: `Geneva, Arial, sans-serif` - **OpenType features**: All discretionary ligatures (`dlig`) and standard ligatures (`liga`) are explicitly set to `0` on both families. `kern` is enabled. `onum`, `ss01`, `tnum` are off. This produces clean, rational text without auto-substitution. ### Hierarchy The complete type scale lives in the `typography:` token block above. Use those tokens directly via reference. | Token | Use | |---|---| | `display-hero` | Homepage hero, campaign landing headlines (110px Editorial New) | | `display` | Secondary hero moments, editorial features (80px Editorial New) | | `heading-section` | Section-level headings in AkkuratLL — features, product areas (80px) | | `heading` | Product feature headings, mid-page titles (48px) | | `heading-sub` | Sub-feature labels, card headings (40px) | | `heading-label` | Paired label headings at medium weight (40px AkkuratLL 400) | | `body-large` | Editorial New in body context — pull quotes, feature introductions (40px) | | `body-medium` | AkkuratLL at statement size — metric callouts, key stats (32px) | | `body` | Standard reading text, interface copy (16px AkkuratLL) | | `body-bold` | Emphasized body content (16px / 700) | | `button-ui` | All pill button labels (16px / 700) | | `nav-label` | Navigation items, small UI labels (13px / 600) | | `caption-upper` | Tag labels, status labels (12px / 700, used with uppercase transform) | | `caption` | Fine print, metadata, legal (12px / 400) | ### Principles - **Dual-voice discipline**: Editorial New is reserved for display moments only — it never appears at body or UI sizes. AkkuratLL handles everything functional. Mixing roles breaks the system's tonal contrast. - **Extreme negative tracking at scale**: The -5.5px letter-spacing at 110px is not decorative; it creates a condensed, typeset-quality density that prevents light-weight display type from feeling loose. - **Weight stays light**: AkkuratLL operates between 200 and 400 at display scales. Weight 700 appears only at 16px and below — for button labels and caption-upper. Heavy display weight would fight the Editorial New. - **Editorial New italic exists**: PPEditorialNew-UltralightItalic.woff2 is loaded — it is available for pull quotes and editorial moments where tonal variety is needed. ## Layout ### Spacing System The complete spacing scale lives in the `spacing:` token block above. Base unit is 8px; the system multiplies cleanly: 8 → 12 → 16 → 24 → 32 → 48 → 64 → 96 → 128. The upper end of this scale (96px/128px) is the signature Oura pace — section-level vertical gaps are generous to the point of theatricality, creating the "breathing room between each idea" rhythm that luxury health brands require. ### Grid & Container - Max content width: approximately 1280px (matching the widest breakpoint) - Hero sections: full-viewport-width with centered content, large typographic emphasis - Feature sections: alternating two-column and single-column layouts - Card grids: 2-3 column on desktop, 1 column on mobile - Nav: full-width bar, logo centered or left depending on scroll context ### Whitespace Philosophy - **Luxury pacing**: Large vertical gaps (96–128px) between sections are not a consequence of content sparsity but an explicit signal — the brand moves slowly, considers each feature, trusts the viewer. - **Type as visual mass**: Because AkkuratLL at 80px and Editorial New at 110px are visually heavy even at ultralight weights, generous whitespace prevents suffocation. - **Horizontal breathing**: Content blocks rarely fill more than 65% of the max-width container, with generous symmetric margins creating a centered, print-editorial feel. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, solid background | Section canvases, cards in context | | Subtle (Level 1) | `0px 2px 10px -3px {colors.shadow-soft}` | Minor floating elements | | Card (Level 2) | `0px 0px 12px 2px rgb(199,197,199)` | Elevated product cards | | Drop (Level 3) | `rgba(0,0,0,0.2) 0px 0px 18px 0px` | Modals, sticky nav on scroll | | Dramatic (Level 4) | `rgba(0,0,0,0.25) 0px 25px 50px -12px` | Overlay layers, full-screen dialogs | | Focus Ring | `1px solid {colors.ink}` outline | Keyboard focus on all interactive elements | **Shadow Philosophy**: Oura's shadows lean almost entirely flat. The dominant surface relationship is color contrast, not elevation. Cards on the parchment canvas differentiate through background color change (`{colors.surface}` or `{colors.surface-charcoal}`), not shadow. When shadows do appear — on scroll-sticky navigation or modal dialogs — they are soft, wide, and neutral-toned rather than sharp or brand-colored. The `{colors.shadow-soft}` approximation is accurate; no colored glow effects appear. ## Shapes The complete radius scale lives in the `rounded:` token block above. The system is polarized. | Token | Value | Use | |---|---|---| | `none` | 0px | Section containers, full-bleed images, edge-to-edge video | | `sm` | 4px | Badge/tag labels, tiny indicator dots | | `md` | 8px | Image thumbnails, article cards | | `lg` | 12px | Standard cards, bottom-rounded hero sections | | `xl` | 24px | Large metric cards, data panels | | `pill` | 9999px | Every button — primary, secondary, ghost, nav — pill shape universally | The ring itself is a circle — the physical product's geometry echoes through the UI. All CTA buttons are pills; there are no rectangular buttons in the primary interaction layer. The HTML source confirms `3.35544e+07px` (effectively infinite) radius values applied to all button elements. ## Components The complete component spec lives in the `components:` token block above. ### Button variants - **`button-primary`** — Oura blue pill (`{colors.primary}`), white text. Used for "Explore" / "Shop" calls-to-action in hero sections. Weight 700 AkkuratLL at 16px. 12px/24px padding. - **`button-secondary`** — Cream pill (`{colors.background}`) with charcoal text and a warm cream border. Used for softer "Shop" / "Read More" actions on mid-page content. - **`button-ghost`** — Transparent background with cream outline (`1px solid {colors.on-dark}`). Used on pure-black hero sections where filled buttons would compete with the product image. - **`button-dark`** — Charcoal-filled pill (`{colors.surface-charcoal}`) for "Why Oura" informational paths. ### Cards - **`card`** — Cream-background card with 12px radius and 32px padding for warm feature containers. - **`card-dark`** — Charcoal surface (`{colors.surface-charcoal}`) for dark feature presentations; cream text. - **`card-metric`** — Black background with 24px radius for health data panels; designed for app-adjacent data contexts. ### Inputs - **`input`** — Charcoal background with white text; 12px radius. The dark input on a dark section keeps forms integrated with the immersive aesthetic. Focus state adds a 1px black outline. ### Badges - **`badge`** — Cool-gray surface, charcoal text, uppercase caption. Used for category and feature labels. - **`badge-indigo`** — Brand indigo fill for premium feature tags and app-tier indicators. ### Navigation **`nav-bar`** — Cream background, charcoal nav-label text (13px / 600 / 0.13px tracking), 16px vertical padding. Sticky navigation transitions opacity on scroll (0.15s). The wordmark is a compact SVG (80px × 25px), positioned left of center with generous safe-zone padding above and below. ## Do's and Don'ts ### Do - Use Editorial New (`{typography.display-hero}`, `{typography.display}`, `{typography.body-large}`) only at display sizes — its identity depends on appearing at scale - Apply aggressive negative tracking to Editorial New (`-5.5px` at 110px, `-1px` to `-2px` at smaller display sizes) - Use `{rounded.pill}` on every button without exception — rectangular buttons break the ring-geometry language - Place cream text (`{colors.on-dark}`) rather than pure white on dark sections — temperature unity is the point - Allow 96–128px vertical gaps between major sections — compressing them destroys the luxury pacing - Use `{colors.primary}` only for primary interactive elements; preserve the cream palette for non-interactive contexts - Reference the warm accent palette (`{colors.accent-amber}`, `{colors.accent-olive}`) for health metric data visualizations only — keep them out of marketing surfaces - Disable `liga` and `dlig` OpenType features on both typefaces — Oura's typesetting runs clean ### Don't - Don't use Editorial New at body sizes (below 30px) — at small sizes its character changes to generic serif; it loses its editorial authority - Don't introduce additional accent colors beyond those in the CSS variable set — the palette is deliberately bounded by the health data vocabulary - Don't add heavy shadows to cards — color contrast (cream card on gray, charcoal card on black) is the elevation language; synthetic shadows compete - Don't round cards beyond `{rounded.xl}` (24px) — pill shapes are for interactive elements only; large rounded cards look accidental - Don't use AkkuratLL above weight 700 — the `font-weight` ceiling is 700, used only for 16px button labels and captions - Don't use pure white (`#ffffff`) as a primary canvas — the brand's warmth depends on the parchment `{colors.background}`; white reads as clinical - Don't center-align paragraph text — body copy is left-aligned throughout; centering is reserved for hero headlines - Don't apply letter-spacing tighter than -2px below 80px type — negative tracking at body sizes creates illegibility without the display payoff --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <400px | Minimum layout, single column, hero type reduces dramatically | | Mobile | 400–768px | Standard mobile; 1-column feature sections; nav collapses to hamburger | | Tablet | 768–896px | 2-column card grids begin; hero headline scale reduces | | Desktop Small | 896–1024px | Transitional desktop; some 2-column layouts become 3-column | | Desktop | 1024–1280px | Full layout; Editorial New display at maximum size | | Large Desktop | >1280px | Centered content with generous symmetric margins | ### Touch Targets - All pill buttons: 12px/24px padding creates adequate touch height (≥44px rendered) - Navigation links: 13px type with generous vertical padding in collapsed mobile menu - Carousel controls: circular buttons with minimum 44×44px hit area ### Collapsing Strategy - Editorial New display (`{typography.display-hero}`) scales from 110px → 64px → 40px across breakpoints - AkkuratLL section headings (`{typography.heading-section}`) scale from 80px → 48px → 32px - Feature grids: 3-column → 2-column → single column stacked - Navigation: horizontal links → icon-based hamburger drawer - Section padding collapses from 96px to 32px on mobile ### Image Behavior - Product photography (the Oura Ring) maintains aspect ratio; full-bleed on mobile - Lifestyle health imagery crops to portrait on narrow viewports - Radial gradient backgrounds on feature sections persist at all sizes; radius values scale proportionally - Hero images remain full-viewport-width at all breakpoints --- ## Agent Prompt Guide ### Quick Color Reference - Background (light): `{colors.background}` — warm parchment - Background (dark): `{colors.background-dark}` — pure black sections - Primary text: `{colors.ink}` on light, `{colors.on-dark}` on dark - Secondary text: `{colors.ink-secondary}` - Muted text: `{colors.ink-muted}` - Primary CTA: `{colors.primary}` (Oura Blue) - Border: `{colors.border}` - Focus ring: `{colors.ink}` 1px solid outline ### Example Component Prompts - "Create a hero section on `{colors.background-dark}` (pure black). Headline uses Editorial New at 110px, weight 300, line-height 1.1, letter-spacing -5.5px, color `{colors.on-dark}`. Below: a 40px Editorial New italic pull line at weight 100. Two pill CTAs side by side: 'Explore' uses `{colors.primary}` fill, white text, `{rounded.pill}`, 12px/24px padding, AkkuratLL 700 16px; 'Shop' uses `{colors.background}` fill, `{colors.ink-secondary}` text, same radius and padding." - "Design a feature card on `{colors.background}`. Background: `{colors.background}`. Radius: `{rounded.lg}`. Padding: 32px. Eyebrow: AkkuratLL 12px / 700 / uppercase / `{colors.ink-muted}`. Headline: AkkuratLL 40px / 300 / line-height 1.0 / `{colors.ink}`. Body: AkkuratLL 16px / 400 / line-height 1.5 / `{colors.ink-secondary}`. Bottom: one ghost link in `{colors.primary}`, 16px / 700." - "Build the Oura navigation bar. Background: `{colors.background}`. Height: 56px. Logo: centered SVG wordmark ~80px wide. Nav links: AkkuratLL 13px / 600 / letter-spacing 0.13px / `{colors.ink-secondary}`. Right side: 'Shop' pill button using `{colors.primary}` fill, white text, `{rounded.pill}`, 8px/16px padding." - "Create a health metric card for dark context. Background: `{colors.background-dark}`. Radius: `{rounded.xl}`. Padding: 24px. Score label: AkkuratLL 80px / 300 / line-height 1.0 / `{colors.on-dark}`. Below: metric name at 16px / 400 / `{colors.ink-muted}`. Bottom edge: a warm amber accent bar using `{colors.accent-amber}`." - "Design a newsletter email input on a dark section. Input: `{colors.surface-charcoal}` background, white text, AkkuratLL 16px / 400, radius `{rounded.lg}`, padding 8px 48px 8px 20px, no border in default state. Focus state: add 1px solid `{colors.ink}` outline. Submit button: attached pill using `{colors.primary}` fill, white text, AkkuratLL 700 16px, `{rounded.pill}`." ### Iteration Guide 1. Start on `{colors.background}` — every design session grounds in warm parchment, not white 2. Editorial New only for display text above 30px; AkkuratLL handles every UI element 3. All buttons are `{rounded.pill}` — never rectangular, never only mildly rounded 4. Apply `{colors.primary}` (Oura Blue) to exactly one CTA per section — preserve its weight 5. Dark sections use `{colors.background-dark}` with cream (`{colors.on-dark}`) text; never pure white 6. Section vertical gaps should be at least 64px, ideally 96–128px; resist the urge to compress 7. AkkuratLL uses OpenType `kern` on, everything else off — no auto-ligatures, no alternate numerals --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Oura. Brand names and trademarks belong to their respective owners.