---
version: alpha
name: Oura
description: "Warm bone canvas, an editorial serif whispering \"Power,\" a single blue tap."
colors:
  on-surface-variant: "#A8A5A0"
  surface: "#F7F1E8"
  on-surface: "#000000"
  primary: "#2A72DE"
  warm-ink: "#4A4741"
  paper-white: "#FFFFFF"
  slate-grey: "#696969"
  sage: "#5B6550"
  blue-deep: "#1F72CD"
  blue-ink: "#3860BE"
  volcanic-black: "#1C1B1A"
  warm-hairline: "#D3D1CE"
  cream-edge: "#FEFAEF"
  charcoal-border: "#34383B"
  button-grey: "#838280"
  brand-indigo: "#4a4af4"
typography:
  caption:
    fontFamily: AkkuratLL
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  small:
    fontFamily: AkkuratLL
    fontSize: 13.008px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  body-sm:
    fontFamily: AkkuratLL
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body:
    fontFamily: AkkuratLL
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0em
  subheading:
    fontFamily: AkkuratLL
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  title:
    fontFamily: AkkuratLL
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  heading:
    fontFamily: AkkuratLL
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.01em
  heading-lg:
    fontFamily: AkkuratLL
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.01em
  sub-display:
    fontFamily: Editorial New
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: -0.01em
  display-sm:
    fontFamily: Editorial New
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -0.02em
  display:
    fontFamily: Editorial New
    fontSize: 80px
    fontWeight: 300
    lineHeight: 1
    letterSpacing: -0.02em
  hero:
    fontFamily: Editorial New
    fontSize: 110px
    fontWeight: 300
    lineHeight: 0.95
    letterSpacing: -0.02em
rounded:
  pill-button-cta: 07px
  input-small-card: 12px
  card: 8px
  chip: 6px
  fine-detail: 4px
  rounded-panel: 24px
  avatar-soft-blob: 90px
spacing:
  xxxxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 32px
  xxl: 40px
---
# Oura — Style Reference
> Warm bone canvas, an editorial serif whispering "Power," a single blue tap.

**Theme:** mixed

Oura runs on a warm-neutral register that refuses pure white: the canvas is a bone cream (`#F7F1E8`), the ink is a soft taupe-brown (`#4A4741`) rather than black, and the whole page reads like matte paper lit by low sun. The one signature move is the typographic split-screen — an oversized **Editorial New** serif ("Subtle. Power.") set against clean **AkkuratLL** sans supporting copy, so the headline feels couture while the body stays clinical. Colour is held in near-total restraint: a lone saturated blue (`#2A72DE`) is spent only on the single pill CTA, and a quiet sage (`#5B6550`) carries editorial accents. Product photography does the shouting — a gold ring on volcanic black rock — while the UI stays hushed, fully-rounded, and warm. Beneath the marketing skin sits a second, colder token layer: the Oura *app's* indigo design system (`#4a4af4`), a deliberate contrast that keeps the product interface distinct from the storefront's warmth.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Bone Canvas | `#F7F1E8` | `--color-bone` | Primary warm surface — the top HSA/FSA banner, cards, and cream buttons; the identity ground, never pure white. |
| Warm Ink | `#4A4741` | `--color-ink` | The signature taupe-brown — display serif, body copy, dark cream-button fill; used *instead* of black for headings to keep everything warm. |
| True Black | `#000000` | `--color-black` | Nav links and hard label text only; reserved for maximum-contrast wordmark moments, not headings. |
| Paper White | `#FFFFFF` | `--color-white` | Inner card surfaces and text reversed on dark imagery. |
| Warm Grey | `#A8A5A0` | `--color-grey` | Muted secondary text; the quiet fade between ink and canvas. |
| Slate Grey | `#696969` | `--color-grey-mid` | Captions and fine print. |
| Sage | `#5B6550` | `--color-sage` | Olive-green editorial accent / secondary link — the only non-neutral besides blue, and never a CTA. |
| Explore Blue | `#2A72DE` | `--color-blue` | The single call-to-action colour — the "Explore" pill. Spend it once per view; it *is* the button. |
| Blue Deep | `#1F72CD` | `--color-blue-hover` | Pressed / hover state of the CTA pill. |
| Blue Ink | `#3860BE` | `--color-blue-ink` | Inline text-link blue, slightly desaturated from the CTA. |
| Volcanic Black | `#1C1B1A` | `--color-volcanic` | Dark-section / footer ground, echoing the lava-rock hero photography. |
| Warm Hairline | `#D3D1CE` | `--color-hairline` | Default border — a warm grey line, never a hard black rule. |
| Cream Edge | `#FEFAEF` | `--color-cream-edge` | Near-white border on cream-on-cream cards. |
| Charcoal Border | `#34383B` | `--color-border-dark` | Hairline used inside the dark volcanic zones. |
| Button Grey | `#838280` | `--color-btn-grey` | Inactive / placeholder button label text. |
| Brand Indigo | `#4a4af4` | `--color-fill-brand-indigo` | The *app* design-system brand fill — cold indigo, deliberately separate from the storefront's warm palette. |

