# Oura Ring 5 — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://ouraring.com/store/rings/oura-ring-5
Captured: 2026-11-06
CSS measured: 2026-11-06T17:43:50.647Z at 1440×1000 — https://ouraring.com/store/rings/oura-ring-5
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: claude-sonnet-5

## Design direction

The Oura Ring website features a highly editorial, minimal, and sophisticated design. It relies heavily on immersive scroll-linked 3D product animations to showcase the physical design and features of the ring. The typography pairs a classic, high-contrast serif (Editorial New) for display and headings with a clean sans-serif (Akkurat LL) for body copy, creating an editorial feel. The color palette is understated, utilizing deep grays, off-whites, and muted taupes to allow the product photography and 3D renders to stand out. Large, airy spacing and rounded corners on media containers contribute to a soft, premium aesthetic.

## Classification

- Industry: health
- Site type: Blog, Store
- Business model: Shopping, E Commerce
- Styles: editorial, minimal, soft, immersive-product-focus, premium-tech
- Platform: Custom code
- Technology: Next.js, Tailwind CSS

## Typography

- Display: Editorial New — weight 400; size 128px; line-height 192px; tracking -6.4px; Regular (100% role confidence, curator values)
- Heading: Editorial New — weight 400; size 98px; line-height 107.8px; tracking normal; Regular (100% role confidence, curator values)
- Body: AkkuratLL — weight 400; size 16px; line-height 24px; tracking normal; Regular (100% role confidence, curator values)

## Functional palette

