---
title: "Oura Ring design system"
variant: extended
source: https://ouraring.com/
captured_at: 2026-10-12
theme: light
industry: health
generator: Design DNA (https://four.wiralomi.com/style/ouraring-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Oura Ring · Design System

> Warm editorial calm, grounded in everyday health

**Theme:** light · **Industry:** health · **Source:** https://ouraring.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Oura pairs refined editorial typography and warm, quiet surfaces with intimate imagery of the ring in everyday life. The long-form homepage moves from a spacious product hero to health features, member stories, news, and a dense, dark footer.

## North star

Balance warm editorial restraint with vivid, human product imagery, using color sparingly to direct attention.

## Overview

The visual identity is built around a warm ivory canvas (#f7f1e8) and expansive, pale photographic fields, with near-black and charcoal reserved for contrast and a single bright blue (#2a72de) marking the primary Shop Now action. Editorial New gives the hero and key statements a graceful, high-contrast serif voice; AkkuratLL handles navigation, body copy, and controls with restrained clarity. The opening composition sets concise copy on the left against a large human-and-ring photograph on the right. Further down, centered statements and image-led feature cards alternate with app-screen showcases, testimonials, and a dark news band. Sections feel generous rather than tightly packed, with rounded pill buttons and softly rounded cards. Photography is central to the storytelling; interface mockups introduce darker colors but do not redefine the brand palette. The footer becomes denser and darker, creating a clear visual endpoint.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Oat Canvas | `#f7f1e8` | `--color-oat-canvas` | brand | Warm page canvas and pale text on dark sections; the defining background tone across the editorial content. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Navigation and footer surface areas, plus selected controls and light interface backgrounds. |
| True Ink | `#000000` | `--color-true-ink` | neutral | Headings, body copy, links, and dark image overlays; provides the strongest text contrast. |
| Warm Graphite | `#4a4741` | `--color-warm-graphite` | neutral | Navigation and muted copy, plus dark filled secondary buttons with pale text. |
| Linen Sand | `#eee6dc` | `--color-linen-sand` | surface | Soft card and section surface; also appears in measured image-to-transparent gradients. |
| Midnight Cocoa | `#1c1b1a` | `--color-midnight-cocoa` | surface | Inverse section background, most visibly the dark news and editorial band. |
| Graphite Rule | `#30302f` | `--color-graphite-rule` | semantic | Measured hairline and border color; use for subtle structural separators rather than prominent outlines. |
| Ash Gray | `#a8a5a0` | `--color-ash-gray` | neutral | Low-emphasis footer and heading text, not a defining surface color. |
| Signal Blue | `#2a72de` | `--color-signal-blue` | accent | Primary Shop Now button accent; keep it scarce against the warm neutral palette. |
| Slate Charcoal | `#34383b` | `--color-slate-charcoal` | neutral | Minor footer border detail; secondary to the warmer charcoal colors. |
| Soft Pewter | `#d2d1cf` | `--color-soft-pewter` | neutral | Subtle navigation and miscellaneous separator detail, not a major brand surface. |

### Semantic aliases

`--color-canvas` → `#f7f1e8` (Oat Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#1c1b1a` (Midnight Cocoa) · `--color-surface-3` → `#eee6dc` (Linen Sand) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#f7f1e8` (Oat Canvas) · `--color-text-subtle` → `#4a4741` (Warm Graphite) · `--color-border` → `#30302f` (Graphite Rule) · `--color-accent` → `#2a72de` (Signal Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f7f1e8` | 18.7:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#1c1b1a` | 1.22:1 | fail |
| `#000000` | `#eee6dc` | 16.99:1 | AAA |
| `#f7f1e8` | `#ffffff` | 1.12:1 | fail |
| `#f7f1e8` | `#1c1b1a` | 15.32:1 | AAA |
| `#f7f1e8` | `#eee6dc` | 1.1:1 | fail |
| `#4a4741` | `#f7f1e8` | 8.24:1 | AAA |
| `#4a4741` | `#ffffff` | 9.26:1 | AAA |
| `#4a4741` | `#1c1b1a` | 1.86:1 | fail |

### Gradients

- `linear-gradient(in oklab, rgba(0, 0, 0, 0) 0px, rgb(0, 0, 0) 100%)`
- `linear-gradient(in oklab, rgb(238, 230, 220) 45%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| AkkuratLL | `--font-body` | webfont | 400, 300, 700 | Navigation, body copy, captions, buttons, and most interface text. | Inter |
| Editorial New | `--font-display` | webfont | 100, 400, 300 | Display statements and large editorial headings, including the hero title. | Cormorant Garamond |

- **AkkuratLL:** Use a clean sans-serif voice with measured regular, light, and bold weights; keep case natural and tracking unembellished.
- **Editorial New:** Use a refined serif with light-to-regular weights; prominent display lines have tight tracking and remain in sentence case.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 300 | 1.1 | -0.05em | — | Editorial New | Large editorial statements and high-impact promotional copy. |
| h1 | 68px | 400 | 1.1 | -0.03em | — | Editorial New | Hero headline, set as a prominent serif statement. |
| h2 | 56px | 400 | 1.1 | 0 | — | Editorial New | Major section headlines, often centered. |
| h3 | 40px | 300 | 1 | 0 | — | AkkuratLL | Feature or content headings in the sans-serif family. |
| h4 | 24px | 100 | 1.25 | 0 | — | Editorial New | Supporting editorial subheadings. |
| body | 16px | 400 | 1.5 | 0 | — | AkkuratLL | Descriptions, narrative copy, and testimonial text. |
| caption | 14px | 400 | 1.5 | 0 | — | AkkuratLL | Small labels, metadata, and supporting notes. |
| button | 16px | 400 | 1.5 | 0 | — | AkkuratLL | Primary and secondary pill-shaped action labels. |
| nav | 16px | 400 | 1.5 | 0 | — | AkkuratLL | Header navigation and footer link groups. |
| link | 16px | 400 | 1.5 | 0 | — | AkkuratLL | Inline links and article or utility destinations. |

OpenType features in use: `"dlig" 0, "kern", "liga" 0, "onum" 0, "ss01" 0, "tnum" 0`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80 px.
- Section rhythm 80px · element gap 8px · card padding 40px · max content width 1312px.

A wide desktop canvas with a measured maximum content width of 1312px and comfortable section spacing. The hero uses left-aligned copy beside a large right-side photograph; later blocks alternate centered statements, horizontally arranged feature cards, broad product imagery, testimonials, and a split feature. The news section reverses to a dark band with a large lead story and a column of smaller stories. Maintain generous breathing room between major blocks while allowing card rows and footer navigation to become denser.

## Shape & elevation

- Radius: button `50%` · input `12px` · card `8px` · media `50%` · nav `50%` · xs `4px` · sm `6px` · md `8px` · lg `12px` · xl `24px` · pill `9999px`
- Shadow `inset` (input): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.06) 0px 1px 0px 0px inset`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat, with large color fields and imagery establishing hierarchy rather than shadows. Cards have softly rounded corners and restrained separation from their backgrounds. Use fine measured hairlines sparingly for dividers; avoid strong elevation, heavy borders, or layered dashboard-like panels outside the app mockups.

## Imagery

Use warm, naturalistic photography as the primary storytelling device: close views of people wearing or handling the ring, framed with generous negative space for copy. The opening image is a large, human-centered crop rather than a floating product render. Feature cards use cinematic, darker lifestyle imagery; app screens and phone mockups appear as supporting product evidence. Keep interface imagery distinct from the site’s core palette.

## Components

### Announcement strip

A narrow muted green-tinted banner above the navigation promotes HSA/FSA use, with compact centered text.

### Primary action

The Shop Now control is a bright blue pill with white bold AkkuratLL text; it is the page’s most vivid interface accent.

### Secondary pill button

Why Oura and related actions use warm graphite fills with pale text; Read More may invert to a pale fill with dark text.

### Lifestyle feature cards

Rounded image cards combine darkened photography, compact category labels, and text overlaid near the lower edge.

### Member quote cards

Pale neutral cards hold short health stories, small category labels, and member names or portraits.

### News story layout

A dark editorial band pairs one large photographic lead story with a vertical stack of pale article cards.

### Newsletter footer

The dark footer combines a serif invitation, email input, payment marks, and grouped company, support, and social links.

### Measured component styles

- **Primary button** (“Shop Now”): background #2a72de · text #ffffff · radius 3.35544e+07px · padding 12px 24px · 700 16px AkkuratLL
- **Secondary button** (“Why Oura”): background #4a4741 · text #f7f1e8 · radius 3.35544e+07px · padding 12px 24px · 400 16px AkkuratLL
- **Link** (“Skip Navigation to Main Content”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px AkkuratLL
- **Input**: background #4a4741 · text #ffffff · radius 12px · padding 8px 48px 8px 20px · 400 16px AkkuratLL · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“HEART HEALTH My cardiologist told me, 'I”): background #efe6db · text #000000 · radius 8px · padding 40px · 400 16px AkkuratLL
- **Navigation item** (“Shop Your Health Why Oura For Organizati”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px AkkuratLL

## Do

- Use warm ivory as the primary editorial canvas.
- Pair serif display headlines with clean sans-serif interface text.
- Let lifestyle photography occupy substantial visual space.
- Keep the primary blue accent limited to key actions.
- Use rounded pills for prominent action controls.
- Create a clear contrast shift for the dark news and footer areas.

## Don't

- Do not make blue the dominant page color.
- Do not substitute generic gradients for the warm, photographic hero.
- Do not crowd the hero with dense supporting copy.
- Do not use heavy shadows to separate ordinary cards.
- Do not style every section as a dashboard or app interface.
- Do not introduce loud borders or overly sharp card geometry.

## Agent prompt

Build a new Oura-style health landing page with a warm, editorial feel. Use Oat Canvas (#f7f1e8) as the main surface, Gallery White (#ffffff) for clean areas, and True Ink (#000000) or Warm Graphite (#4a4741) for readable text. Reserve Signal Blue (#2a72de) for the primary action. Set large statements in a refined serif similar to Editorial New, and use a restrained sans-serif like AkkuratLL for navigation, body copy, and controls. Compose a spacious, left-copy/right-photography hero, then alternate centered health messaging, rounded lifestyle feature cards, app imagery, testimonials, and a dark news band in Midnight Cocoa (#1c1b1a). Keep borders and shadows minimal. End with a dense, dark footer containing newsletter signup and grouped links.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Long-form homepage canvas beginning with announcement and navigation, then hero and alternating full-width editorial sections. | Primary shop action, Feature discovery, Membership exploration, Editorial article links | Split photographic hero, Centered section statements, Image-led card rows, Dark news band |
| 2 | footer | Dark, multi-column footer with newsletter content, grouped navigation links, payment marks, and a compact legal row. | Email signup, Grouped site navigation, Payment reassurance, Language and legal links | Serif newsletter heading, Email input, Payment logo row, Low-contrast footer dividers |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/ouraring-com