Health & Wellness / iOS / Android / Web

Oura

Oura presents health data like a calm magazine, with parchment tones, light serif headlines and very little color.

Download
  • #F7F1E8
  • #4A4741
  • #1C1B1A
  • #EFE6DB
  • #A8A5A0
  • #2A72DE

Color

Every color token in the file, grouped by role.

Brand

  • primary#2A72DE
  • on primary#FFFFFF
  • ink secondary#5A5958

Surfaces

  • canvas#F7F1E8
  • surface#EFE6DB

Text

  • on panel#F7F1E8
  • ink#4A4741
  • ink faint#A8A5A0

More

  • panel#1C1B1A
  • stone#4A4741
  • store#F3F1F0

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Editorial NewEditorial New is private and not available in open fonts. Shown in Crimson Pro, the closest open match.
  • AkkuratLLAkkuratLL is private and not available in open fonts. Shown in Albert Sans, the closest open match.
  • display80px / 300 / 88px

    Oura

  • headline68px / 400 / 74.8px

    Oura

  • title40px / 300 / 50px

    Oura

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button16px / 700 / 24px

    Continue to checkout

  • caption14px / 700 / 21px

    Continue to checkout

Shape

Corner radius tokens.

  • none0px
  • radius 44px
  • radius 88px
  • radius 1212px
  • radius 2424px
  • full9999px

Spacing

The spacing scale, drawn to size.

  • space 88px
  • space 1212px
  • space 1616px
  • space 2424px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button stone
    button-stone
  • band dark
    band-dark
  • field dark
    field-dark
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 100 lines
version: alpha
name: Oura-design-analysis
description: "A health tracking app for a smart ring, presented like a magazine: warm parchment #f7f1e8, soft stone ink #4a4741, charcoal panels, condensed Editorial New headlines at light weight, and full pills."
status: Draft
appVersion: "measured in a browser from ouraring.com, 2026-11-01"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#2a72de"
  on-primary: "#ffffff"
  canvas: "#f7f1e8"
  surface: "#efe6db"
  panel: "#1c1b1a"
  on-panel: "#f7f1e8"
  stone: "#4a4741"
  ink: "#4a4741"
  ink-secondary: "#5a5958"
  ink-faint: "#a8a5a0"
  store: "#f3f1f0"

typography:
  # Font note: "Editorial New" is a private font and is not available in open fonts. Closest open alternative: "Crimson Pro".
  # Font note: "AkkuratLL" is a private font and is not available in open fonts. Closest open alternative: "Albert Sans".
  display:
    fontFamily: "'Editorial New', serif"
    fontSize: 80px
    fontWeight: 300
    lineHeight: 88px
    letterSpacing: -4px
  headline:
    fontFamily: "'Editorial New', serif"
    fontSize: 68px
    fontWeight: 400
    lineHeight: 74.8px
    letterSpacing: -2.04px
  title:
    fontFamily: "'Editorial New', serif"
    fontSize: 40px
    fontWeight: 300
    lineHeight: 50px
    letterSpacing: -1px
  body:
    fontFamily: "'AkkuratLL', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "'AkkuratLL', sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
  caption:
    fontFamily: "'AkkuratLL', sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 21px

rounded:
  none: 0px
  radius-4: 4px
  radius-8: 8px
  radius-12: 12px
  radius-24: 24px
  full: 9999px

spacing:
  space-8: 8px
  space-12: 12px
  space-16: 16px
  space-24: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    height: 48px
    padding: 12px 24px
  button-stone:
    backgroundColor: "{colors.stone}"
    textColor: "{colors.on-panel}"
    typography: "{typography.body}"
    rounded: "{rounded.full}"
    height: 44px
    padding: 16px 12px
  band-dark:
    backgroundColor: "{colors.panel}"
    textColor: "{colors.on-panel}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
  field-dark:
    backgroundColor: "{colors.stone}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.radius-12}"
    height: 40px
    padding: 8px 48px 8px 20px

Overview

