Claude Code
Cursor
Codex
GitHub Copilot
GrammarlyBrand
DESIGN.md · measured October 21, 2026
Oura Ring design system
Light interface measured from ouraring.com: Editorial New type with AkkuratLL, blue accents, tonal surfaces and 8px corners.
- Background
- #F7F1E8
- Primary
- #2A72DE
- Type
- Editorial New
- Corners
- 8px
From ouraring.com ↗ · 236 elements at 1440×900 and 903×1955 · Independent analysis, not affiliated with Oura Ring
Oura Ring colors
13 roles measured on the page, grouped by where each color is used.
Surfaces
Warm Mist
#F7F1E8backgroundPage background · 6×White
#FFFFFFsurface-container-low · --color-whiteRaised areas one step from the page · 1×Text
Near Black
#000000on-surfacePrimary text and headings · 12×Warm Graphite
#4A4741on-surface-variant · --color-sandstone-500Secondary text · 15×Warm Gray
#A8A5A0on-surface-mutedMuted text and metadata · 13×White
#FFFFFFon-primaryText and icons on primaryAccents
Blue
#2A72DEprimaryPrimary buttons and calls to action · 5×Dark Blue
#253B80secondaryAccent · 3×Borders
Warm Graphite 25%
#4A474140outlineBorders and dividers · 1×White
#FFFFFFoutline-variant · --color-whiteSecondary dividers · 1×Status
Green
#34A853successSuccess and positive states · 1×Vivid Amber
#FBBC04warningWarnings and highlights · 1×Vivid Red
#EA4335errorErrors and destructive states · 1×Oura Ring fonts
2 families.
AaEditorial NewWeights 300, 400Editorial New, serif
AaAkkuratLLWeights 300, 400, 600, 700AkkuratLL, sans-serif
headline-displayPage title (h1)Oura Ring80px · 300 · 1.1 · -0.05em
mobile 48px
mobile 48px
headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog68px · 400 · 1.1 · -0.03em
headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog40px · 300 · 1
headline-smCard and feature titlesThe quick brown fox jumps over the lazy dog24px · 400 · 1.25
mobile 12px
mobile 12px
title-lgSmall titlesThe quick brown fox jumps over the lazy dog20px · 700 · 1.5
body-mdBody textThe quick brown fox jumps over the lazy dog14px · 400 · 1.5
body-smSecondary and small textThe quick brown fox jumps over the lazy dog12px · 400 · 1.33
label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog16px · 400 · 1.5
label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog14px · 700 · 1.5
label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog13px · 600 · 1.2 · 0.01em
Contrast
Text on #F7F1E8
AaAAA
18.7:1AaAAA
8.2:1AaLarge only
2.2:1Spacing
4px grid · 95% of values fit
xs4pxsm8pxmd12pxlg24pxxl48pxgutter8pxsection80pxmargin32pxBreakpoints: 320px 419px 420px 768px 1024px 1280px 1440px 1568px 1920px 1999px 2000px
Shapes
Corner radii, most used first.
sm8px · 16×
lg90px · 12×
md12px · 4×
Depth
Inset
Components
Rebuilt from the measured CSS.
Shop Now
Why Oura
Manage
Shop
Input text
Card
Inline link
Motion
Interface transitions
0.15s0.3s0.2s0.5scubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0, 0, 0.2, 1)
Do’s and don’ts
Rules written from the measurements, so a coding agent stays on style.
- Use #F7F1E8 for the page and lift surfaces in small steps: #FFFFFF.
- Keep text in 3 levels: #000000, #4A4741, #A8A5A0.
- Reserve #2A72DE for primary actions and key highlights.
- Set headlines in Editorial New with tight tracking (-0.05em).
- Keep spacing on the 4px grid.
- Use 8px corners on most elements; larger surfaces also use 90px and 12px.
- Use #A8A5A0 for body text; it reaches 2.2:1 on #F7F1E8. Keep it for large text or metadata.
- Add drop shadows for depth; use hairline rings and tonal surfaces.
- Introduce new font families beyond Editorial New and AkkuratLL.
- Use #2A72DE for large backgrounds or body text.
- Make interface transitions slower than 0.5s.
DESIGN.md247 lines
---
version: alpha
name: Oura Ring
description: "Light interface measured from ouraring.com: Editorial New type with AkkuratLL, blue accents, tonal surfaces and 8px corners."
colors:
background: "#F7F1E8"
surface: "#F7F1E8"
on-surface: "#000000"
on-background: "#000000"
on-surface-variant: "#4A4741"
on-surface-muted: "#A8A5A0"
surface-container-low: "#FFFFFF"
outline: "#4A474140"
outline-variant: "#FFFFFF"
primary: "#2A72DE"
on-primary: "#FFFFFF"
secondary: "#253B80"
success: "#34A853"
warning: "#FBBC04"
error: "#EA4335"
typography:
headline-display:
fontFamily: Editorial New
fontSize: 80px
fontWeight: 300
lineHeight: 1.1
letterSpacing: -0.05em
headline-lg:
fontFamily: Editorial New
fontSize: 68px
fontWeight: 400
lineHeight: 1.1
letterSpacing: -0.03em
headline-md:
fontFamily: AkkuratLL
fontSize: 40px
fontWeight: 300
lineHeight: 1
headline-sm:
fontFamily: AkkuratLL
fontSize: 24px
fontWeight: 400
lineHeight: 1.25
title-lg:
fontFamily: AkkuratLL
fontSize: 20px
fontWeight: 700
lineHeight: 1.5
body-md:
fontFamily: AkkuratLL
fontSize: 14px
fontWeight: 400
lineHeight: 1.5
body-sm:
fontFamily: AkkuratLL
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
label-lg:
fontFamily: AkkuratLL
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
label-md:
fontFamily: AkkuratLL
fontSize: 14px
fontWeight: 700
lineHeight: 1.5
label-sm:
fontFamily: AkkuratLL
fontSize: 13px
fontWeight: 600
lineHeight: 1.2
letterSpacing: 0.01em
headline-display-mobile:
fontFamily: Editorial New
fontSize: 48px
fontWeight: 300
lineHeight: 1.1
letterSpacing: -0.05em
headline-sm-mobile:
fontFamily: AkkuratLL
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
rounded:
sm: 8px
md: 12px
lg: 90px
spacing:
base: 4px
xs: 4px
sm: 8px
md: 12px
lg: 24px
xl: 48px
gutter: 8px
section: 80px
margin: 32px
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
typography: "{typography.label-lg}"
padding: 12px 24px
height: 48px
button-primary-hover:
backgroundColor: "#2056A6"
button-secondary:
backgroundColor: "{colors.on-surface-variant}"
textColor: "{colors.background}"
typography: "{typography.label-lg}"
padding: 12px 24px
height: 48px
button-secondary-hover:
backgroundColor: "#1C1B1A"
button-outline:
backgroundColor: "{colors.surface-container-low}"
textColor: "{colors.on-surface-variant}"
typography: "{typography.label-sm}"
rounded: "{rounded.lg}"
padding: 12px 16px
height: 42px
button-ghost:
textColor: "{colors.on-surface}"
typography: "{typography.label-lg}"
padding: 12px 24px
input-field:
backgroundColor: "{colors.on-surface-variant}"
textColor: "{colors.on-primary}"
typography: "{typography.label-lg}"
rounded: "{rounded.md}"
padding: 8px 48px 8px 20px
card:
backgroundColor: "{colors.background}"
textColor: "{colors.on-surface}"
typography: "{typography.label-lg}"
rounded: "{rounded.sm}"
padding: 24px
link:
textColor: "{colors.background}"
---
# Oura Ring Design System
## Overview
Oura Ring describes itself as: “Enhance your health journey with Oura. The Oura Ring provides round-the-clock insights into sleep, fitness, and stress for wellness. Now HSA/FSA eligible.” The interface is light, built on **Warm Mist (#F7F1E8)** with **Near Black (#000000)** text, and **Blue (#2A72DE)** as the main accent.
Type is set in **Editorial New** and **AkkuratLL**. Headlines run large with tight negative tracking; body text is 14px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 8px.
Measured from [ouraring.com](https://ouraring.com/) on October 21, 2026 at 1440×900 and 903×1955 from 236 rendered elements. Values are computed styles from the live page, not the original source files.
## Colors
The palette has 13 roles.
- **Warm Mist (#F7F1E8):** Page background, seen 6 times. Token `background`.
- **Near Black (#000000):** Primary text and headings, seen 12 times. Token `on-surface`.
- **Warm Graphite (#4A4741):** Secondary text, seen 15 times. Token `on-surface-variant`, CSS `--color-sandstone-500`.
- **Warm Gray (#A8A5A0):** Muted text and metadata, seen 13 times. Token `on-surface-muted`.
- **White (#FFFFFF):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`, CSS `--color-white`.
- **Warm Graphite 25% (#4A474140):** Borders and dividers, seen 1 time. Token `outline`.
- **White (#FFFFFF):** Secondary dividers, seen 1 time. Token `outline-variant`, CSS `--color-white`.
- **Blue (#2A72DE):** Primary buttons and calls to action, seen 5 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Dark Blue (#253B80):** Accent, seen 3 times. Token `secondary`.
- **Green (#34A853):** Success and positive states, seen 1 time. Token `success`.
- **Vivid Amber (#FBBC04):** Warnings and highlights, seen 1 time. Token `warning`.
- **Vivid Red (#EA4335):** Errors and destructive states, seen 1 time. Token `error`.
## Typography
**Editorial New** and **AkkuratLL** share the interface. Fallback stack: `Editorial New, serif`.
- **headline-display:** Editorial New 80px at weight 300, line height 1.1, tracking -0.05em (48px on mobile). Page title (h1).
- **headline-lg:** Editorial New 68px at weight 400, line height 1.1, tracking -0.03em. Section headings (h2).
- **headline-md:** AkkuratLL 40px at weight 300, line height 1. Sub-section headings.
- **headline-sm:** AkkuratLL 24px at weight 400, line height 1.25 (12px on mobile). Card and feature titles.
- **title-lg:** AkkuratLL 20px at weight 700, line height 1.5. Small titles.
- **body-md:** AkkuratLL 14px at weight 400, line height 1.5. Body text.
- **body-sm:** AkkuratLL 12px at weight 400, line height 1.33. Secondary and small text.
- **label-lg:** AkkuratLL 16px at weight 400, line height 1.5. Large buttons and tabs.
- **label-md:** AkkuratLL 14px at weight 700, line height 1.5. Buttons, navigation and labels.
- **label-sm:** AkkuratLL 13px at weight 600, line height 1.2, tracking 0.01em. Small labels and badges.
## Layout
Spacing follows a 4px grid: 95% of measured gaps and paddings are multiples of 4px.
- **Scale:** xs 4px, sm 8px, md 12px, lg 24px, xl 48px.
- **Sections:** 80px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Page margin:** 32px on each side of full-width sections.
- **Breakpoints:** 320px, 419px, 420px, 768px, 1024px, 1280px, 1440px, 1568px, 1920px, 1999px, 2000px.
## Elevation & Depth
The design avoids drop shadows. Layers are separated by tonal surface steps (#FFFFFF) and hairline rings:
- `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`
## Shapes
Most elements use 8px corners. Measured radii, most used first:
- **sm (8px):** 16 elements.
- **lg (90px):** 12 elements.
- **md (12px):** 4 elements.
## Components
Measured from the rendered page. Token values reference the tokens above.
- **button-primary (“Shop Now”):** #2A72DE fill, #FFFFFF text, 16px/700, 3.35544e+07px radius, padding 12px 24px.
- **button-primary-hover:** background #2056A6, text #FFFFFF on hover.
- **button-secondary (“Why Oura”):** #4A4741 fill, #F7F1E8 text, 16px/400, 3.35544e+07px radius, padding 12px 24px.
- **button-secondary-hover:** background #1C1B1A, text #F7F1E8 on hover.
- **button-outline (“Manage”):** #FFFFFF fill, #4A4741 text, 13.008px/600, 90px radius, padding 12px 16px, border 1px solid #4A4741.
- **button-ghost (“Shop”):** transparent fill, #000000 text, 16px/400, 3.35544e+07px radius, padding 12px 24px.
- **input-field:** #4A4741 fill, #FFFFFF text, 16px/400, 12px radius, padding 8px 48px 8px 20px, shadow `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`.
- **card:** #F7F1E8 fill, #000000 text, 16px/400, 8px radius, padding 24px.
- **link:** transparent fill, #F7F1E8 text, padding 0px.
## Do's and Don'ts
- Do use #F7F1E8 for the page and lift surfaces in small steps: #FFFFFF.
- Do keep text in 3 levels: #000000, #4A4741, #A8A5A0.
- Do reserve #2A72DE for primary actions and key highlights.
- Do set headlines in Editorial New with tight tracking (-0.05em).
- Do keep spacing on the 4px grid.
- Do use 8px corners on most elements; larger surfaces also use 90px and 12px.
- Don't use #A8A5A0 for body text; it reaches 2.2:1 on #F7F1E8. Keep it for large text or metadata.
- Don't add drop shadows for depth; use hairline rings and tonal surfaces.
- Don't introduce new font families beyond Editorial New and AkkuratLL.
- Don't use #2A72DE for large backgrounds or body text.
- Don't make interface transitions slower than 0.5s.
## Motion
Interface transitions are quick: 0.15s, 0.3s, 0.2s, 0.5s. Longer ambient animations run 0.7s.
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `cubic-bezier(0, 0, 0.2, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.
Generated by [Sitepeel](https://sitepeel.dev/design-md/ouraring.com/), the free DESIGN.md generator.
What you can build with it
Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.
Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.
Build a landing page for my product. Follow for every color, font, spacing value, corner and button.
Need more than one page?
Design MD in the Sitepeel tools for Chrome measures pages behind a login, combines several pages into one file and works on any site you open.
More designs
See all →
FAQ
Questions
What can I build with the Oura Ring DESIGN.md?
Any page or component in this style: a landing page, pricing table, dashboard or sign-up form. Your AI coding agent uses the measured colors, Editorial New type, spacing, corners and buttons instead of its own defaults.
How do I use it with Claude Code or Cursor?
Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.
Is this Oura Ring’s official design system?
No. Sitepeel measured it from ouraring.com’s public page on October 21, 2026. It is an independent analysis, not made or approved by Oura Ring.
Can I use Oura Ring’s style in my own product?
Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Oura Ring’s logo, name, pictures or text.
How accurate are the values?
Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.