Design System Inspiration of Oura
1. Visual Theme & Atmosphere
Oura makes the Oura Ring, a smart ring for sleep, activity and health. Its about page begins: "Who
we are starts with where we're from: Finland", and says its mission "is to make health a daily
practice". The company behind the site is Oura Health Oy, Elektroniikkatie 10, Oulu. In a note to
its community, the CEO writes that Oura has "grown from a startup in Oulu into a global health
technology company, with members in more than 150 countries", and announces a project to
redomicile the company to the United States while Finland remains "the home base for our
engineering, product, innovation, values, and heritage".
The site is calm and editorial: warm cream #f7f1e8 and a deep sandstone brown #4a4741,
serif headlines in Editorial New over Akkurat LL body text, product photography, and a single
blue #2a72de for the call to action. Controls are full pills.
What makes it worth reading:
- Nature-toned palette in hex beside Tailwind. Oura adds sandstone, cream, mustard, olive, brown
and slate families on top of Tailwind v4's oklch palette.
- One blue to act. The only saturated colour on the measured page is the call-to-action blue.
- A serif for headlines. Editorial New carries the headings; Akkurat LL the rest.
Primary tasks
- Learn about the ring and its health features; buy it.
- Explore Oura for organisations; manage the cart.
2. Color Palette & Roles
Measured with getComputedStyle on ouraring.com/de: 297 root custom properties — --color-* 74,
--col-* 54 and --row-* 24 (grid placement), --text-* 42, --tw-* 30, fonts, containers, radii.
Tailwind v4's stock values (the oklch() colours such as --color-blue-500, --tw-*, containers,
easings) are excluded; Oura's own colours are the hex families below.
Action
- Primary (
#2a72de) — --color-blue-100; the call to action.
- Primary hover (
#2056a6) — --color-blue-200.
- Focus (
#3184ff) — the 2px focus outline.
Warm neutrals
- Foreground (
#000000) — header controls and most text on light sections.
- Sandstone ink (
#4a4741) — --color-sandstone-500; dark sections and secondary text.
- Cream (
#f7f1e8) — --color-cream-50, --color-sandstone-200; the main ground.
- Cream 100 (
#eee6dc) · Sandstone 100 (#fefaef) · Sandstone 450 (#e6ded3).
- Gray 450 (
#5a5958) · Gray 350 (#a8a5a0) · Border (#ececec, --color-gray-200) ·
Canvas (#ffffff).
Nature families
Slate #27455c (a rendered band) and --color-slate-500 #1b3449 · Mustard #af751b ·
Olive #5c6f5d · Brown #715956 · Red #d22c15.
3. Typography Rules
Font family
Editorial New (200, 300) for headings ("Editorial New", serif) and Akkurat LL (300, 400) for
body (AkkuratLL, sans-serif), all loaded (document.fonts).
Scale
The call to action is 16px/700; header controls 16px/400.
4. Component Stylings
Measured after declining cookies (OneTrust), focus read under a real Tab key, and a hover counted
only when :hover matched; background-image, text-decoration and pseudo-elements were compared too.
- Call to action — Mehr erfahren:
#2a72de, white 16px/700, full pill, 48px. Hover and press
#2056a6. Focus: outline: 2px solid #3184ff.
- Header pills — Gesundheit, Jetzt kaufen, Die Vorteile von Oura: transparent, black 16px/400,
48px. Hover changes nothing; focus draws the same 2px outline.
Radius
Controls are full pills.
5. Layout Principles
- Cream sections alternating with deep sandstone and slate bands; product photography leads.
- A 24-column grid (
--col-start-*, --col-end-* up to 24).
6. Depth & Elevation
Flat; overlays use a translucent dark scrim.
7. Do's and Don'ts
Do
- Ground pages in cream
#f7f1e8 and sandstone #4a4741.
- Use blue
#2a72de for the call to action, darkening to #2056a6.
- Pair an Editorial New serif headline with Akkurat LL body.
Don't
- Don't count Tailwind's oklch palette as Oura's.
- Don't add more saturated colours; one blue acts.
- Don't square off controls.
8. Responsive Behavior
Not measured. Desktop 1440×1000 only.
9. Agent Prompt Guide
Quick Color Reference
#2a72de blue · #2056a6 blue hover · #3184ff focus · #f7f1e8 cream · #4a4741 sandstone ·
#e6ded3 sand · #27455c slate · #af751b mustard · #5c6f5d olive
Example Component Prompts
- "A 48px blue
#2a72de pill, white 16px/700 Akkurat LL; hover #2056a6; focus a 2px #3184ff
outline."
- "A cream
#f7f1e8 section with an Editorial New serif headline in sandstone #4a4741."
10. Voice & Tone
Not assessed as authored voice.
11. Brand Narrative
Oura began in Oulu and describes itself through Finland — optimism, balance, craftsmanship — and the
site reflects that with warm, natural tones, an editorial serif and restraint in colour. It is now
moving its legal home to the United States while keeping product and engineering in Finland.
12. Principles
- Natural and calm. Cream, sand, olive and slate.
- One colour acts. Blue for the call to action.
- Editorial type. A serif headline, a precise sans.
13. Personas
Not researched. No persona claim is made from a UI capture.
14. States
Hover: the blue pill to #2056a6; header pills do not change. Press: #2056a6. Focus: a 2px
#3184ff outline on all measured controls.
15. Motion & Easing
Not measured.
Tier 1 sources: https://ouraring.com/de (live homepage — 297 root custom properties read via getComputedStyle, Tailwind v4 defaults excluded; Editorial New and Akkurat LL loaded; two components measured at rest, hover, pressed and focus after declining cookies, captured 2026-09-26); https://ouraring.com/zz-this-does-not-exist (nonsense-path control — HTTP 404, read 2026-09-26); https://ouraring.com/about-us (Oura About Us — "Who we are starts with where we're from: Finland", read 2026-09-26); https://ouraring.com/impressum (Impressum — Oura Health Oy, Elektroniikkatie 10, 90590 Oulu, read 2026-09-26); https://ouraring.com/blog/oura-redomiciliation-news/ (A Note to the Oura Community on Our Legal Home — redomiciliation to the US; Finland remains the home base for engineering and product, read 2026-09-26)