- Text — text #19191C: Curator assigned functional color role (100% role confidence, curator values)
- Canvas — canvas #F3F1F0: Curator assigned functional color role (100% role confidence, curator values)
- Text — text #FFFFFF: Curator assigned functional color role (100% role confidence, curator values)
- Primary Action — primary action #2A72DE: Curator assigned functional color role (100% role confidence, curator values)
- Muted Text — muted text #4A4741: Curator assigned functional color role (100% role confidence, curator values)
- Surface — surface #F7F1E8: Curator assigned functional color role (100% role confidence, curator values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 55,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip Navigation to Main Content",
        "top": 1,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Shop",
        "top": 39,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Your Health",
        "top": 39,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "700",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "Shop Now",
        "top": 884,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "What's Included",
        "top": 10810,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Sensors",
        "top": 10502,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "36px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "h3",
        "text": "Gold",
        "top": 11920,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Silver",
        "top": 11920,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Deep Rose",
        "top": 11920,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "700",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "h3",
        "text": "Sleep Score",
        "top": 9943,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Sleep Stages",
        "top": 9943,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Blood Oxygen Sensing",
        "top": 9943,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Editorial New",
    "fontStack": "\"Editorial New\", serif",
    "weight": "400",
    "size": "98px",
    "lineHeight": "107.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h2",
        "text": "Rebuilt forgreater accuracy",
        "top": 5728,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Built to last.Designed for comfort.",
        "top": 8683,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Everyday health sensing",
        "top": 9309,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "60px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "The world’s smallest smart ring puts 50+ health metrics at your fingertips.",
        "top": 1435,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "40%Thinner. Lighter. Smaller.",
        "top": 2701,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "40%",
        "top": 2700,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Editorial New",
    "fontStack": "\"Editorial New\", serif",
    "weight": "400",
    "size": "128px",
    "lineHeight": "192px",
    "letterSpacing": "-6.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Built to blend in",
        "top": 370,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "60px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h4",
        "text": "Technical Specifications",
        "top": 10402,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Editorial New",
    "fontStack": "\"Editorial New\", serif",
    "weight": "300",
    "size": "40px",
    "lineHeight": "50px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Receive articles, tips, and offers from Oura",
        "top": 12573,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "40px",
    "letterSpacing": "-1.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "1 week battery life from a single charge.",
        "top": 7665,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "700",
    "size": "18px",
    "lineHeight": "18px",
    "letterSpacing": "0.9px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Introducing Oura Ring 5",
        "top": 1385,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 30,
    "contexts": [
      {
        "tag": "li",
        "text": "Oura Ring 5",
        "top": 10846,
        "property": "font"
      },
      {
        "tag": "li",
        "text": "Size-specific standard charger",
        "top": 10872,
        "property": "font"
      },
      {
        "tag": "li",
        "text": "USB-C cable",
        "top": 10898,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "p",
        "text": "The answer to “how did you sleep last night?” Your score is based on your total sleep, heart rate va",
        "top": 9982,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Wake up to in-depth analysis of your deep sleep, REM sleep, and light sleep from the night prior.",
        "top": 9982,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "By detecting your blood oxygen levels at night, Oura can tell if you’re experiencing any breathing d",
        "top": 9982,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "r2 compared to ECG21",
        "top": 7263,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Compared to clinical sleep lab2",
        "top": 7263,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Based on new member NPS survey",
        "top": 7263,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "40px",
    "letterSpacing": "-0.8px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Highly precise sensors adapt to your body — delivering personal health data, day and night.",
        "top": 6661,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Titanium. Waterproof. Made for your everyday.",
        "top": 8923,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "700",
    "size": "24px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Watch the film",
        "top": 5250,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Editorial New",
    "fontStack": "\"Editorial New\", serif",
    "weight": "300",
    "size": "80px",
    "lineHeight": "88px",
    "letterSpacing": "-2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "99%",
        "top": 7131,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "95%",
        "top": 7131,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "90%",
        "top": 7131,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Heart Rate Accuracy",
        "top": 7235,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Sleep Staging Accuracy",
        "top": 7235,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Members Feel Healthier",
        "top": 7235,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "10.5px",
    "lineHeight": "0px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "sup",
        "text": "1",
        "top": 12204,
        "property": "font"
      },
      {
        "tag": "sup",
        "text": "2",
        "top": 12233,
        "property": "font"
      },
      {
        "tag": "sup",
        "text": "3",
        "top": 12283,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "9px",
    "lineHeight": "0px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "sup",
        "text": "2",
        "top": 7263,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "1",
        "top": 7263,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "2",
        "top": 7263,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "192px",
    "lineHeight": "192px",
    "letterSpacing": "-9.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "1 week",
        "top": 7665,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "There are no items in your cart",
        "top": 59,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "italic",
    "count": 1,
    "contexts": [
      {
        "tag": "em",
        "text": "Blog",
        "top": 12607,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "700",
    "size": "18px",
    "lineHeight": "19.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "button",
        "text": "Sleep",
        "top": 9481,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Activity and Fitness",
        "top": 9481,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Readiness",
        "top": 9481,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "a",
        "text": "Terms & Conditions",
        "top": 12934,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Privacy Policy",
        "top": 12934,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Accessibility",
        "top": 12934,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "AkkuratLL",
    "fontStack": "AkkuratLL, sans-serif",
    "weight": "400",
    "size": "9px",
    "lineHeight": "0px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "3",
        "top": 10805,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#19191C",
    "alpha": 1,
    "cssValue": "rgb(25, 25, 28)",
    "count": 80,
    "contexts": [
      {
        "tag": "span",
        "text": "Shop Now",
        "top": 884,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2418,
        "property": "svg-fill"
      },
      {
        "tag": "h2",
        "text": "40%Thinner. Lighter. Smaller.",
        "top": 2701,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F3F1F0",
    "alpha": 1,
    "cssValue": "rgb(243, 241, 240)",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Product\",\"name\":\"Oura Ring 5 Smart Ring Collect",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 310,
        "property": "svg-fill"
      },
      {
        "tag": "h1",
        "text": "Built to blend in",
        "top": 370,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#E6E4E2",
    "alpha": 1,
    "cssValue": "rgb(230, 228, 226)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "What's IncludedOura Ring 5 Size-specific standard charger USB-C cableTechnical SpecificationsSensors",
        "top": 10322,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 18,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip Navigation to Main Content",
        "top": 1,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 36,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Klarna",
        "top": 12485,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 21,
    "contexts": [
      {
        "tag": "span",
        "text": "Shop Now",
        "top": -34,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 5514,
        "property": "svg-fill"
      },
      {
        "tag": "h2",
        "text": "1 week battery life from a single charge.",
        "top": 7665,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#4A4741",
    "alpha": 1,
    "cssValue": "rgb(74, 71, 65)",
    "count": 69,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": -32,
        "property": "svg-fill"
      },
      {
        "tag": "button",
        "text": "Sleep",
        "top": 9481,
        "property": "border"
      },
      {
        "tag": "p",
        "text": "What's Included",
        "top": 10810,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#A8A5A0",
    "alpha": 1,
    "cssValue": "rgb(168, 165, 160)",
    "count": 14,
    "contexts": [
      {
        "tag": "h2",
        "text": "Receive articles, tips, and offers from Oura",
        "top": 12573,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "We care about protecting your data.",
        "top": 12801,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Read more in our Privacy Policy.",
        "top": 12819,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#F8F2E8",
    "alpha": 0.30196078431372547,
    "cssValue": "oklab(0.960333 0.00280914 0.0133284 / 0.3)",
    "count": 1,
    "contexts": [
      {
        "tag": "nav",
        "text": "Oura Ring 5Shop Now",
        "top": -54,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#4E4545",
    "alpha": 0.10196078431372549,
    "cssValue": "oklab(0.398852 0.00102159 0.0106092 / 0.1)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 16,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#FFFFFF",
    "alpha": 0.4,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.4)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "What's IncludedOura Ring 5 Size-specific standard charger USB-C cable",
        "top": 10786,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#F7F1E8",
    "alpha": 1,
    "cssValue": "rgb(247, 241, 232)",
    "count": 36,
    "contexts": [
      {
        "tag": "button",
        "text": "Sleep",
        "top": 9481,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 9499,
        "property": "svg-fill"
      },
      {
        "tag": "a",
        "text": "About Us",
        "top": 12607,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#DBDBDB",
    "alpha": 0.30196078431372547,
    "cssValue": "oklab(0.885305 2.98023e-8 0 / 0.3)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 10154,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#E2E1DA",
    "alpha": 1,
    "cssValue": "rgb(226, 225, 218)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 7047,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#5A5958",
    "alpha": 1,
    "cssValue": "rgb(90, 89, 88)",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Redesigned Finish",
        "top": 11951,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FEFEFE",
    "alpha": 1,
    "cssValue": "rgb(254, 254, 254)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Shop",
        "top": 39,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 39,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#838280",
    "alpha": 1,
    "cssValue": "rgb(131, 130, 128)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12462,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#2A72DE",
    "alpha": 1,
    "cssValue": "rgb(42, 114, 222)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Shop Now",
        "top": -42,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#CCCAC7",
    "alpha": 1,
    "cssValue": "rgb(204, 202, 199)",
    "count": 20,
    "contexts": [
      {
        "tag": "button",
        "text": "Activity and Fitness",
        "top": 9481,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#E7A7C6",
    "alpha": 1,
    "cssValue": "rgb(231, 167, 198)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "KlarnaKlarna",
        "top": 12468,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#0B051D",
    "alpha": 1,
    "cssValue": "rgb(11, 5, 29)",
    "count": 2,
    "contexts": [
      {
        "tag": "svg",
        "text": "Klarna",
        "top": 12473,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 12478,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#B6B5B3",
    "alpha": 1,
    "cssValue": "rgb(182, 181, 179)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 36,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#1F72CD",
    "alpha": 1,
    "cssValue": "rgb(31, 114, 205)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "American ExpressAmerican Express",
        "top": 12468,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#828282",
    "alpha": 0.2,
    "cssValue": "oklab(0.606853 0.000332713 0.00321853 / 0.2)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "1 https://ouraring.com/blog/how-accurate-is-oura/ opens in new tab2 Accuracy of Oura Ring is validat",
        "top": 12180,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#1B1B1B",
    "alpha": 0.14901960784313725,
    "cssValue": "oklab(0.214707 0.00160658 -0.00560202 / 0.15)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "95%Sleep Staging AccuracyCompared to clinical sleep lab2",
        "top": 7047,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#172B85",
    "alpha": 1,
    "cssValue": "rgb(23, 43, 133)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12479,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#253B80",
    "alpha": 1,
    "cssValue": "rgb(37, 59, 128)",
    "count": 3,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12490,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#F79E1B",
    "alpha": 1,
    "cssValue": "rgb(247, 158, 27)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12474,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#EB001B",
    "alpha": 1,
    "cssValue": "rgb(235, 0, 27)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12474,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#5F6368",
    "alpha": 1,
    "cssValue": "rgb(95, 99, 104)",
    "count": 3,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12478,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#FDFDFD",
    "alpha": 1,
    "cssValue": "rgb(253, 253, 253)",
    "count": 4,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 46,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#34383B",
    "alpha": 1,
    "cssValue": "rgb(52, 56, 59)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Google PayGoogle Pay",
        "top": 12468,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#179BD7",
    "alpha": 1,
    "cssValue": "rgb(23, 155, 215)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12490,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#FFFFFF",
    "alpha": 0.25098039215686274,
    "cssValue": "oklab(0.99767 0.0000493411 0.0000610245 / 0.25)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "There are no items in your cart",
        "top": 25,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#FF5F00",
    "alpha": 1,
    "cssValue": "rgb(255, 95, 0)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12476,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.6)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12744,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#D3D1CE",
    "alpha": 1,
    "cssValue": "rgb(211, 209, 206)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 10181,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#EA4335",
    "alpha": 1,
    "cssValue": "rgb(234, 67, 53)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12477,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#34A853",
    "alpha": 1,
    "cssValue": "rgb(52, 168, 83)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12486,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#222D65",
    "alpha": 1,
    "cssValue": "rgb(34, 45, 101)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12476,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#4285F4",
    "alpha": 1,
    "cssValue": "rgb(66, 133, 244)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12483,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#FBBC04",
    "alpha": 1,
    "cssValue": "rgb(251, 188, 4)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 12481,
        "property": "svg-fill"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical spacing between sections, allowing the large typography and 3D models to breathe. Content is often centered with wide margins.
- Corner style: Consistently rounded corners on media containers, feature cards, and buttons.
- Radius: Large border radii on images and video containers (e.g., the 'Rebuilt for greater accuracy' grid). Pill-shaped (fully rounded) buttons.
- Borders: Minimal use of borders; mostly relies on background color contrast or subtle light borders (e.g., #CCCAC7 on inactive tab buttons).
- Buttons: Pill-shaped buttons. Primary buttons are solid (white or blue), while secondary/tab buttons have thin borders and transparent or light backgrounds.
- Content width: Content is generally constrained to a readable max-width, but 3D elements and some media break out to full viewport width.
- Density: Low density. The design prioritizes large imagery, massive typography, and whitespace over packing information tightly.
- Evidence: Observed from the DOM/CSS facts: pill-shaped buttons, large font sizes (up to 192px for stats, 128px for display), and visual inspection of the crops showing rounded media containers and airy layouts.

## Sections

Gallery section count: 13. Each entry corresponds to one gallery capture.

1. **Navbar — Oura Ring 5 Navbar** (Home)
   Sparse centered links with dropdown cues and a cart icon keep the bar quiet over the dark image so the product stays dominant.
   Capture: 1440×90px; page bounds 0–90px of 13050px; source section ID: `1cef72cc-70bb-4c2e-986a-068b9f76f7f5`; image: https://media.designdetails.io/library/70aff1f504328924e5a1b8c4858a4a44e2b2e8649d2ad3f198e88bb6aeced14e/1cef72cc-70bb-4c2e-986a-068b9f76f7f5.webp
   SECTION.md v3.2: `1cef72cc-70bb-4c2e-986a-068b9f76f7f5` (deterministic evidence; editorial review pending)
2. **Hero — Full-bleed product hero with CTA** (Home)
   A large serif headline over oversized ring close-ups and one small pill button gives a single clear focus and next step.
   Capture: 1440×1910px; page bounds 90–2000px of 13050px; source section ID: `d9832f2e-c005-4f0c-9aa3-9c9c96902e26`; image: https://media.designdetails.io/library/a6d4f8cde6dc5d6e707c2895f97f7cd9507d2861a9af6fab7268b875a75733fd/d9832f2e-c005-4f0c-9aa3-9c9c96902e26.webp
   SECTION.md v3.2: `d9832f2e-c005-4f0c-9aa3-9c9c96902e26` (deterministic evidence; editorial review pending)
3. **Stats — Single oversized percentage statement** (Home)
   The ring replaces the zero in a huge 40%, turning one number into a memorable visual proof of the size claim.
   Capture: 1440×2000px; page bounds 2000–4000px of 13050px; source section ID: `6a2133cd-43fe-450d-818a-2e413dde34a9`; image: https://media.designdetails.io/library/f73e1df4a586198d22513393e76bb4313bff2fa7f81b23f27e3ef8580a0b48c0/6a2133cd-43fe-450d-818a-2e413dde34a9.webp
   SECTION.md v3.2: `6a2133cd-43fe-450d-818a-2e413dde34a9` (deterministic evidence; editorial review pending)
4. **Gallery — Lifestyle photo of hand wearing ring** (Home)
   A cropped hand on a plain background shows the ring's real scale and tone without any competing text.
   Capture: 1440×900px; page bounds 4000–4900px of 13050px; source section ID: `758cc628-6b9b-4201-9172-3cca968aadef`; image: https://media.designdetails.io/library/3dc2586213afb6e15e026cdf0c25c1c8d3eb6f5ebd4be034d1aa068e683b4855/758cc628-6b9b-4201-9172-3cca968aadef.webp
   SECTION.md v3.2: `758cc628-6b9b-4201-9172-3cca968aadef` (deterministic evidence; editorial review pending)
5. **Other — Video teaser with play button** (Home)
   A rounded video card with a centered play prompt invites a brand film while keeping the page calm and scannable.
   Capture: 1440×828px; page bounds 4900–5728px of 13050px; source section ID: `0b578b29-1481-4360-8151-f353264a9d56`; image: https://media.designdetails.io/library/65bfbdbcae372fda2fdef8e7638c64bf9c519f11be37bd2eda75be46cfbf384f/0b578b29-1481-4360-8151-f353264a9d56.webp
   SECTION.md v3.2: `0b578b29-1481-4360-8151-f353264a9d56` (deterministic evidence; editorial review pending)
6. **Stats — Accuracy photos with three metrics** (Home)
   Large serif percentages in a three-column row under paired imagery let visitors take in the performance claims at a glance.
   Capture: 1440×1553px; page bounds 5728–7281px of 13050px; source section ID: `2ec13894-b099-4ecf-bc35-773966ead12c`; image: https://media.designdetails.io/library/11c48350c621e6d49a881efba8118ac05f842ef6e8aeb7f35fc0933dd5032412/2ec13894-b099-4ecf-bc35-773966ead12c.webp
   SECTION.md v3.2: `2ec13894-b099-4ecf-bc35-773966ead12c` (deterministic evidence; editorial review pending)
7. **Features — Full-width battery life callout** (Home)
   A bold '1 week' set over a dark macro of the ring makes one benefit instantly clear and memorable.
   Capture: 1440×1200px; page bounds 7281–8481px of 13050px; source section ID: `507d36ef-cb7c-4f2e-8baa-b1607f629815`; image: https://media.designdetails.io/library/2292b3878ed6a47a88a49625cda02996523d47470189c8d8ce37572174892f1d/507d36ef-cb7c-4f2e-8baa-b1607f629815.webp
   SECTION.md v3.2: `507d36ef-cb7c-4f2e-8baa-b1607f629815` (deterministic evidence; editorial review pending)
8. **Features — Lifestyle video banner with durability claims** (Home)
   A large serif headline over a warm active-life photo ties durability and comfort to real use in one short line.
   Capture: 1440×828px; page bounds 8481–9309px of 13050px; source section ID: `b8a8146c-a9db-492f-a36f-73df8c97bcb3`; image: https://media.designdetails.io/library/7f3bc3965474b81a9273f226ee025b3479b976bd58b8506e0cdc86a2ffff73d5/b8a8146c-a9db-492f-a36f-73df8c97bcb3.webp
   SECTION.md v3.2: `b8a8146c-a9db-492f-a36f-73df8c97bcb3` (deterministic evidence; editorial review pending)
9. **Features — Tabbed carousel of health features** (Home)
   Pill tabs and swipeable screenshot cards let visitors browse sleep, activity and other insights without leaving the section.
   Capture: 1440×901px; page bounds 9309–10210px of 13050px; source section ID: `841717b4-ad73-4650-842e-40154a29cf9a`; image: https://media.designdetails.io/library/31b409495f6c8d95e255d52242aa2d8aabdc1cb1045cc3859ab7c8e97b7860e8/841717b4-ad73-4650-842e-40154a29cf9a.webp
   SECTION.md v3.2: `841717b4-ad73-4650-842e-40154a29cf9a` (deterministic evidence; editorial review pending)
10. **Features — Technical specifications grid** (Home)
   Six labeled groups with icons beside a product shot organize dense details so specs are easy to scan and compare.
   Capture: 1440×986px; page bounds 10210–11196px of 13050px; source section ID: `0d509e59-3bdf-4986-8c04-9cc6ba9cc88d`; image: https://media.designdetails.io/library/5a3ff153573307e93b52f882453f9cff27c6ec9fcb58264299960255f5336a64/0d509e59-3bdf-4986-8c04-9cc6ba9cc88d.webp
   SECTION.md v3.2: `0d509e59-3bdf-4986-8c04-9cc6ba9cc88d` (deterministic evidence; editorial review pending)
11. **Gallery — Finish selector carousel of rings** (Home)
   Evenly spaced ring photos with small labels and arrows let visitors compare colors side by side on a clean background.
   Capture: 1440×920px; page bounds 11196–12116px of 13050px; source section ID: `21bd586b-c830-41ae-9afa-fc3c8feb3464`; image: https://media.designdetails.io/library/92af64f1801865ba49ce06e9fa28f6a1021d3d96d3791f4b82c2e8ee932367bc/21bd586b-c830-41ae-9afa-fc3c8feb3464.webp
   SECTION.md v3.2: `21bd586b-c830-41ae-9afa-fc3c8feb3464` (deterministic evidence; editorial review pending)
12. **Other — Small-print footnotes and sources** (Home)
   Compact, low-contrast numbered notes back up the claims above while staying out of the way of the main design.
   Capture: 1440×234px; page bounds 12116–12350px of 13050px; source section ID: `36d6593c-b2b5-4842-9345-3fe6260d853a`; image: https://media.designdetails.io/library/29a59e3e244967a698dc4091c931251491e98b6fe09d0ff07b35cf3891d45085/36d6593c-b2b5-4842-9345-3fe6260d853a.webp
   SECTION.md v3.2: `36d6593c-b2b5-4842-9345-3fe6260d853a` (deterministic evidence; editorial review pending)
13. **Footer — Dark footer with newsletter signup** (Home)
   A newsletter field, four tidy link columns and payment icons on dark ground give clear exits and trust cues at the end.
   Capture: 1440×700px; page bounds 12350–13050px of 13050px; source section ID: `c2ca5e88-4923-47dc-bba5-72862d8b368b`; image: https://media.designdetails.io/library/bcacd838d642db22278116f0d0e0dc4cab93c05e901f3040925d8d1bf40927b1/c2ca5e88-4923-47dc-bba5-72862d8b368b.webp
   SECTION.md v3.2: `c2ca5e88-4923-47dc-bba5-72862d8b368b` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/8f89f731127334b9778d840ecb7d1ebad7ae54aecb2a41e47aeec7de165866bb/desktop_full-cc409106-2026-11-06T17-43-50-670Z.webp
- Mobile screenshot: https://media.designdetails.io/library/4dbfb8f7d51e036963de8aaf9748c7d552e9e597695ada34f32f9007db784d62/mobile_full-cc409106-2026-11-06T17-44-36-039Z.webp
- Open Graph image: https://media.designdetails.io/library/8dfd6389938c2029353be82ec08f82ae2f9d54d9e10f3be6386bfdb1e7f93c9a/og_image-cc409106-2026-11-06T17-44-00-807Z.webp
- Full-page video: https://media.designdetails.io/library/3d0a4c795f348407f3aaeb3f30fd2e4be40b2cbd09a709be107bef7529e75fa5/motion-1793988513192.mp4
- Video poster: https://media.designdetails.io/library/407f84892a83e0b442e08d05fd6094e9f5044e5c04b23f343aced13d707f884c/motion-poster-1793988513192.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero With Background Imagery
- Primary Button
- Stat Block
- Video Frame
- Tabs
- Feature Card
- Carousel
- Newsletter Form
- Footer
- Scroll Driven 3D Product Explorer
- App UI Showcase Cards
- Technical Specification Grid

## Quality rubric

Overall: 59.6/100 (Competent)
Evidence coverage: 100%
Judge tier: Good
Verdict: This is a well-crafted, editorial premium-hardware product page that executes a familiar formula — serif/sans typographic pairing, neutral palette with a single accent, and a scroll-driven 3D hero sequence — with real competence and restraint. Typography carries clear hierarchy from 128px display to 12px footnotes, the palette stays disciplined enough to let product imagery dominate, and content (size comparisons, accuracy stats, spec sheets) is matched thoughtfully to its supporting visual device. The motion system centers almost entirely on one idea, a scroll-scrubbed product rotation, extended across several moments, which is competently built but not structurally novel; the same is true of the overall page architecture, which follows the now-standard Apple-style long-form product narrative. Nothing observed constitutes a hard-to-substitute, landmark-level idea — this is good, disciplined execution of an established genre rather than a site that pushes the form.

- Typography (15%): 68 — A confident, consistent two-family system (Editorial New serif for display/headlines, Akkurat sans for UI/body) is applied with clear hierarchy from 192px numerals down to 12px fine print. Negative letter-spacing on large sizes (-6.4px to -9.6px) shows deliberate optical tuning, and weight/size pairing is logical (bold uppercase eyebrow labels, light-weight large stat numerals). It's a well-executed editorial-tech pairing rather than a novel typographic idea, and some choices (mixing serif stat numerals in one place with a 192px sans 'week' numeral elsewhere) show slight inconsistency in which family carries big numbers.
- Color (10%): 62 — Restrained neutral palette (near-black #19191C text, off-white #F3F1F0/#F7F1E8 canvases, warm gray #4A4741) lets product renders and photography carry visual interest, which suits a premium hardware site. The one saturated accent, blue #2A72DE, is reserved for the sticky header CTA, giving a clear single call-to-action color. However the palette is conventional neutral-premium-tech (seen across many DTC hardware sites) rather than distinctive, and the footer introduces many uncoordinated payment-icon brand colors that sit outside the considered system.
- Layout (20%): 66 — Clear editorial rhythm: centered hero, alternating full-bleed media and text blocks, a stat block grid, a tabbed feature-card section, a two-column spec layout, and a horizontal finish carousel. Generous whitespace and consistent rounded-corner media containers give it cohesion across a long page (13,050px tall). It is a well-executed but highly familiar long-form product-page template (hero → feature narrative → specs → footer) rather than a structurally novel layout system, and density/complexity stays fairly low throughout.
- Motion (20%): 58 — The site leans on a scroll-linked 3D product sequence as its central device, with secondary counter animations and a horizontal carousel, and the observation notes animations reverse cleanly on scroll-up — a reasonable sign of a controlled scrubbing system rather than a one-off trick. However this is fundamentally one dominant motion idea (scroll-scrub product rotation) repeated/extended across the page, supplemented by standard count-up and carousel patterns common to many premium product sites; no evidence of interaction-driven (hover/drag) motion, staggered choreography, or varied easing beyond the scroll-tied transform.
- Originality (25%): 48 — The scroll-driven 3D product exploration is a well-executed version of an idiom already established by Apple and widely copied across premium hardware DTC sites (including wearables); pairing a classic serif display face with a technical sans and neutral-premium palette is also a now-common 'elevated tech' formula. Nothing here constitutes a hard-to-substitute idea unique to this brand or problem — the size-comparison '40%' reveal and stat count-ups are tasteful but standard devices in this genre. It executes a known playbook very competently rather than introducing a new interaction model, narrative device, or visual language.
- Content (10%): 64 — Typography, imagery, and motion are coordinated to narrate a single story (size/comfort/accuracy/battery/health-sensing) with each section's visual device matching its claim (ring literally shrinking for the 40% size claim, app screenshots for feature cards, exploded spec diagram for technical details). Citations/footnotes are handled with small superscript conventions keeping the editorial tone intact. The content integration is solid and purposeful, though it stays within an expected 'hero stat → proof → spec sheet → footer' structure rather than demonstrating unusual integration between data and design.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

Oversized macro shots of the ring's curved metal band fill the opening screen, letting the product's finish and shape sell itself before any copy appears. Big bold stats like 40% and 1 week break up the page into easy, scannable chapters, while a worn-on-hand shot and muted neutral tones keep the mood calm and trustworthy.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.