--- 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 | Role | Value | Where | |------|-------|-------| | Page | `#f7f1e8` | home [Measured] | | Section | `#efe6db` | home [Measured] | | Store page | `#f3f1f0` | ring store [Measured] | | Ink | `#4a4741`, `#5a5958`, faint `#a8a5a0` | text steps [Measured] | | Dark panel | `#1c1b1a`, footer `#202020` | sections [Measured] | | Action | `#2a72de`, white text | Shop Now [Measured] | ### Typography | Role | Desktop | Mobile | Face and weight | |------|---------|--------|-----------------| | Store title | 128 on 128 | not measured | Editorial New 400 [Measured] | | Hero | 80 on 88 | 48 on 52.8 | Editorial New 300, tracking -4 and -2.4 [Measured] | | Headline | 68 on 74.8 | 56 on 61.6 | Editorial New 400, tracking -2.04 [Measured] | | Product name | 60 on 60 | not measured | Akkurat 300 [Measured] | | Title | 40 on 50 | not measured | Editorial New 300 [Measured] | | Body | 16 on 24 | same | Akkurat 400 [Measured] | | Caption | 14 on 21 | same | Akkurat 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.