Oura Ring

Overview

Oura Ring is a premium health-tracking wearable that transforms complex biometric data into elegant, personal insights. The brand serves health-conscious individuals who value precision, privacy, and refined aesthetics—users who see their ring as both a powerful health tool and a beautiful accessory. The design language is 'Refined Minimalism': a sophisticated aesthetic that combines natural material palettes (warm golds, brushed silvers, deep blacks), generous whitespace, and restrained typography to create an interface that feels premium yet approachable. The emotional response is one of calm clarity—the UI never overwhelms; instead, it invites users to understand their health with quiet confidence. Voice: precise, grounded, never hyperbolic. Oura speaks with the authority of science but the warmth of a trusted advisor. Example: 'Your readiness score is 72—you're well-recovered and ready for a challenging workout.'

Colors

The Oura color system is anchored by a sophisticated primary blue (#2a72de) used exclusively for interactive elements—buttons, links, and focus states—creating a clear visual hierarchy that guides users toward action without visual noise. This primary is paired with a warm tertiary accent (#af751b, a refined gold) that appears in premium product imagery and highlights, evoking the luxury materials of the ring itself. The surface stack uses a cool-neutral palette: bright whites (#ffffff) for primary surfaces, soft grays (#f8f8f8, #e9e9e9) for secondary containers, and deeper grays (#d8d8d8, #c7c5c7) for tertiary layers, creating visual depth through subtle contrast rather than dramatic shadows. The inverse surface (#0c0c14, near-black) is reserved for dark-mode contexts and overlay backgrou

Typography

The Oura type system balances editorial elegance with functional clarity. Display and headline levels use 'Editorial New'—a light-weight serif font (300–200 weight) that conveys premium editorial authority and appears in hero sections and major page titles (e.g., 'Fühle dich verstanden' at 71px, 300 weight, -0.02em letter-spacing). Body and label text uses 'AkkuratLL', a geometric sans-serif (400 weight for body, 600 for labels) that ensures legibility at small sizes and creates a modern, technical counterpoint to the editorial headlines. The hierarchy is strict: display (71px, 300 weight) for hero statements; headline-lg (40px, 400 weight) for section titles; body-lg (18px, 400 weight) for descriptive text; label-md (14px, 600 weight) for buttons and interactive labels. Small labels (12px

Layout

Oura uses a 12-column fluid grid with a max-width of 1280px, allowing content to breathe on desktop while remaining responsive on mobile. The spacing scale is semantic: 'lg' (40px) separates major sections (hero to feature blocks); 'md' (24px) is the default padding inside cards and containers; 'sm' (12px) is used for internal component spacing (button padding, list item margins). The gutter (24px) is applied consistently to left/right margins on all major containers, creating a consistent rhythm. White-space is treated as a design element—sections are separated by 40–64px of vertical space, never cramped. Container max-width is 1280px, with a 24px gutter on each side, leaving 1232px for content. On mobile (< 768px), the gutter reduces to 16px and the grid collapses to 4 columns, maintaini

Elevation & Depth

Oura's elevation system is subtle and restrained, using soft shadows and minimal layering to create depth without visual heaviness. Level 1 (Base): no shadow; flat surfaces like the page background (#ffffff) or surface-container (#e2e2e2). Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, dropdowns, and modals. This shadow is soft and spread, creating a gentle lift without drama. Level 3 (Elevated/Overlay): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used for floating action buttons, top-level modals, and sticky headers. The inverse-surface overlay (#0c0c14

Shapes

Oura's shape philosophy is 'Soft-Technical': rounded corners are used strategically to soften the geometric precision of health data while maintaining a modern, functional feel. Buttons use full rounding (border-radius: 9999px) to create pill-shaped CTAs that feel inviting and clickable. Cards and containers use moderate rounding (12px / 0.75rem) to suggest approachability without appearing playful. Input fields use 12px rounding to match cards, creating visual cohesion. Dropdowns and select panels use 4px rounding (0.25rem) for a more technical, data-focused appearance. The rationale: full ro

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses {colors.primary} (#2a72de) with white text, 12px vertical padding, 16px horizontal padding, and full rounding (9999px). On hover, the background darkens to #1f5ab8 with a 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) transition. The inverse button (used on dark backgrounds) uses white (#ffffff) background with dark text (#0c0c14), darkening to #e5e5e9 on hover. Secondary buttons are transparent with a 1px border at {colors.primary}, allowing the button to blend into light backgrounds while remaining clickable. All buttons have a minimum height of 48px to meet accessibility touch-target guidelines.

Containers & Surfaces Cards use {colors.surface-container-lowest} (#f0f5f7) as the base background with 24px

Do's and Don'ts

**Do**

• Do use the primary blue (#2a72de) exclusively for interactive elements—buttons, links, focus states—to create a clear visual hierarchy and guide user attention.
• Do apply generous whitespace (40–64px between sections) to create a calm, premium feel that reflects the brand's refined minimalism.
• Do use Editorial New (300 weight) for hero headlines and display text to convey editorial authority and premium positioning.
• Do maintain a 7:1 contrast ratio minimum on all text-to-background combinations to ensure accessibility and legibility in health-data contexts.
• Do use the full-rounding pill shape (9999px) exclusively on buttons to signal 'tap here' and create visual consistency across all interactive elements.

**Don't**

• Don't use the tertiary gold (#af751b) as a primary interactive color—reserve it for premium product imagery and highlights only.
• Don't apply heavy shadows (> 0.2 opacity) or dramatic depth effects; Oura's aesthetic is refined and restrained, not theatrical.
• Don't mix Editorial New and AkkuratLL at the same size or weight; maintain clear visual hierarchy by using Editorial New only for display/headline levels.
• Don't use pure black (#000000) or pure white (#ffffff) as primary text or background colors—use the defined surface and on-surface tokens instead to maintain the sophisticated palette.
• Don't apply rounding > 12px to cards or containers; full rounding is reserved for buttons and pills to maintain functional clarity.