*The app/product token family (`#4a4af4`, `#A8A9FC`, `#2F2FC1`, `#0c0c14`, `#313142`, `#e5e5e9`, `#6D6E71`, `#F0F5F7`, `#101820`) is reproduced intact in Quick Start — it governs the Oura interface, not the marketing page.*

## Tokens — Typography
### Editorial New — the couture display serif for hero headlines ("Subtle. Power."), set enormous and light · `--font-display`
- **Substitute:** PP Editorial New, Canela, Ogg, Freight Display
- **Weights:** 200, 300 (plus a 200 italic for editorial pull-quotes)
- **Sizes:** 110px / 80px hero display, 48px / 40px sub-display
- **Line height:** tight, ~0.95–1.05 — the serif is meant to nearly touch itself
- **Letter spacing:** none to slightly negative; let the natural serif proportions carry
- **Role:** High-impact editorial headlines only. It is the brand's voice of restraint-meets-power; never use it for UI labels or body.

### AkkuratLL — the neutral Swiss workhorse sans for all supporting copy, nav, and UI · `--font-body`
- **Substitute:** Akkurat, Neue Haas Grotesk, Inter, Helvetica Now
- **Weights:** 100, 200, 300, 400, 600, 700
- **Sizes:** 16px body, 14px / 13px small, 12px caption, 18px subheads, up to 40px for sans headings
- **Line height:** ~1.4–1.6 for body, ~1.2 for headings
- **Letter spacing:** near-zero; slight positive tracking on small-caps nav labels
- **Role:** Everything the serif isn't — subtitle ("The world's smallest smart ring is here."), navigation, buttons, captions, and long-form copy.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 1.4 | 0 | `--text-caption` |
| Small | 13.008px | 1.45 | 0 | `--text-sm` |
| Body-sm | 14px | 1.5 | 0 | `--text-body-sm` |
| Body | 16px | 1.55 | 0 | `--text-body` |
| Subheading | 18px | 1.4 | 0 | `--text-subheading` |
| Title | 24px | 1.3 | 0 | `--text-title` |
| Heading | 30px | 1.2 | -0.01em | `--text-heading` |
| Heading-lg | 32px | 1.15 | -0.01em | `--text-heading-lg` |
| Sub-display | 40px | 1.1 | -0.01em | `--text-sub-display` |
| Display-sm | 48px | 1.05 | -0.02em | `--text-display-sm` |
| Display | 80px | 1.0 | -0.02em | `--text-display` |
| Hero | 110px | 0.95 | -0.02em | `--text-hero` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xxxxs | 2px | `--components-spacing-xxxxs` |
| xs | 4px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 12px | `--spacing-md` |
| lg | 24px | `--components-spacing-lg` |
| xl | 32px | `--spacing-xl` |
| xxl | 40px | `--components-spacing-xxl` |

### Border Radius
| Element | Value |
|---------|-------|
| Pill button / CTA | 3.35544e+07px (fully round) |
| Input / small card | 12px |
| Card | 8px |
| Chip | 6px |
| Fine detail | 4px |
| Rounded panel | 24px |
| Avatar / soft blob | 90px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Inset highlight | `rgba(0,0,0,0) 0px 0px 0px 0px, rgba(255,255,255,0.06) 0px 1px 0px 0px inset` | `--shadow-inset` |
| Soft float | `rgba(0,0,0,0.2) 0px 0px 18px 0px` | `--shadow-float` |

### Layout
- **Page max-width:** wide, full-bleed hero imagery edge-to-edge with a centered content column
- **Section gap:** generous — 40px+ vertical rhythm between blocks
- **Card padding:** 24px–32px
- **Element gap:** 12px–24px

## Components
### Explore Pill (Primary CTA)
**Role:** The one saturated action on the page — "Explore."
Fully-rounded pill (`radius: 3.35544e+07px`), `#2A72DE` fill, `#FFFFFF` label, ~`12px 24px` padding, 16px/400 AkkuratLL. Hover deepens to `#1F72CD`. There is exactly one blue on the page and this is where it lives.