Oura is a smart ring with a companion app on iOS and Android that tracks sleep, activity and readiness. Its public store and pages are warm and editorial. The app itself needs a ring and an account. [Measured]

What defines the look:

  1. Parchment page. #f7f1e8 replaces white, with #efe6db for sections. [Measured]
  2. Stone ink. #4a4741 carries headlines and text. [Measured]
  3. Light, tight serif. Editorial New 300 to 400 with tracking down to -4 at 80. [Measured]
  4. Full pills. Navigation and buttons are fully round. [Measured]
  5. One blue action. Shop Now is #2a72de, the main saturated color on the store. [Measured]

Source for this file: the ouraring.com home and ring store pages, measured in a browser at 1440 and 390 wide on 2026-11-01 with a dark color scheme pass. A third page tried returned a not found page and was left out of the values. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Page#f7f1e8home [Measured]
Section#efe6dbhome [Measured]
Store page#f3f1f0ring store [Measured]
Ink#4a4741, #5a5958, faint #a8a5a0text steps [Measured]
Dark panel#1c1b1a, footer #202020sections [Measured]
Action#2a72de, white textShop Now [Measured]

Typography

RoleDesktopMobileFace and weight
Store title128 on 128not measuredEditorial New 400 [Measured]
Hero80 on 8848 on 52.8Editorial New 300, tracking -4 and -2.4 [Measured]
Headline68 on 74.856 on 61.6Editorial New 400, tracking -2.04 [Measured]
Product name60 on 60not measuredAkkurat 300 [Measured]
Title40 on 50not measuredEditorial New 300 [Measured]
Body16 on 24sameAkkurat 400 [Measured]
Caption14 on 21sameAkkurat 700 [Measured]

Shape and spacing

Navigation and buttons full, fields 12, and dark sections are square full width bands. Radii of 4 to 24 appear on smaller parts. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light on the web. The dark pass changed nothing. Dark areas are sections. [Measured]

Platform: iOS

How the Oura app looks and behaves was not captured. Tokens a website ships are evidence for the web only, so every item below is inferred. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

Not measured. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the warm neutrals and rounded controls with the web. [Inferred]

Platform: Android

How the Oura app looks and behaves was not captured. Tokens a website ships are evidence for the web only, so every item below is inferred. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

Not measured. [Inferred]

Main action

Expected on Android: Floating action button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the warm neutrals and rounded controls with the web. [Inferred]

Platform: Web

The home and ring store pages, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

Pill text buttons 48 high (Shop, Your Health, Why Oura), and a Menu pill 40 high with a thin stone border at the mobile width. [Measured]

Main action

Expected on Web: Page-level button.

Shop Now is a #2a72de pill with white bold 16px text, 48 high with 12 by 24 padding. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Round icon buttons 44 high in stone or parchment. An email field is 40 high at 12 radius on stone. [Measured]

Text sizing

Expected on Web: Browser zoom.

Fixed pixels that step down at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 44 to 54 high. The Menu pill is 40. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

The app is expected to need a ring and an account. Other rules were not checked. [Inferred]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

Mobile headlines stay very large, keeping the magazine feel. [Measured]

Cross-platform consistency

Consistent across platforms: the warm neutrals and rounded controls. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use parchment instead of white.
  • Set big headlines light and tight.
  • Keep color for one action.
  • Round controls fully.

Don't

  • Don't use pure black text.
  • Don't set the display serif bold.
  • Don't use several accent colors.

Known Gaps

  • The Oura app, including its readiness rings, charts and dark screens, was not measured. It needs a ring and an account, so the app's look may differ a lot from these pages.
  • The iOS and Android apps were not captured, so every mobile topic is inferred.
  • Icons, motion and dialogs were not measured.
  • AkkuratLL is private. Albert Sans is within 1 percent at 40px. Editorial New is private and much narrower than any candidate. Crimson Pro is the closest but still 6 percent wider, so this is the weakest match in the file, and Crimson Pro at a tighter tracking is advised.
  • Account deletion and store sign-in rules were not verified.