# Ouraring · Design system migration spec

> Source: https://ouraring.com  ·  Curated by OpenDesign  ·  en

> Excellent example of premium product branding using restraint, high-quality photography, and refined typography to convey luxury without being ostentatious.

## 1. Identity DNA

The Oura Ring system is an architecture of restraint, where every pixel serves the product's quiet authority. Its design DNA treats the interface not as a storefront but as the polished surface of the ring itself—a luxury health device that blends seamlessly into daily life.

**One-liner:** Premium smart ring for health tracking with a refined, understated aesthetic.
**Keywords:** premium · health · wearable · minimalist · sophisticated
**Analogy:** A luxury health device that blends seamlessly into daily life.

## 2. Color

Color is used with clinical precision, a palette of warm, earthy neutrals providing a calm backdrop for the product. A single muted blue accent is reserved exclusively for interactive elements, creating a clear, intentional hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F7F1E8` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--bg-quiet` | `#4A4741` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#4A4741` | secondary text |
| `--muted` | `#A8A5A0` | placeholder |
| `--muted-soft` | `#838280` | weak hint |
| `--accent` | `#2A72DE` | single accent |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** Warm, earthy neutrals with a single clinical blue accent for interactive elements.

The principle is clear: warmth for atmosphere, blue for action, with neither ever competing for dominance.

## 3. Typography

The typographic voice pairs a refined transitional serif for display headlines with a humanist sans-serif for body text. This combination establishes an immediate tone of editorial sophistication and trusted clarity.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | -5.5px | Hero headlines |
| heading | 40px | 1.0 | 400 | -2px | Section headings |
| body | 16px | 1.5 | 400 | 0px | General text |

## 4. Spacing

A standard 4px base grid establishes the underlying pulse, but the system's premium feel emerges from the deliberate generosity of vertical spacing between elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base grid with generous vertical spacing for premium feel.

## 5. Surfaces

Surfaces are defined by depth through subtraction, not addition. Subtle inset shadows and fine, 1px borders in warm gray provide structure without visual weight, letting photography and typography command attention.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - 0 1px 0 rgba(255, 255, 255, 0.06) inset
- **Borders:** 1px solid #ECECEC as primary divider

## 6. Layout

The layout skeleton is a centered single column, creating a focused, editorial scroll. This core is punctuated by full-width cinematic hero sections and occasional side-by-side modals that break the rhythm without disrupting its calm.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column content with generous whitespace and occasional side-by-side modals.

## 7. Motion & Interaction

Motion philosophy is one of polishing, not performance. All transitions are smooth and restrained, using a consistent 0.15s cubic-bezier easing for micro-interactions that feel like a gentle, tactile response rather than a spectacle.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth fade transitions for state changes
  - Subtle color and opacity shifts on hover

- **Hover:** Smooth color and opacity transitions over 0.15s
- **Click:** Immediate state change with subtle feedback
- **Transition:** Global 0.15s cubic-bezier easing for all interactive properties
- **Keyboard:** Standard focusable elements with visible focus states

## 8. Voice & Don'ts

The voice is confident, elegant, and straightforward, using short, impactful headlines in lowercase or sentence case. It avoids aggressive sales language and jargon, favoring simple, action-oriented calls to action.

- **Tone:** Confident, elegant, and straightforward.
- **Headline style:** Short, impactful phrases using lowercase or sentence case.
- **CTA style:** Simple, action-oriented verbs like 'Explore' or 'Continue'.
- **Avoid:** Aggressive sales language / Jargon-heavy technical specs / Cluttered visual layouts / Loud, high-chroma color schemes

### Don'ts
- ❌ Don't use bright, neon, or aggressive accent colors — screenshot shows a single muted blue accent (#2A72DE) against warm neutrals.
- ❌ Don't use sharp, rectangular corners on primary buttons — screenshot shows fully rounded pill-shaped buttons (border-radius: 9999px).
- ❌ Don't use heavy, blocky sans-serif fonts for headlines — screenshot shows a refined serif font for display text (Editorial New).
- ❌ Don't overcrowd the interface with multiple competing visual elements — screenshot shows generous whitespace and minimal UI chrome.
- ❌ Don't use stark, pure black backgrounds as the default — screenshot shows a warm off-white background (#F7F1E8) or dark gray (#4A4741).
- ❌ Don't use small, cramped typography or tight line heights — screenshot shows large, legible type with generous spacing.

The system deliberately forgoes loud, high-chroma accents, cluttered layouts, and blocky typography to maintain its sophisticated, calm, and premium atmosphere.

## System Prompt (paste into AI tool)

```
A premium health wearable brand website combining refined serif typography with a warm, earthy neutral palette. The design emphasizes cinematic product photography, generous whitespace, and a minimalist interface. Key colors are warm off-white (#F7F1E8), deep charcoal (#4A4741), and a single muted blue accent (#2A72DE). The primary font category is transitional-serif for display and humanist-sans for body text. Critical don'ts: avoid loud neon accents, sharp rectangular buttons, blocky sans-serif headlines, and cluttered layouts. The overall feel should be sophisticated, calm, and premium, prioritizing product beauty over aggressive marketing.
```