### Cream Button (Secondary)
**Role:** Quiet secondary action that stays inside the warm palette.
Pill radius, `#F7F1E8` fill with `#4A4741` label (or inverse: `#4A4741` fill / `#F7F1E8` label), `16px 12px`–`20px` padding, 16px/400. Reads as a warm chip, never competing with the blue CTA.

### Ghost / Text Link
**Role:** Inline and nav navigation.
No background, `#000000` or `#4A4741` label, `12px 0px` padding, 16px/400, no radius. Sage (`#5B6550`) or blue-ink (`#3860BE`) for emphasized links.

### Nav Bar
**Role:** Top-level site navigation over the cream banner.
Transparent over `#F7F1E8`, `Ōura` wordmark left, center menu (Shop, Health Features, Experience, For Organizations) in `#4A4741` AkkuratLL with dropdown carets, circular cart button right with a `#D3D1CE` hairline.

### HSA/FSA Banner
**Role:** Utility promo strip above the nav.
Full-width `#F7F1E8` bar, centered `#4A4741` 13–14px AkkuratLL with an inline checkmark icon — warm, low-key, no border.

### Hero Display Headline
**Role:** The emotional peak — "Subtle. Power."
Editorial New 300 at 80–110px in `#4A4741`, centered, tight line-height. Paired directly below with AkkuratLL subtitle at ~24px in the same ink.

### Product Eyebrow
**Role:** Names the product above the headline ("Oura Ring 5").
AkkuratLL ~30–32px `#4A4741` with a small filled circular badge (generation number) inline.

### Input Field
**Role:** Search / form entry.
`#4A4741` fill, `#FFFFFF` text, `12px` radius, `8px 48px 8px 20px` padding (trailing icon room), 16px/400, no border, subtle inset highlight shadow. Dark-on-warm — inputs invert against the cream canvas.

### Card
**Role:** Content container.
`#F7F1E8` fill, `#000000`/`#4A4741` text, `8px` radius, `24px`–`32px` padding, no border by default — separation comes from the warm tone step, not lines or heavy shadow.

### Circular Icon Button
**Role:** Cart / utility icons in the nav.
Round (pill radius), transparent or `#F7F1E8` fill, `#4A4741` icon, `#D3D1CE` hairline ring — minimal, tactile.

### Dark Section
**Role:** Cinematic contrast zone (footer, feature blocks).
`#1C1B1A` volcanic ground, `#F7F1E8`/`#FFFFFF` text, `#34383B` hairlines — mirrors the lava-rock hero photography and lets the warm palette breathe against near-black.

### Pull Quote / Editorial Accent
**Role:** Magazine-style emphasis.
Editorial New 200 italic in `#4A4741` or `#5B6550` sage — the couture voice reserved for statements, not UI.

## Do's and Don'ts
### Do
- Use `#4A4741` warm ink for headings and body — it is the brand's "black."
- Keep the couture serif (Editorial New) for hero headlines and pull-quotes only; let AkkuratLL do all the work everywhere else.
- Spend `#2A72DE` blue on exactly one CTA per view — its scarcity is the point.
- Fully round every button (`radius: 3.35544e+07px`) — the pill is the shape language.
- Let warm tone steps (`#F7F1E8` on `#FEFAEF`) separate surfaces instead of borders or shadows.
- Reach for `#5B6550` sage when you need a second accent — it's the only non-blue colour allowed to speak.

### Don't
- Don't use pure `#FFFFFF` as a page canvas — the identity is bone cream, not white.
- Don't set headings in pure `#000000` — reserve black for nav/wordmark contrast.
- Don't add a second saturated colour next to the blue CTA; two blues or a blue-plus-green button pair breaks the restraint.
- Don't set body or UI in Editorial New — the serif is display-only.
- Don't apply heavy drop shadows; elevation here is a whisper (`rgba(0,0,0,0.2) 0 0 18px`) or tone, never a hard card lift.
- Don't leak the app's cold indigo (`#4a4af4`) into storefront marketing — the two palettes are intentionally separate.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Bone Canvas | `#F7F1E8` | Primary warm page ground and banner. |
| 1 | Cream Edge | `#FEFAEF` | Slightly lighter surface for cream-on-cream layering. |
| 2 | Paper White | `#FFFFFF` | Inner card / raised content surface. |
| 3 | Neutral-2 | `#F0F5F7` | Cool utility background (app/product surfaces). |
| Dark | Volcanic Black | `#1C1B1A` | Cinematic dark zone / footer ground. |
| Ink | Warm Ink | `#4A4741` | Dark fill for inverted buttons and input fields. |

## Elevation
Depth is conveyed almost entirely through **warm luminance steps**, not shadow. Surfaces separate by moving between `#F7F1E8`, `#FEFAEF`, and `#FFFFFF` — a fraction of a tone apart. When a shadow is used it is a soft ambient bloom (`rgba(0,0,0,0.2) 0px 0px 18px 0px`) or a 1px inset white highlight (`rgba(255,255,255,0.06)`), never a directional drop. Borders are warm hairlines (`#D3D1CE`), reserved for circular buttons and dividers. The strongest depth cue on the whole page is photographic: the gold ring floating in focus against blurred volcanic rock.

## Imagery
Cinematic, macro product photography is the entire visual argument. The hero pairs a mirror-polished gold Oura ring with rough volcanic lava rock and a single red ladybug — nature-meets-precision, warmth-meets-power — shot with shallow depth of field and soft directional light. The palette of the photography (warm greys fading to near-black rock) is exactly the UI palette, so image and interface are indistinguishable in tone. No illustration, no stock, no icons-as-decoration: real objects, real texture, real light. When photography isn't present, the warm-neutral canvas and the serif carry the mood alone.

## Layout
Full-bleed hero imagery runs edge-to-edge while text and CTAs sit in a centered, generously-spaced column. A utility promo strip sits above a transparent nav (wordmark left, centered menu, circular cart right). Vertical rhythm is calm and roomy (40px+ section gaps). The composition is symmetrical and centered in the hero — product eyebrow, giant serif headline, sans subtitle, then the product photograph anchoring the lower half with the blue CTA pill floating over it. Everything breathes; nothing is dense.

## Typography Signature
The system runs two typographic modes that never blur. **Mode one** is the couture serif — Editorial New, light weight (200–300), set at 80–110px with near-1.0 line-height so "Subtle. Power." reads like a fashion editorial cover. **Mode two** is clinical Swiss sans — AkkuratLL, neutral and rational, handling every functional word. The tension between them *is* the brand: a wellness-luxury promise (serif) delivered with engineering credibility (sans). The signature move is scale contrast — the serif is enormous and the sans that supports it is small and calm, so the headline feels like a held breath and the body like a steady pulse. Warm ink (`#4A4741`) unifies both modes so the page never fractures into two voices tonally, only rhythmically.

## Agent Prompt Guide
## Quick Color Reference
- background: `#F7F1E8` (bone cream) / text: `#4A4741` (warm ink) / surface: `#FFFFFF` / border: `#D3D1CE` / accent: `#5B6550` (sage) / primary action: `#2A72DE` (the single blue CTA pill)

## Example Component Prompts
1. **Hero Section**: Full-bleed hero on a bone-cream `#F7F1E8` canvas. Centered product eyebrow "Oura Ring 5" in AkkuratLL 30px `#4A4741` with a small filled circular badge. Below it, a giant Editorial New serif headline "Subtle. Power." at 110px weight-300 in `#4A4741`, tight line-height. Then an AkkuratLL subtitle at 24px in the same ink. Anchor the lower half with a shallow-depth-of-field product photograph, and float a fully-rounded `#2A72DE` "Explore" pill CTA over it.
2. **Explore CTA Pill**: A fully-rounded button (`radius: 3.35544e+07px`), `#2A72DE` fill, white `#FFFFFF` 16px/400 AkkuratLL label, `12px 24px` padding, hover `#1F72CD`. It must be the only saturated colour on screen.
3. **Warm Card**: `#F7F1E8` fill, `8px` radius, `24px`–`32px` padding, `#4A4741` heading and `#000000` body, no border and no drop shadow — separation only via the warm tone step against a `#FEFAEF` surface behind it.
4. **Top Nav**: Transparent bar over `#F7F1E8`. `Ōura` wordmark left in `#4A4741`; centered AkkuratLL menu (Shop, Health Features, Experience, For Organizations) with dropdown carets; a circular cart button right with a `#D3D1CE` hairline ring.
5. **Dark Feature Block**: `#1C1B1A` volcanic ground, `#F7F1E8` heading in Editorial New, `#FFFFFF` body in AkkuratLL, `#34383B` hairline dividers — a cinematic contrast section that echoes the lava-rock hero.

## Similar Brands
- **Aesop** — warm off-white apothecary neutrals with restrained serif-meets-sans typography and product-as-hero photography.
- **Hermès (digital)** — couture serif display against clinical sans, colour spent with extreme scarcity, luxury conveyed through restraint.
- **Whoop / Ultrahuman** — kindred wearable-wellness category, but Oura trades their dark-tech register for warm editorial calm.
- **Kinfolk / Cereal magazine** — the same bone-paper canvas, enormous light serifs, and generous negative space of slow editorial design.
- **Arc'teryx (brand site)** — cinematic natural-material product photography (rock, metal, light) treated as the primary brand argument.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Marketing / storefront */
  --color-bone: #F7F1E8;
  --color-ink: #4A4741;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-grey: #A8A5A0;
  --color-grey-mid: #696969;
  --color-sage: #5B6550;
  --color-blue: #2A72DE;
  --color-blue-hover: #1F72CD;
  --color-blue-ink: #3860BE;
  --color-volcanic: #1C1B1A;
  --color-hairline: #D3D1CE;
  --color-cream-edge: #FEFAEF;
  --color-border-dark: #34383B;
  --color-btn-grey: #838280;

  /* Colors — App / product design system */
  --color-fill-brand-indigo: #4a4af4;
  --color-primary-light: #A8A9FC;
  --color-primary-dark: #2F2FC1;
  --color-component-button-primary-bg: #ffffff;
  --color-component-button-primary-text: #0c0c14;
  --color-component-button-primary-bg-hover: #e5e5e9;
  --color-component-button-primary-text-hover: #313142;
  --color-greyscale-black-60: #6D6E71;
  --color-ui-background-neutral-2: #F0F5F7;
  --color-ui-text-100: #101820;
  --color-component-overlay-bg: rgba(25, 25, 37, 0.9);

  /* Typography — Families */
  --font-display: 'Editorial New', 'PP Editorial New', Canela, Ogg, serif;
  --font-body: 'AkkuratLL', 'Akkurat', 'Neue Haas Grotesk', Inter, Helvetica, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 13.008px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-title: 24px;
  --text-heading: 30px;
  --text-heading-lg: 32px;
  --text-sub-display: 40px;
  --text-display-sm: 48px;
  --text-display: 80px;
  --text-hero: 110px;
  --leading-tight: 0.95;
  --leading-heading: 1.2;
  --leading-body: 1.55;

  /* Spacing */
  --components-spacing-xxxxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --components-spacing-lg: 24px;
  --spacing-xl: 32px;
  --components-spacing-xxl: 40px;

  /* Border Radius */
  --radius-fine: 4px;
  --radius-chip: 6px;
  --radius-card: 8px;
  --radius-input: 12px;
  --radius-panel: 24px;
  --radius-blob: 90px;
  --radius-pill: 3.35544e+07px;

  /* Shadows */
  --shadow-inset: rgba(0,0,0,0) 0px 0px 0px 0px, rgba(255,255,255,0.06) 0px 1px 0px 0px inset;
  --shadow-float: rgba(0,0,0,0.2) 0px 0px 18px 0px;

  /* Motion */
  --time-faster: 0.1s;
  --curve: cubic-bezier(0.25, 0.1, 0.25, 1);
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Marketing / storefront */
  --color-bone: #F7F1E8;
  --color-ink: #4A4741;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-grey: #A8A5A0;
  --color-grey-mid: #696969;
  --color-sage: #5B6550;
  --color-blue: #2A72DE;
  --color-blue-hover: #1F72CD;
  --color-blue-ink: #3860BE;
  --color-volcanic: #1C1B1A;
  --color-hairline: #D3D1CE;
  --color-cream-edge: #FEFAEF;
  --color-border-dark: #34383B;
  --color-btn-grey: #838280;

  /* Colors — App / product design system */
  --color-fill-brand-indigo: #4a4af4;
  --color-primary-light: #A8A9FC;
  --color-primary-dark: #2F2FC1;
  --color-button-primary-bg: #ffffff;
  --color-button-primary-text: #0c0c14;
  --color-button-primary-bg-hover: #e5e5e9;
  --color-button-primary-text-hover: #313142;
  --color-greyscale-black-60: #6D6E71;
  --color-ui-background-neutral-2: #F0F5F7;
  --color-ui-text-100: #101820;

  /* Typography — Families */
  --font-display: 'Editorial New', 'PP Editorial New', Canela, Ogg, serif;
  --font-body: 'AkkuratLL', 'Akkurat', 'Neue Haas Grotesk', Inter, Helvetica, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 13.008px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-title: 24px;
  --text-heading: 30px;
  --text-heading-lg: 32px;
  --text-sub-display: 40px;
  --text-display-sm: 48px;
  --text-display: 80px;
  --text-hero: 110px;

  /* Spacing */
  --spacing-xxxxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 40px;

  /* Border Radius */
  --radius-fine: 4px;
  --radius-chip: 6px;
  --radius-card: 8px;
  --radius-input: 12px;
  --radius-panel: 24px;
  --radius-blob: 90px;
  --radius-pill: 3.35544e+07px;
}
```