ElevenLabs

# ElevenLabs Design System — layout.md

---

## 0. Quick Reference

**Stack:** Next.js · Tailwind CSS · shadcn/ui · Token source: extracted-css-vars (388 properties, high confidence)
**How to apply:** Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.

```css
/* ── Core Colour Tokens ── */
--black: #000;                          /* Primary text, primary button bg */
--white-50: #FFF;                       /* Inverse text, light surface */
--page-background-color: #FDFCFC;       /* App-level background (eggshell white) */
--neutral-200: #DCDCDC;                 /* Subtle dividers */
--neutral-400: #949494;                 /* Placeholder / muted text */
--neutral-600: #6E6E6E;                 /* Secondary text */
--shadcn-border: 0 0% 89.8%;           /* Default border (HSL — wrap in hsl()) */
--shadcn-destructive: 0 84.2% 60.2%;   /* Error / destructive (HSL) */
--orange-500: #F36F1C;                  /* Accent hover / highlight colour */

/* ── Typography ── */
--font-waldenburg: "Waldenburg", "Waldenburg Fallback", sans-serif;   /* Display, headings, UI labels */
--font-waldenburg-fh: "WaldenburgFH", "WaldenburgFH Fallback", sans-serif; /* Bold condensed UI */
--font-inter: "Inter", "Inter Fallback", sans-serif;                  /* Body, paragraphs, descriptions */

/* ── Spacing ── */
--space-xs: 6px;   --space-sm: 8px;   --space-md: 12px;
--space-lg: 16px;  --space-xl: 24px;  --space-2xl: 32px;  --space-3xl: 48px;

/* ── Radius (pill-first brand) ── */
--radius-sm: 18px;    /* Tag / chip */
--radius-md: 50px;    /* Standard button — pill */
--radius-full: 100px; /* Toggle / badge */

/* ── Motion ── */
--duration-fast: 0.15s;  --duration-base: 0.3s;  --ease-default: ease;

/* ── Layout ── */
--container-width: min(100%, 81.5rem);
--contextual-nav-height: 4rem;
```

```tsx
// Primary button — correct token usage
<button
  className="rounded-full bg-black text-white px-6 py-3 font-bold
             transition-colors duration-[0.15s] ease-[ease]
             hover:bg-[var(--neutral-800)] focus-visible:outline
             focus-visible:outline-[var(--black)] disabled:opacity-40
             disabled:cursor-default"
  style={{ fontFamily: 'var(--font-waldenburg-fh)', letterSpacing: '0.03em' }}
>
  Get Started
</button>
```

**NEVER rules:**
1. NEVER use `font-family: Inter` or `font-family: Arial` for headings — Waldenburg is the brand display face
2. NEVER apply `border-radius: 8px` to buttons — ElevenLabs uses pill-shaped buttons (`--radius-md: 50px`)
3. NEVER hardcode `#000000` or `#ffffff` — use `var(--black)` and `var(--white-50)`
4. NEVER use spacing values off the token scale (6 / 8 / 12 / 16 / 24 / 32 / 48px)
5. NEVER use `hsl()` values from shadcn tokens as raw hex — always wrap: `hsl(var(--shadcn-border))`
6. NEVER construct Tailwind classes dynamically (e.g. `` `bg-${color}` ``) — use `bg-[var(--token)]` instead
7. NEVER omit hover, focus-visible, and disabled states on interactive elements

**Full design system → see layout.md**

---

## 1. Design Direction & Philosophy

### Character & Mood
ElevenLabs presents as a **precision-engineered, technology-forward AI platform** with a restrained editorial aesthetic. The visual language is confident and minimal — black on near-white, large typographic hierarchies, generous whitespace, and controlled use of accent colour. The tone is professional but approachable: a research-grade product that does not feel cold.

### Typographic Identity
The brand's most distinctive choice is **Waldenburg** — a custom-licensed German grotesque. Three variants are in use:
- **Waldenburg** (300, 400, 700) — editorial headings, body-adjacent subheads
- **WaldenburgFH** (700 condensed) — bold UI labels, CTA copy, navigation, uppercase UI elements
- **Inter** (variable 100–900) — body copy, paragraph text, descriptions, form fields

This dual-typeface system creates a clear hierarchy: Waldenburg for *brand voice*, Inter for *reading comfort*.

### What This Design Explicitly Rejects
- **Rounded cards with drop shadows** — surfaces are flat or very subtly elevated; cards use thin borders, not shadows
- **Bright brand colour as background** — the primary palette is achromatic; colour appears as small accents, status indicators, or data visualisation only
- **Heavy button fills in the hero** — CTAs use pill outlines or dark fills, never colourful fills as primary brand expression
- **Warm, friendly rounded corners** — even though pill buttons are used, they signal *precision* not playfulness; no 8px card radius
- **Decorative gradients** — any gradient use is subtle and purposeful (e.g. audio waveform visualisations)
- **Dense information hierarchy** — sections breathe; large type, large whitespace, few elements per visual zone

### What This Design Does
- Uses **uppercase small-caps UI labels** (WaldenburgFH, `letter-spacing: 0.03em–0.05em`) to organise UI chrome
- Uses **scale transforms on hover** (1.02×–1.075×) instead of colour shifts as primary interactive feedback
- Applies **negative letter-spacing** on large headings (`-0.02em` to `-0.03em`) for tight, editorial display type
- Reserves **orange** (`--orange-500: #F36F1C`) as the single warm accent — used sparingly for hover states and highlights

---

## 2. Colour System

### Tier 1 — Primitive Palette

```css
/* ── Neutrals ── */
--black: #000;
--white-50: #FFF;
--white-200: #F5F3F1;
--eggshell: #FDFCFC;             /* = --page-background-color */
--neutral-50:  #F2F2F2;
--neutral-100: #E5E5E5;
--neutral-200: #DCDCDC;
--neutral-300: #BDBDBD;
--neutral-400: #949494;
--neutral-500: #767676;
--neutral-600: #6E6E6E;
--neutral-700: #525252;
--neutral-800: #464646;
--neutral-900: #3D3D3D;
--neutral-950: #1C1C1C;

/* ── Orange (primary accent) ── */
--orange-50:  #FFF7ED;
--orange-100: #FEECD6;
--orange-200: #FCD5AC;
--orange-300: #F9B778;
--orange-400: #F58633;
--orange-500: #F36F1C;   /* KEY: accent hover / highlight */
--orange-600: #E45512;
--orange-700: #BD3F11;
--orange-800: #963316;
--orange-900: #792C15;
--orange-950: #492104;

/* ── Blue ── */
--blue-50: #F2F5FC;  --blue-100: #E1E8F9;  --blue-200: #C8D5F4;
--blue-300: #A1BAEC; --blue-400: #7294E3;  --blue-500: #5D79DF;
--blue-600: #4056CE; --blue-700: #3C48B9;  --blue-800: #384094;
--blue-900: #353B73; --blue-950: #252846;

/* ── Green ── */
--green-50: #ECFDF4;  --green-100: #D1FAE3;  --green-200: #A7F3CC;
--green-300: #6EE7B1; --green-400: #2DD28D;  --green-500: #10B978;
--green-600: #059661; --green-700: #047851;  --green-800: #065F41;
--green-900: #064E37; --green-950: #022C20;

/* ── Red ── */
--red-50: #FEF3F2;  --red-100: #FDE4E3;  --red-200: #FDCDCB;
--red-300: #FAABA7; --red-400: #F57A74;  --red-500: #EB524B;
--red-600: #D7332B; --red-700: #B52720;  --red-800: #96231E;
--red-900: #7D231F; --red-950: #440D0B;

/* ── Yellow ── */
--yellow-50: #FCFCEA; --yellow-100: #FAF9C7; --yellow-200: #F6F092;
--yellow-300: #EFDE44; --yellow-400: #EACE25; --yellow-500: #DAB718;
--yellow-600: #BC8F12; --yellow-700: #966812; --yellow-800: #7D5316;
--yellow-900: #6A4419; --yellow-950: #3E240A;

/* ── Cyan ── */
--cyan-50: #EEFBFD; --cyan-100: #D3F4FA; --cyan-200: #ADEAF4;
--cyan-300: #74D9EC; --cyan-400: #4EC7E0; --cyan-500: #19A2C1;
--cyan-600: #1783A3; --cyan-700: #1A6984; --cyan-800: #1E566C;
--cyan-900: #1D495C; --cyan-950: #0D2F3F;

/* ── Teal ── */
--teal-50: #EAFDF9;  --teal-100: #CEF8EF;  --teal-200: #9EF0DE;
--teal-300: #66E1CC; --teal-400: #37C8B5;  --teal-500: #1FAD9D;
--teal-600: #168D81; --teal-700: #166F67;  --teal-800: #165A55;
--teal-900: #174A46; --teal-950: #072C2B;

/* ── Magenta ── */
--magenta-50: #FCF2FB; --magenta-100: #FBE4FB; --magenta-200: #F8D3F5;
--magenta-300: #F0B2EA; --magenta-400: #E273D5; --magenta-500: #D65CC8;
--magenta-600: #B83DA5; --magenta-700: #973086; --magenta-800: #7A296B;
--magenta-900: #642656; --magenta-950: #3F0D35;

/* ── Purple ── */
--purple-50: #FBF6FE; --purple-100: #F6EBFC; --purple-200: #EEDBF9;
--purple-300: #E1BEF4; --purple-400: #CF94EC; --purple-500: #C47DE5;
--purple-600: #A94BD2; --purple-700: #9139B7; --purple-800: #7A3396;
--purple-900: #632A79; --purple-950: #32123E;

/* ── Overlays ── */
--overlay-darker-plus: rgba(0, 0, 0, 0.4);
--transparent: transparent;
--current: currentColor;
--inherit: inherit;
```

### Tier 2 — Semantic Aliases

```css
/* ── Surface & Background ── */
--page-background-color: #FDFCFC;    /* App root background — near-white eggshell */
---shadcn-background: 0 0% 100%;     /* shadcn component canvas — pure white (use: hsl(var(---shadcn-background))) */
--shadcn-card: 0 0% 100%;            /* Card surface (HSL) */
--shadcn-popover: 0 0% 100%;         /* Popover / tooltip background (HSL) */
--shadcn-muted: 0 0% 96.1%;          /* Muted/secondary surface (HSL) */

/* ── Text ── */
--shadcn-foreground: 0 0% 3.9%;           /* Primary text — near-black (HSL) */
--shadcn-card-foreground: 0 0% 3.9%;      /* Text on card surfaces (HSL) */
--shadcn-popover-foreground: 0 0% 3.9%;   /* Text in popovers (HSL) */
--shadcn-muted-foreground: 0 0% 45.1%;    /* Subdued / helper text (HSL) */
--shadcn-primary-foreground: 0 0% 98%;    /* Text on primary (dark) buttons (HSL) */
--shadcn-secondary-foreground: 0 0% 9%;   /* Text on secondary surfaces (HSL) */
--shadcn-accent-foreground: 0 0% 9%;      /* Text on accent surfaces (HSL) */
--shadcn-destructive-foreground: 0 0% 98%; /* Text on destructive elements (HSL) */

/* ── Interactive ── */
--shadcn-primary: 0 0% 9%;           /* Primary button / action background — near-black (HSL) */
--shadcn-secondary: 0 0% 96.1%;      /* Secondary button background (HSL) */
--shadcn-accent: 0 0% 96.1%;         /* Accent surface (hover highlight bg) (HSL) */
--shadcn-ring: 0 0% 3.9%;            /* Focus ring colour (HSL) */
--shadcn-input: 0 0% 89.8%;          /* Input border colour (HSL) */
--shadcn-border: 0 0% 89.8%;         /* Default border (HSL) */

/* ── Status ── */
--shadcn-destructive: 0 84.2% 60.2%; /* Error / destructive state (HSL) */
/* success surface  → var(--green-50)   #ECFDF4 */
/* warning surface  → var(--orange-50)  #FFF7ED */
/* error surface    → var(--red-50)     #FEF3F2 */
/* info surface     → var(--blue-50)    #F2F5FC */
```

### Tier 3 — Component Tokens

```css
/* ── Buttons ── */
/* primary bg      */ hsl(var(--shadcn-primary))         /* #171717 near-black */
/* primary text    */ hsl(var(--shadcn-primary-foreground)) /* #FAFAFA near-white */
/* primary hover   */ var(--neutral-800)                  /* #464646 */
/* secondary bg    */ hsl(var(--shadcn-secondary))        /* #F5F5F5 */
/* secondary text  */ hsl(var(--shadcn-secondary-foreground)) /* #171717 */
/* focus ring      */ hsl(var(--shadcn-ring))             /* #0A0A0A */

/* ── Form Inputs ── */
/* input border    */ hsl(var(--shadcn-input))            /* #E5E5E5 */
/* input bg        */ hsl(var(---shadcn-background))      /* #FFFFFF */
/* input text      */ hsl(var(--shadcn-foreground))       /* #0A0A0A */

/* ── Nav ── */
/* nav height      */ var(--contextual-nav-height)        /* 4rem = 64px */
/* nav bg (default)*/ transparent                         /* scrolls to white */
```

### Colour Roles — Quick Reference Table

| Role | Token | Value |
|---|---|---|
| Page background | `--page-background-color` | `#FDFCFC` |
| Primary action bg | `hsl(var(--shadcn-primary))` | `≈ #171717` |
| Primary action text | `hsl(var(--shadcn-primary-foreground))` | `≈ #FAFAFA` |
| Body text | `var(--black)` | `#000` |
| Muted text | `hsl(var(--shadcn-muted-foreground))` | `≈ #737373` |
| Border default | `hsl(var(--shadcn-border))` | `≈ #E5E5E5` |
| Accent hover | `var(--orange-500)` | `#F36F1C` |
| Destructive | `hsl(var(--shadcn-destructive))` | `≈ #EF4444` |
| Success surface | `var(--green-50)` | `#ECFDF4` |
| Warning surface | `var(--orange-50)` | `#FFF7ED` |

---

## 3. Typography System

### Font Stacks

```css
/* ── Font Family Aliases ── */
--waldenburg:    var(--font-waldenburg);      /* Waldenburg, "Waldenburg Fallback", sans-serif */
--waldenburgFH:  var(--font-waldenburg-fh);  /* WaldenburgFH 700 condensed — bold UI chrome */
--jetbrainsMono: var(--font-jetbrains-mono); /* Monospace — code blocks */
--inter:         var(--font-inter);          /* Inter variable — body copy */
```

### Composite Typography Tokens

Each group bundles font-family + font-size + font-weight + line-height + letter-spacing. NEVER split these apart.

```css
/* ══ DISPLAY ══ */
/* --f-display-01 — Hero display, largest headline */
--f-display-01-font-family:    var(--font-waldenburg-fh);
--f-display-01-font-size:      6.25rem;    /* 100px */
--f-display-01-font-weight:    700;
--f-display-01-line-height:    95%;
/* letter-spacing: not set — tightly tracked by line-height */

/* --f-display-02 — Secondary display */
--f-display-02-font-family:    var(--font-waldenburg-fh);
--f-display-02-font-size:      4rem;       /* 64px */
--f-display-02-font-weight:    700;
--f-display-02-line-height:    100%;

/* ══ HEADINGS ══ */
/* --f-heading-01 — Page-level H1 */
--f-heading-01-font-family:    var(--font-waldenburg);
--f-heading-01-font-size:      3.75rem;    /* 60px */
--f-heading-01-font-weight:    300;
--f-heading-01-line-height:    105%;
--f-heading-01-letter-spacing: -0.03em;

/* --f-heading-02 — Section H2 */
--f-heading-02-font-family:    var(--font-waldenburg);
--f-heading-02-font-size:      3rem;       /* 48px */
--f-heading-02-font-weight:    300;
--f-heading-02-line-height:    110%;
--f-heading-02-letter-spacing: -0.03em;

/* --f-heading-03 — Sub-section H3 */
--f-heading-03-font-family:    var(--font-waldenburg);
--f-heading-03-font-size:      2.25rem;    /* 36px */
--f-heading-03-font-weight:    300;
--f-heading-03-line-height:    120%;
--f-heading-03-letter-spacing: -0.02em;

/* --f-heading-04 — Card / feature heading */
--f-heading-04-font-family:    var(--font-waldenburg);
--f-heading-04-font-size:      1.5rem;     /* 24px */
--f-heading-04-font-weight:    400;
--f-heading-04-line-height:    130%;
--f-heading-04-letter-spacing: -0.01em;

/* --f-heading-05 — Small heading */
--f-heading-05-font-family:    var(--font-waldenburg);
--f-heading-05-font-size:      1.25rem;    /* 20px */
--f-heading-05-font-weight:    400;
--f-heading-05-line-height:    135%;
--f-heading-05-letter-spacing: 0em;

/* ══ SUBHEADS ══ */
/* --f-subhead-01 — Bold section label, large */
--f-subhead-01-font-family:    var(--font-waldenburg);
--f-subhead-01-font-size:      1.375rem;   /* 22px */
--f-subhead-01-font-weight:    700;
--f-subhead-01-line-height:    140%;
--f-subhead-01-letter-spacing: 0.01em;

/* --f-subhead-02 — Bold section label, medium */
--f-subhead-02-font-family:    var(--font-waldenburg);
--f-subhead-02-font-size:      1.125rem;   /* 18px */
--f-subhead-02-font-weight:    700;
--f-subhead-02-line-height:    140%;
--f-subhead-02-letter-spacing: 0.01em;

/* --f-subhead-03 — Bold label, base */
--f-subhead-03-font-family:    var(--font-waldenburg);
--f-subhead-03-font-size:      1rem;       /* 16px */
--f-subhead-03-font-weight:    700;
--f-subhead-03-line-height:    140%;
--f-subhead-03-letter-spacing: 0.01em;

/* --f-subhead-04 — Regular label, base */
--f-subhead-04-font-family:    var(--font-waldenburg);
--f-subhead-04-font-size:      1rem;
--f-subhead-04-font-weight:    400;
--f-subhead-04-line-height:    140%;

/* --f-subhead-05 — Small label */
--f-subhead-05-font-family:    var(--font-waldenburg);
--f-subhead-05-font-size:      0.875rem;   /* 14px */
--f-subhead-05-font-weight:    400;
--f-subhead-05-line-height:    120%;

/* ══ DESCRIPTIONS ══ */
/* --f-description-01 — Lead / intro text, Waldenburg */
--f-description-01-font-family:    var(--font-waldenburg);
--f-description-01-font-size:      1.375rem;   /* 22px */
--f-description-01-font-weight:    400;
--f-description-01-line-height:    130%;
--f-description-01-letter-spacing: -0.02em;

/* --f-description-02 — Supporting text, Inter */
--f-description-02-font-family:    var(--font-inter);
--f-description-02-font-size:      1.125rem;   /* 18px */
--f-description-02-font-weight:    400;
--f-description-02-line-height:    140%;
--f-description-02-letter-spacing: 0.01em;

/* --f-description-03 — Base description, Inter */
--f-description-03-font-family:    var(--font-inter);
--f-description-03-font-size:      1rem;
--f-description-03-font-weight:    400;
--f-description-03-line-height:    140%;
--f-description-03-letter-spacing: 0.01em;

/* --f-description-04 — Small description, Inter */
--f-description-04-font-family:    var(--font-inter);
--f-description-04-font-size:      0.875rem;   /* 14px */
--f-description-04-font-weight:    400;
--f-description-04-line-height:    140%;
--f-description-04-letter-spacing: 0.01em;

/* --f-description-05 — Alternate base, Inter */
--f-description-05-font-family:    var(--font-inter);
--f-description-05-font-size:      1rem;
--f-description-05-font-weight:    400;
--f-description-05-line-height:    140%;
--f-description-05-letter-spacing: 0.01em;

/* ══ PARAGRAPHS ══ */
/* --f-paragraph-01 — Body copy, large */
--f-paragraph-01-font-family:    var(--font-inter);
--f-paragraph-01-font-size:      1.125rem;   /* 18px */
--f-paragraph-01-font-weight:    400;
--f-paragraph-01-line-height:    140%;
--f-paragraph-01-letter-spacing: 0em;

/* --f-paragraph-02 — Body copy, base */
--f-paragraph-02-font-family:    var(--font-inter);
--f-paragraph-02-font-size:      1rem;
--f-paragraph-02-font-weight:    400;
--f-paragraph-02-line-height:    140%;
--f-paragraph-02-letter-spacing: 0em;

/* --f-paragraph-03 — Body copy, small */
--f-paragraph-03-font-family:    var(--font-inter);
--f-paragraph-03-font-size:      0.875rem;
--f-paragraph-03-font-weight:    400;
--f-paragraph-03-line-height:    140%;
--f-paragraph-03-letter-spacing: 0em;

/* --f-paragraph-04 — Body copy, xs */
--f-paragraph-04-font-family:    var(--font-inter);
--f-paragraph-04-font-size:      0.75rem;    /* 12px */
--f-paragraph-04-font-weight:    400;
--f-paragraph-04-line-height:    140%;
--f-paragraph-04-letter-spacing: 0em;

/* --f-body-01 — Long-form body copy */
--f-body-01-font-family:    var(--font-inter);
--f-body-01-font-size:      1.125rem;
--f-body-01-font-weight:    400;
--f-body-01-line-height:    160%;           /* Generous for readability */

/* ══ UI LABELS ══ */
/* --f-ui-01 — Primary UI label, uppercase */
--f-ui-01-font-family:    var(--font-waldenburg-fh);
--f-ui-01-font-size:      1.125rem;
--f-ui-01-font-weight:    700;
--f-ui-01-line-height:    110%;
--f-ui-01-letter-spacing: 0.03em;
--f-ui-01-text-transform: uppercase;

/* --f-ui-02 — Secondary UI label, Inter */
--f-ui-02-font-family:    var(--font-inter);
--f-ui-02-font-size:      0.875rem;
--f-ui-02-font-weight:    400;
--f-ui-02-line-height:    140%;
--f-ui-02-letter-spacing: 0.02em;

/* --f-ui-03 — Condensed uppercase label */
--f-ui-03-font-family:    var(--font-waldenburg-fh);
--f-ui-03-font-size:      0.875rem;
--f-ui-03-font-weight:    700;
--f-ui-03-line-height:    110%;
--f-ui-03-letter-spacing: 0.05em;
--f-ui-03-text-transform: uppercase;

/* --f-ui-04 — Smallest uppercase label */
--f-ui-04-font-family:    var(--font-waldenburg-fh);
--f-ui-04-font-size:      0.75rem;
--f-ui-04-font-weight:    700;
--f-ui-04-line-height:    110%;
--f-ui-04-letter-spacing: 0.05em;
--f-ui-04-text-transform: uppercase;

/* --f-ui-05 — Small Inter label */
--f-ui-05-font-family:    var(--font-inter);
--f-ui-05-font-size:      0.75rem;
--f-ui-05-font-weight:    400;
--f-ui-05-line-height:    140%;
--f-ui-05-letter-spacing: 0.02em;

/* --f-ui-06 — WaldenburgFH, small */
--f-ui-06-font-family:    var(--font-waldenburg-fh);
--f-ui-06-font-size:      0.875rem;
--f-ui-06-font-weight:    700;
--f-ui-06-line-height:    110%;
--f-ui-06-letter-spacing: 0.05em;

/* --f-ui-07 — Micro label */
--f-ui-07-font-family:    var(--font-inter);
--f-ui-07-font-size:      0.625rem;         /* 10px */
--f-ui-07-font-weight:    400;
--f-ui-07-line-height:    140%;
--f-ui-07-letter-spacing: 0.02em;

/* --f-ui-08 — Micro Inter */
--f-ui-08-font-family:    var(--font-inter);
--f-ui-08-font-size:      0.75rem;
--f-ui-08-font-weight:    400;
--f-ui-08-line-height:    140%;

/* ══ BLOG ══ */
/* --f-description-blog — Blog description */
--f-description-blog-font-family:    var(--font-inter);
--f-description-blog-font-size:      1.0625rem;   /* 17px */
--f-description-blog-font-weight:    400;
--f-description-blog-line-height:    30px;
--f-description-blog-letter-spacing: 0.01em;

/* --f-body-blog — Blog body */
--f-body-blog-font-family:    var(--font-inter);
--f-body-blog-font-size:      1.0625rem;
--f-body-blog-font-weight:    400;
--f-body-blog-line-height:    30px;
```

### Typography Pairing Rules

| Context | Token to use | Why |
|---|---|---|
| Hero / display headline | `--f-display-01` or `--f-heading-01` | WaldenburgFH 700 or Waldenburg 300 |
| Section headings (H2) | `--f-heading-02` / `--f-heading-03` | Waldenburg light-weight, negative tracking |
| Feature card titles | `--f-heading-04` / `--f-heading-05` | Waldenburg regular |
| Body / paragraphs | `--f-paragraph-01` – `--f-paragraph-03` | Inter for reading comfort |
| CTA button text | `--f-ui-01` | WaldenburgFH 700, uppercase, 0.03em tracking |
| Navigation links | `--f-ui-03` / `--f-ui-04` | WaldenburgFH 700 uppercase |
| Helper / caption | `--f-ui-05` / `--f-ui-07` | Inter, small, positive tracking |
| Code blocks | `var(--jetbrainsMono)` | Never use Inter for code |

**NEVER use Inter for display headings.** The Waldenburg–Inter split is the fundamental brand typeface rule.

---

## 4. Spacing & Layout

```css
/* ── Spacing Scale ── */
--space-xs:  6px;   /* Tight internal padding (icon gaps, badge padding) */
--space-sm:  8px;   /* Input internal padding, small gaps */
--space-md:  12px;  /* Component internal padding standard */
--space-lg:  16px;  /* Section element gap, card internal padding */
--space-xl:  24px;  /* Between related components */
--space-2xl: 32px;  /* Between sections internally */
--space-3xl: 48px;  /* Between major sections */

/* ── Layout Container ── */
--container-width:          min(100%, 81.5rem);    /* Max 1304px, full below */
--container-width-absolute: min(100vw, 81.5rem);   /* VW-based variant */

/* ── Gutters ── */
--spacing-outer-gutter:      4rem;        /* 64px — outer page margin */
--spacing-inner-gutter:      1.25rem;     /* 20px — internal column gap */
--spacing-container-gutter:  0.625rem;    /* 10px — tight container padding */
--spacing-outer-content:     6.25rem;     /* 100px — vertical section padding */
--spacing-content-wide:      10rem;       /* 160px — wide content inset */
--spacing-content-xwide:     12.5rem;     /* 200px — extra-wide content inset */

/* ── Raw Gutter Aliases (from computed) ── */
--inner-gutter:  20px;   /* = --spacing-inner-gutter */
--outer-gutter:  64px;   /* = --spacing-outer-gutter */

/* ── Grid ── */
--grid-columns: 12;      /* 12-column grid */

/* ── Nav ── */
--contextual-nav-height: 4rem;   /* 64px — sticky nav height */

/* ── Radius ── */
--radius-sm:   18px;    /* Chip / tag pill */
--radius-md:   50px;    /* Standard button pill — BRAND DEFAULT */
--radius-lg:   50%;     /* Circular (avatar, orb button) */
--radius-full: 100px;   /* Toggle / badge full-pill */
--shadcn-radius: 0.5rem; /* 8px — shadcn component default (override as needed) */
```

### Breakpoints

| Name | Value | Notes |
|---|---|---|
| `sm` | `480px` | Mobile → narrow viewport |
| `lg` | `1024px` | Tablet / desktop threshold |

### Layout Decision Rules

- **Flex row** for nav items, button groups, icon+label pairs, card rows
- **CSS Grid 12-col** for page-level section layouts (use `--grid-columns: 12`)
- **Full-width** hero and media sections; **contained** (`--container-width`) for text content
- **Outer gutter** (`--outer-gutter: 64px`) applied to left/right of the container at desktop
- Below `480px`: collapse multi-column to single column; reduce outer gutter to `--space-lg` (16px)
- Between `480px` and `1024px`: 2-column grid for feature cards

---

## 5. Page Structure & Layout Patterns

> **Note:** No page screenshots were supplied. All section ordering and layout details below are inferred from the layout digest, component inventory, computed styles, and CSS variable analysis. Rows marked **(inferred)** are probable but not visually confirmed.

### 5.1 Section Map

| # | Section | Layout Type | Approx. Height | Key Elements |
|---|---|---|---|---|
| 1 | Nav / Header | Flex row, sticky | 64px (`--contextual-nav-height`) | Logo, nav links (WaldenburgFH uppercase), CTA button (pill) |
| 2 | Hero | Full-width, centred column | ~80–100vh (inferred) | Display headline (f-display-01/f-heading-01), sub-description (f-description-01), CTA button pair (inferred) |
| 3 | Social Proof / Logos | Contained, flex row | ~120px (inferred) | "Trusted by" label + logo strip; auto-scrolling (inferred from `animated-social-proof-text`) |
| 4 | Feature Grid — ElevenCreative / ElevenAgents | 2-col or 3-col grid, contained | ~600px (inferred) | Feature cards with chip labels (radius-sm 18px), icon, heading (f-heading-04), description (f-description-03) |
| 5 | Product Showcase — Text to Speech / API | Alternating 2-col (text + visual), contained | ~500px per row (inferred) | Section heading (f-heading-02), paragraph (f-paragraph-01), CTA link, product visual/demo |
| 6 | Tabbed Product Demo | Contained, tab navigation + panel | ~600px (inferred) | Tabs (WaldenburgHF, 16px/700, 18px padding), demo canvas |
| 7 | Blog / News Cards | 3-col grid, contained | ~500px (inferred) | Card image, heading (f-heading-04/f-heading-05), blog description (f-description-blog), date meta (f-ui-05) |
| 8 | CTA Banner | Full-width, centred | ~300px (inferred) | Large display heading, primary CTA button (black fill, pill, white text) |
| 9 | Footer | 4–5 col grid, contained | ~300px (inferred) | Logo, nav link columns (f-ui-03 uppercase), legal copy (f-ui-05) |

### 5.2 Layout Patterns

**Navigation:**
- `display: block` (role_navigation computed), full-width bar
- Items: flex row, centred vertically, gap: `--space-lg` (16px)
- Height fixed at `var(--contextual-nav-height)` = 4rem
- CTA button: `border-radius: 9999px` (pill), `padding: 6px` inner, positioned right-most

**Feature Cards:**
- Grid: 3 columns at 1024px+, 2 columns at 480–1024px, 1 column below 480px
- Card padding: `--space-xl` (24px) internal
- Chip / category label: `border-radius: var(--radius-sm)` = 18px, `padding: var(--space-sm) var(--space-md)` (8px 12px)
- Heading: `--f-heading-04` (Waldenburg 400, 1.5rem, -0.01em tracking)
- Gap between cards: `--space-xl` (24px)

**Section Text Blocks:**
- Max-width constrained to `--container-width` with `--outer-gutter` side margins
- Section heading: `--f-heading-02` or `--f-heading-03`
- Body text: `--f-paragraph-01` or `--f-description-02`
- Vertical rhythm between heading and body: `--space-xl` (24px)

**Alternating Content Rows:**
- 2-column flex, `gap: --space-2xl` (32px) or `--space-3xl` (48px)
- Column ratio: approximately 50/50 or 55/45 (inferred — no visual confirmation)
- Odd rows: text left, visual right; even rows: visual left, text right (inferred)

### 5.3 Visual Hierarchy

- **H1 at computed 48px, weight 300 (Waldenburg light)** — large, editorial, negative-tracked. This is deliberately un-bold.
- **CTAs are black-fill pill buttons** with near-white text — high contrast, not colourful
- **Orange (`--orange-500: #F36F1C`)** appears only on hover states and accent highlights — never as a fill on primary CTAs
- **Scale transforms** (hover:scale-105, hover:scale-[1.02]) are used as primary interactive feedback instead of colour change
- **Whitespace rhythm:** sections separated by `--spacing-outer-content: 6.25rem` (100px) vertical padding
- **Chip labels** (18px radius) categorise feature cards and appear above headings
- **Logo strip** uses muted/greyscale treatment (inferred from "trusted by leading" social proof pattern)

### 5.4 Content Patterns

**Feature Card Pattern (repeating):**
```
[Category Chip — WaldenburgFH uppercase, radius-sm]
[Heading — f-heading-04, Waldenburg 400]
[Description — f-description-03, Inter 400]
[Optional CTA link — f-ui-02 or inline text link]
```

**Section Header Pattern (repeating):**
```
[Eyebrow label — f-ui-03, WaldenburgFH, uppercase, orange or black]
[H2 Heading — f-heading-02 or f-heading-03, Waldenburg 300]
[Sub-description — f-description-01 or f-paragraph-01, Inter]
[CTA button or link]
```

**Blog Card Pattern:**
```
[Image — hover:scale-1.075 zoom effect]
[Date meta — f-ui-05, Inter, neutral-400]
[Title — f-heading-04 or f-heading-05]
[Excerpt — f-description-blog, Inter 17px]
```

---

## 6. Component Patterns

### 6.1 Button

**Anatomy:** `[leading icon?] [label text] [trailing icon?]`

**Token Mappings:**

| State | Background | Text | Border | Transform |
|---|---|---|---|---|
| default | `hsl(var(--shadcn-primary))` ≈ `#171717` | `hsl(var(--shadcn-primary-foreground))` ≈ `#FAFAFA` | none | scale(1) |
| hover | `var(--neutral-800)` `#464646` | same | none | scale(1) |
| focus-visible | same | same | outline `hsl(var(--shadcn-ring))` 2px offset 2px | same |
| active | `var(--neutral-900)` `#3D3D3D` | same | none | scale(0.98) |
| disabled | `hsl(var(--shadcn-primary))` at 40% opacity | same at 40% | none | none |
| loading | same as default | hidden (spinner shown) | none | none |

**Typography:** `--f-ui-01` (WaldenburgFH 700, 1.125rem, uppercase, 0.03em tracking)
**Radius:** `var(--radius-md)` = 50px (pill)
**Padding:** `--space-md` `--space-xl` = `12px 24px`
**Transition:** `color, background-color, border-color var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1)`

```tsx
import { forwardRef, ButtonHTMLAttributes } from 'react'
import { Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'outline'
  size?: 'sm' | 'md' | 'lg'
  isLoading?: boolean
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = 'primary', size = 'md', isLoading, disabled, children, ...props }, ref) => {
    const base = [
      'inline-flex items-center justify-center gap-2',
      'font-bold uppercase tracking-[0.03em]',
      'rounded-[50px]',           /* var(--radius-md) */
      'transition-[color,background-color,border-color]',
      'duration-[0.15s]',         /* var(--duration-fast) */
      'ease-[ease]',              /* var(--ease-default) */
      'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
      'focus-visible:outline-[var(--black)]',
      'disabled:opacity-40 disabled:cursor-default',
      'active:scale-[0.98]',
    ]

    const variants = {
      primary:   'bg-[var(--black)] text-[var(--white-50)] hover:bg-[var(--neutral-800)]',
      secondary: 'bg-[hsl(var(--shadcn-secondary))] text-[hsl(var(--shadcn-secondary-foreground))] hover:bg-[var(--neutral-100)]',
      outline:   'bg-transparent text-[var(--black)] border border-[hsl(var(--shadcn-border))] hover:bg-[var(--neutral-50)]',
    }

    const sizes = {
      sm: 'px-[var(--space-md)] py-[var(--space-xs)] text-[0.75rem]',    /* 12px 6px */
      md: 'px-[var(--space-xl)] py-[var(--space-md)] text-[0.875rem]',   /* 24px 12px */
      lg: 'px-[var(--space-2xl)] py-[var(--space-lg)] text-[1.125rem]',  /* 32px 16px */
    }

    return (
      <button
        ref={ref}
        disabled={disabled || isLoading}
        className={cn(base, variants[variant], sizes[size], className)}
        style={{ fontFamily: 'var(--font-waldenburg-fh)' }}
        {...props}
      >
        {isLoading ? (
          <>
            <Loader2
              className="animate-spin"
              size={16}
              aria-hidden="true"
            />
            <span className="sr-only">Loading…</span>
            <span aria-hidden="true">{children}</span>
          </>
        ) : children}
      </button>
    )
  }
)
Button.displayName = 'Button'

export default Button
```

---

### 6.2 Input

**Anatomy:** `[label] [input field] [helper text | error message]`

**Token Mappings:**

| State | Border | Background | Text | Label |
|---|---|---|---|---|
| default | `hsl(var(--shadcn-input))` ≈ `#E5E5E5` | `hsl(var(---shadcn-background))` `#FFF` | `var(--black)` | `var(--neutral-600)` |
| hover | `var(--neutral-400)` | same | same | same |
| focus | `hsl(var(--shadcn-ring))` ≈ `#0A0A0A` 2px | same | same | `var(--black)` |
| disabled | `var(--neutral-100)` | `var(--neutral-50)` | `var(--neutral-400)` | `var(--neutral-400)` |
| error | `hsl(var(--shadcn-destructive))` | same | same | `hsl(var(--shadcn-destructive))` |

**Radius:** `var(--radius-sm)` = 18px
**Padding:** `var(--space-sm) var(--space-lg)` = `8px 16px`
**Typography:** `--f-description-03` (Inter 400, 1rem, 0.01em)

```tsx
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string
  error?: string
  helperText?: string
}

function Input({ label, error, helperText, disabled, id, ...props }: InputProps) {
  return (
    <div className="flex flex-col gap-[var(--space-xs)]">
      {label && (
        <label
          htmlFor={id}
          className={cn(
            'text-[0.875rem] font-medium',
            disabled ? 'text-[var(--neutral-400)]' : 'text-[var(--black)]'
          )}
          style={{ fontFamily: 'var(--font-inter)' }}
        >
          {label}
        </label>
      )}
      <input
        id={id}
        disabled={disabled}
        className={cn(
          'w-full rounded-[18px] px-[var(--space-lg)] py-[var(--space-sm)]',
          'border bg-white text-[var(--black)]',
          'text-[1rem] leading-[140%] tracking-[0.01em]',
          'transition-[border-color] duration-[0.15s] ease-[ease]',
          'placeholder:text-[var(--neutral-400)]',
          'focus:outline-none focus:border-[var(--black)] focus:ring-0',
          'hover:border-[var(--neutral-400)]',
          'disabled:bg-[var(--neutral-50)] disabled:border-[var(--neutral-100)]',
          'disabled:text-[var(--neutral-400)] disabled:cursor-default',
          error
            ? 'border-[hsl(var(--shadcn-destructive))]'
            : 'border-[hsl(var(--shadcn-input))]'
        )}
        style={{ fontFamily: 'var(--font-inter)' }}
        {...props}
      />
      {(error || helperText) && (
        <p
          className={cn(
            'text-[0.75rem] leading-[140%] tracking-[0.02em]',
            error ? 'text-[hsl(var(--shadcn-destructive))]' : 'text-[var(--neutral-600)]'
          )}
          style={{ fontFamily: 'var(--font-inter)' }}
          role={error ? 'alert' : undefined}
        >
          {error ?? helperText}
        </p>
      )}
    </div>
  )
}
```

---

### 6.3 Nav Item

**Anatomy:** `[icon?] [label text]`

**Token Mappings:**

| State | Text | Background | Transform |
|---|---|---|---|
| default | `var(--black)` | transparent | none |
| hover | `var(--black)` | `rgba(0,0,0,0.05)` | none |
| focus-visible | `var(--black)` | transparent | none; outline `var(--black)` |
| active | `var(--black)` | `rgba(0,0,0,0.1)` | none |
| current (selected) | `var(--black)` | `var(--neutral-50)` | none |
| disabled | `var(--neutral-400)` | transparent | none |

**Typography:** `--f-ui-03` (WaldenburgFH 700, 0.875rem, uppercase, 0.05em)
**Transition:** `background-color var(--duration-fast) var(--ease-default)`

```tsx
interface NavItemProps {
  href: string
  label: string
  isCurrent?: boolean
  icon?: React.ReactNode
}

function NavItem({ href, label, isCurrent, icon }: NavItemProps) {
  return (
    <a
      href={href}
      aria-current={isCurrent ? 'page' : undefined}
      className={cn(
        'inline-flex items-center gap-[var(--space-xs)]',
        'px-[var(--space-md)] py-[var(--space-sm)]',
        'rounded-[var(--radius-sm)]',
        'text-[0.875rem] font-bold uppercase tracking-[0.05em]',
        'text-[var(--black)] no-underline',
        'transition-[background-color] duration-[0.15s] ease-[ease]',
        'hover:bg-[rgba(0,0,0,0.05)]',
        'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
        'focus-visible:outline-[var(--black)]',
        isCurrent && 'bg-[var(--neutral-50)]'
      )}
      style={{ fontFamily: 'var(--font-waldenburg-fh)' }}
    >
      {icon && <span aria-hidden="true">{icon}</span>}
      {label}
    </a>
  )
}
```

---

### 6.4 Chip / Category Tag

**Anatomy:** `[label text]`

**Token Mappings:**

| State | Background | Text | Border |
|---|---|---|---|
| default | `var(--neutral-100)` | `var(--black)` | none |
| hover | `var(--neutral-200)` | `var(--black)` | none |
| selected | `var(--black)` | `var(--white-50)` | none |

**Radius:** `var(--radius-sm)` = **18px** (extracted directly — chip elements)
**Padding:** `var(--space-xs) var(--space-md)` = `6px 12px`
**Typography:** `--f-ui-04` (WaldenburgFH 700, 0.75rem, uppercase, 0.05em)

```tsx
function Chip({ label, selected, onClick }: { label: string; selected?: boolean; onClick?: () => void }) {
  return (
    <button
      onClick={onClick}
      className={cn(
        'inline-flex items-center px-[var(--space-md)] py-[var(--space-xs)]',
        'rounded-[18px] text-[0.75rem] font-bold uppercase tracking-[0.05em]',
        'transition-[background-color,color] duration-[0.15s] ease-[ease]',
        'focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--black)]',
        selected
          ? 'bg-[var(--black)] text-[var(--white-50)]'
          : 'bg-[var(--neutral-100)] text-[var(--black)] hover:bg-[var(--neutral-200)]'
      )}
      style={{ fontFamily: 'var(--font-waldenburg-fh)' }}
    >
      {label}
    </button>
  )
}
```

---

### 6.5 Tab

**Anatomy:** `[icon?] [label] [active indicator bar]`

**Token Mappings:**

| State | Text | Border-bottom | Background |
|---|---|---|---|
| default | `var(--neutral-500)` | none | transparent |
| hover | `var(--black)` | `var(--neutral-200)` 2px | transparent |
| active/selected | `var(--black)` | `var(--black)` 2px | transparent |
| focus-visible | `var(--black)` | same + outline | transparent |

**Typography:** WaldenburgHF 700, 16px, 24px line-height, 0.32px tracking (from computed tab styles)
**Padding:** `18px 0px` (vertical padding, no horizontal — width-based spacing)
**Gap:** `8px` between icon and label

---

### 6.6 Feature Card

**Anatomy:** `[category chip] [heading] [description] [optional CTA]`

```tsx
interface FeatureCardProps {
  category: string
  heading: string
  description: string
  ctaLabel?: string
  ctaHref?: string
}

function FeatureCard({ category, heading, description, ctaLabel, ctaHref }: FeatureCardProps) {
  return (
    <article
      className={cn(
        'flex flex-col gap-[var(--space-lg)]',
        'p-[var(--space-xl)] rounded-[var(--shadcn-radius)]',
        'border border-[hsl(var(--shadcn-border))]',
        'bg-[hsl(var(---shadcn-background))]',
        'transition-transform duration-[0.15s] ease-[ease]',
        'hover:scale-[1.02]'
      )}
    >
      <Chip label={category} />
      <h3
        className="text-[1.5rem] font-normal leading-[130%] tracking-[-0.01em] text-[var(--black)]"
        style={{ fontFamily: 'var(--font-waldenburg)' }}
      >
        {heading}
      </h3>
      <p
        className="text-[1rem] font-normal leading-[140%] tracking-[0.01em] text-[var(--neutral-600)]"
        style={{ fontFamily: 'var(--font-inter)' }}
      >
        {description}
      </p>
      {ctaLabel && ctaHref && (
        <a
          href={ctaHref}
          className={cn(
            'mt-auto text-[0.875rem] font-bold text-[var(--black)]',
            'underline-offset-2 hover:underline',
            'transition-colors duration-[0.15s]'
          )}
          style={{ fontFamily: 'var(--font-waldenburg)' }}
        >
          {ctaLabel}
        </a>
      )}
    </article>
  )
}
```

---

## 7. Elevation & Depth

```css
/* ── Shadows ── */
/* Code block / card with elevation (from computed code element) */
--shadow-card:
  rgba(0, 0, 0, 0.4)  0px 0px 1px 0px,
  rgba(0, 0, 0, 0.04) 0px 1px 1px 0px,
  rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
/* Extracted: high confidence — from code element computed style */

/* Overlay backdrop */
--overlay-darker-plus: rgba(0, 0, 0, 0.4);   /* Modal backdrop, overlays */

/* ── Borders ── */
/* Default element border */
border: 1px solid hsl(var(--shadcn-border));  /* ≈ #E5E5E5 */

/* Input border */
border: 1px solid hsl(var(--shadcn-input));   /* ≈ #E5E5E5 */

/* Hover border (dark) */
border: 1px solid rgba(0, 0, 0, 0.6);         /* .hover:border-overlay-darkest */

/* ── Z-Index Scale ── (reconstructed: moderate confidence) */
--z-base:    0;     /* Normal flow */
--z-raised:  10;    /* Cards, tooltips within a section */
--z-overlay: 100;   /* Drawers, dropdowns */
--z-modal:   200;   /* Modal dialogs */
--z-nav:     300;   /* Sticky navigation — always on top */
--z-toast:   400;   /* Toast notifications */
```

### Layering Principles

- ElevenLabs uses **flat surfaces** as the primary treatment — cards use thin borders (`1px solid hsl(var(--shadcn-border))`), not heavy shadows
- **Shadow is used sparingly** — only the `--shadow-card` value (subtle 3-layer spread) is confirmed from extracted elements
- **Backdrop filters** are not used in the base UI (computed `backdropFilter: none` across all elements)
- **Scale transforms** (`hover:scale-[1.02]` to `hover:scale-[1.075]`) provide the depth/lift effect instead of shadow-on-hover

---

## 8. Motion

```css
/* ── Duration Tokens ── */
--duration-fast: 0.15s;   /* Colour / bg transitions on interactive elements */
--duration-base: 0.3s;    /* General UI transitions, panel open/close */
--duration-slow: 0.36s;   /* Larger layout transitions (div elements) */

/* ── Easing ── */
--ease-default: ease;     /* Default for most transitions */
/* Note: interactive button transitions use cubic-bezier(0.4, 0, 0.2, 1) explicitly */

/* ── Standard Transition (button / interactive) ── */
/* Extracted from role_button computed styles */
transition:
  color            var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
  background-color var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
  border-color     var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
  text-decoration-color var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
  fill             var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
  stroke           var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1);

/* Checkbox/toggle: background 0.2s linear */
transition: background var(--duration-fast) linear;
```

### Keyframe Animations

```css
/* Text reveal — word-by-word blur entrance */
@keyframes text-reveal-word {
  0%   { opacity: 0; transform: scaleY(0.95) scaleX(0.92); filter: blur(12px); }
  15%  { opacity: 0.1; }
  40%  { transform: scaleY(1) scaleX(1); }
  60%  { transform: scaleY(1) scaleX(1); filter: blur(0px); }
  100% { transform: scaleY(1) scaleX(1); filter: blur(0px); opacity: 1; }
}

/* Fade in — simple opacity */
@keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Horizontal slide with blur — demo/showcase elements */
@keyframes ds-slide {
  0%   { transform: translateX(-150%) scale(var(--ds-scale)); filter: blur(20px); }
  15%  { filter: blur(0px); }
  85%  { filter: blur(0px); }
  100% { transform: translateX(calc(100vw)) scale(var(--ds-scale)); filter: blur(20px); }
}

/* Translate Y entrance */
@keyframes fadeTranslateYIn {
  0%   { opacity: 0; transform: translateY(var(--translate-y-from, 100%)); }
  100% { opacity: 1; transform: translateY(0px); }
}

/* Translate X entrance */
@keyframes fadeTranslateXIn {
  0%   { opacity: 0; transform: translateX(var(--translate-x-from, 100%)); }
  100% { opacity: 1; transform: translateX(0px); }
}

/* Pop — subtle scale bounce */
@keyframes pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* Scale Y fade in */
@keyframes fadeInScaleY {
  0%   { opacity: 0; transform: scaleY(1.5); }
  100% { opacity: 1; transform: scaleY(1); }
}

/* Shimmer text */
@keyframes shimmer-text {
  0%   { background-position: 100% 0px; }
  100% { background-position: -100% 0px; }
}

/* Ping — notification pulse */
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
```

### Motion Rules

- **Scale transforms are the primary hover mechanism** — prefer `hover:scale-[1.02]` for cards, `hover:scale-105` for images
- **Text-reveal-word** is reserved for hero/display text entrances — do not use for body text
- **Reduce motion:** wrap animations in `@media (prefers-reduced-motion: reduce) { animation: none; transition-duration: 0.01ms; }`
- **Never animate layout properties** (`width`, `height`, `margin`) — only transform, opacity, filter, background-color
- `ds-slide` is a specialised full-viewport scroll animation — do not use for standard UI transitions

---

## 9. Anti-Patterns & Constraints

1. **NEVER use `font-family: Inter` for hero headings or section titles → Why it fails:** AI agents default to Inter for all text because it's in the font stack, producing generic-looking SaaS output. The Waldenburg–Inter split is ElevenLabs' core brand differentiator — Waldenburg for headings/labels, Inter for paragraphs only. **What to do instead:** Always check the `--f-{role}-font-family` token — headings use `var(--font-waldenburg)`, UI labels use `var(--font-waldenburg-fh)`, paragraphs use `var(--font-inter)`.

2. **NEVER use `border-radius: 8px` on buttons → Why it fails:** The shadcn default `--shadcn-radius: 0.5rem` (8px) bleeds into button styling when agents copy shadcn patterns, producing rounded-rectangle buttons that contradict the ElevenLabs pill aesthetic. The button radius census clearly shows `50px` (8 elements) is the brand standard. **What to do instead:** Always apply `border-radius: var(--radius-md)` = `50px` (or `rounded-[50px]` in Tailwind) to any primary or secondary button.

3. **NEVER use raw hex from HSL shadcn tokens → Why it fails:** Tokens like `--shadcn-border: 0 0% 89.8%` are stored as bare HSL channel values (no `hsl()` wrapper). An agent that writes `color: var(--shadcn-border)` will output `color: 0 0% 89.8%` — an invalid CSS value that silently fails. **What to do instead:** Always wrap: `hsl(var(--shadcn-border))`, `hsl(var(--shadcn-primary))`, etc.

4. **NEVER construct Tailwind class names dynamically → Why it fails:** Tailwind's JIT compiler only includes classes present as complete static strings. Writing `` `bg-${variant}` `` or `bg-[var(--color-${name})]` at runtime produces classes that are never generated, resulting in no styling applied. **What to do instead:** Use a lookup object (`const variantMap = { primary: 'bg-[var(--black)]', ... }`) with static string values, or use `style={{ backgroundColor: 'var(--black)' }}`.

5. **NEVER use spacing values not on the token scale → Why it fails:** Agents invent arbitrary values like `p-3` (12px = fine), `p-5` (20px = off-scale), `mt-7` (28px = off-scale), breaking the visual rhythm. The ElevenLabs spacing scale is 6/8/12/16/24/32/48px — note that **4px is NOT in the scale** (--space-xs starts at 6px). **What to do instead:** Use `--space-xs/sm/md/lg/xl/2xl/3xl` or their exact pixel equivalents only.

6. **NEVER add heavy drop shadows to cards and panels → Why it fails:** Agents copy generic "card" patterns with `box-shadow: 0 4px 6px rgba(0,0,0,0.1)` because that's what most design systems use. ElevenLabs uses flat borders (`1px solid hsl(var(--shadcn-border))`) as the primary surface separator. Only code blocks and specific elevated elements use the subtle `--shadow-card` (0px 0px 1px + 1px + 2px 4px). **What to do instead:** Use `border border-[hsl(var(--shadcn-border))]` for cards; only apply `--shadow-card` to floating/elevated elements confirmed to need it.

7. **NEVER omit focus-visible states → Why it fails:** Agents frequently implement hover states and skip focus states entirely. ElevenLabs has a specific focus system: `.effect-focus:focus-visible` uses `outline-color: var(--black)`, while inverse contexts use `--neutral-100`. An unstyled focus ring is an accessibility failure and a design inconsistency. **What to do instead:** Every interactive element must have `focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--black)]` (or the inverse variant on dark surfaces).

8. **NEVER use warm colours (orange, yellow) as primary button fills → Why it fails:** `--orange-500: #F36F1C` appears in the token set and agents may use it as a CTA colour because it's visually prominent. It is used only for hover states and accent highlights — **never as a button background fill**. The primary CTA is always black (`var(--black)`) or near-black. **What to do instead:** Primary buttons: `bg-[var(--black)]`. Orange only appears in `hover:text-[var(--orange-500)]` or decorative accent roles.

9. **NEVER use positive letter-spacing on large headings → Why it fails:** Agents apply default or positive tracking to all type, but ElevenLabs large headings (`--f-heading-01` through `--f-heading-03`) use **negative** letter-spacing (-0.01em to -0.03em). Positive tracking on large type creates an airy, unfocused look that contradicts the editorial precision of the brand. **What to do instead:** At font sizes ≥ 1.5rem (24px), apply negative tracking from the corresponding `--f-heading-*-letter-spacing` token. Only UI labels (uppercase, small) use positive tracking (0.02em–0.05em).

10. **NEVER use `!important` to override token values → Why it fails:** When an agent can't get a style to apply, it reaches for `!important`, which breaks the cascade and makes dark mode, theme overrides, and component state variants impossible to apply correctly. This is especially harmful in a shadcn/Tailwind system where the cascade is intentional. **What to do instead:** Debug specificity — use a more specific selector, move the style to the correct layer (component → token → base), or use a CSS custom property override at the component root.

---

## Appendix A: Complete Token Reference

Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.

```css
/* Colours (128) */
--grid-column-bg: rgba(127,255,255,0.25);
---shadcn-background: 0 0% 100%;
--shadcn-ring: 0 0% 3.9%;
--shadcn-primary: 0 0% 9%;
--shadcn-primary-foreground: 0 0% 98%;
--shadcn-muted: 0 0% 96.1%;
--shadcn-muted-foreground: 0 0% 45.1%;
--shadcn-destructive: 0 84.2% 60.2%;
--shadcn-border: 0 0% 89.8%;
--page-background-color: #FDFCFC;
--black: #000;
--blue-50: #F2F5FC;
--blue-100: #E1E8F9;
--blue-200: #C8D5F4;
--blue-300: #A1BAEC;
--blue-400: #7294E3;
--blue-500: #5D79DF;
--blue-600: #4056CE;
--blue-700: #3C48B9;
--blue-800: #384094;
--blue-900: #353B73;
--blue-950: #252846;
--current: currentColor;
--cyan-50: #EEFBFD;
--cyan-100: #D3F4FA;
--cyan-200: #ADEAF4;
--cyan-300: #74D9EC;
--cyan-400: #4EC7E0;
--cyan-500: #19A2C1;
--cyan-600: #1783A3;
--cyan-700: #1A6984;
--cyan-800: #1E566C;
--cyan-900: #1D495C;
--cyan-950: #0D2F3F;
--green-50: #ECFDF4;
--green-100: #D1FAE3;
--green-200: #A7F3CC;
--green-300: #6EE7B1;
--green-400: #2DD28D;
--green-500: #10B978;
--green-600: #059661;
--green-700: #047851;
--green-800: #065F41;
--green-900: #064E37;
--green-950: #022C20;
--inherit: inherit;
--magenta-50: #FCF2FB;
--magenta-100: #FBE4FB;
--magenta-200: #F8D3F5;
--magenta-300: #F0B2EA;
--magenta-400: #E273D5;
--magenta-500: #D65CC8;
--magenta-600: #B83DA5;
--magenta-700: #973086;
--magenta-800: #7A296B;
--magenta-900: #642656;
--magenta-950: #3F0D35;
--orange-50: #FFF7ED;
--orange-100: #FEECD6;
--orange-200: #FCD5AC;
--orange-300: #F9B778;
--orange-400: #F58633;
--orange-500: #F36F1C;
--orange-600: #E45512;
--orange-700: #BD3F11;
--orange-800: #963316;
--orange-900: #792C15;
--orange-950: #492104;
--purple-50: #FBF6FE;
--purple-100: #F6EBFC;
--purple-200: #EEDBF9;
--purple-300: #E1BEF4;
--purple-400: #CF94EC;
--purple-500: #C47DE5;
--purple-600: #A94BD2;
--purple-700: #9139B7;
--purple-800: #7A3396;
--purple-900: #632A79;
--purple-950: #32123E;
--red-50: #FEF3F2;
--red-100: #FDE4E3;
--red-200: #FDCDCB;
--red-300: #FAABA7;
--red-400: #F57A74;
--red-500: #EB524B;
--red-600: #D7332B;
--red-700: #B52720;
--red-800: #96231E;
--red-900: #7D231F;
--red-950: #440D0B;
--teal-50: #EAFDF9;
--teal-100: #CEF8EF;
--teal-200: #9EF0DE;
--teal-300: #66E1CC;
--teal-400: #37C8B5;
--teal-500: #1FAD9D;
--teal-600: #168D81;
--teal-700: #166F67;
--teal-800: #165A55;
--teal-900: #174A46;
--teal-950: #072C2B;
--transparent: transparent;
--overlay-darker-plus: rgba(0,0,0,0.4);
--yellow-50: #FCFCEA;
--yellow-100: #FAF9C7;
--yellow-200: #F6F092;
--yellow-300: #EFDE44;
--yellow-400: #EACE25;
--yellow-500: #DAB718;
--yellow-600: #BC8F12;
--yellow-700: #966812;
--yellow-800: #7D5316;
--yellow-900: #6A4419;
--yellow-950: #3E240A;
--white-50: #FFF;
--neutral-200: #DCDCDC;
--neutral-400: #949494;
--neutral-600: #6E6E6E;
--white-200: #F5F3F1;
--eggshell: #FDFCFC;
--neutral-50: #F2F2F2;
--neutral-100: #E5E5E5;
--neutral-300: #BDBDBD;
--neutral-500: #767676;
--neutral-700: #525252;
--neutral-800: #464646;
--neutral-900: #3D3D3D;
--neutral-950: #1C1C1C;

/* Typography (197) */
--container-width: min(100%,81.5rem);
--f-description-01-font-family: var(--font-waldenburg);
--waldenburgFH: var(--font-waldenburg-fh);
--jetbrainsMono: var(--font-jetbrains-mono);
--f-description-02-font-family: var(--font-inter);
--f-ui-01-font-weight: 700;
--f-display-01-font-size: 6.25rem;
--f-display-01-line-height: 95%;
--contextual-nav-height: 4rem;
--f-display-02-line-height: 100%;
--f-heading-01-font-weight: 300;
--f-heading-01-font-size: 3.75rem;
--f-heading-01-line-height: 105%;
--f-heading-01-letter-spacing: -0.03em;
--tw-font-size-6xl: 3rem;
--f-ui-01-line-height: 110%;
--tw-line-height-4xl: 2.25rem;
--f-heading-03-line-height: 120%;
--f-description-01-letter-spacing: -0.02em;
--f-description-01-font-weight: 400;
--tw-line-height-base: 1.5rem;
--f-description-01-line-height: 130%;
--f-heading-04-letter-spacing: -0.01em;
--tw-font-size-2xl: 1.25rem;
--f-heading-05-line-height: 135%;
--f-heading-05-letter-spacing: 0em;
--f-description-02-font-size: 1.125rem;
--f-description-02-line-height: 140%;
--f-description-03-font-size: 1rem;
--f-description-04-font-size: 0.875rem;
--f-ui-04-font-size: 0.75rem;
--f-description-01-font-size: 1.375rem;
--f-description-02-letter-spacing: 0.01em;
--f-body-01-line-height: 160%;
--f-ui-01-letter-spacing: 0.03em;
--f-ui-01-text-transform: uppercase;
--f-ui-02-letter-spacing: 0.02em;
--f-ui-03-letter-spacing: 0.05em;
--f-ui-07-font-size: 0.625rem;
--f-description-blog-font-size: 1.0625rem;
--f-description-blog-line-height: 30px;
--container-width-absolute: min(100vw,81.5rem);
--tw-font-size-2xs: 0.8125rem;
--tw-line-height-xs: 1.3125rem;
--tw-font-size-sm: 0.9375rem;
--tw-line-height-lg: 1.5625rem;
--tw-line-height-base-loose: 1.75rem;
--tw-line-height-lg-loose: 1.875rem;
--tw-line-height-xl: 1.625rem;
--tw-line-height-2xl: 1.6875rem;
--tw-line-height-3xl: 2rem;
--tw-line-height-5xl: 2.625rem;
--tw-line-height-6xl: 3.25rem;
--font-size-xs: 13px; /* 34 elements — e.g. p "Persuasive voices th", p "Playful and engaging", p "Expressive voices th" /* mined from computed styles */ */
--font-size-sm: 14px; /* 22 elements — e.g. p "Access a library of ", p "Our most consistent ", p "Aug 2023" /* mined from computed styles */ */
--font-size-md: 15px; /* 51 elements — e.g. h3 "All-in-one AI editor", h3 "Ultra-realistic spee", h3 "Music" /* mined from computed styles */ */
--font-size-lg: 16px; /* 39 elements — e.g. h2 "Powering the best en", h2 "Trusted by leading d", h3 "ElevenCreative" /* mined from computed styles */ */
--font-size-xl: 18px; /* 93 elements — e.g. h3 "Text to Speech API", h3 "Speech to Text API", h3 "Music API" /* mined from computed styles */ */
--font-size-2xl: 20px; /* 3 elements — e.g. h3 "Introducing Flows in", h3 "Introducing ElevenLa", h3 "Introducing Expressi" /* mined from computed styles */ */
--font-size-3xl: 36px; /* 8 elements — e.g. h2 "Two platforms built ", h2 "Create, edit and loc", h2 "Deploy agents that t" /* mined from computed styles */ */
--font-weight-semibold: 500; /* 31 elements — e.g. h3 "ElevenCreative", h3 "ElevenAgents", h3 "All-in-one AI editor" /* mined from computed styles */ */
--line-height-tight: 22px; /* 75 elements — e.g. h3 "All-in-one AI editor", h3 "Ultra-realistic spee", h3 "Music" /* mined from computed styles */ */
--line-height-normal: 24px; /* 38 elements — e.g. h2 "Powering the best en", h2 "Trusted by leading d", h3 "ElevenCreative" /* mined from computed styles */ */
--line-height-loose: 28.8px; /* 88 elements — e.g. p "NVIDIA", p "Clay", p "Duolingo" /* mined from computed styles */ */
--font-waldenburg: "Waldenburg", "Waldenburg Fallback", sans-serif;
--font-waldenburg-fh: "WaldenburgFH", "WaldenburgFH Fallback", sans-serif;
--font-inter: "Inter", "Inter Fallback", sans-serif;
--f-display-01-font-family: var(--font-waldenburg-fh);
--f-display-01-font-weight: 700;
--f-display-02-font-family: var(--font-waldenburg-fh);
--f-display-02-font-size: 4rem;
--f-display-02-font-weight: 700;
--f-heading-01-font-family: var(--font-waldenburg);
--f-heading-02-font-family: var(--font-waldenburg);
--f-heading-02-font-size: 3rem;
--f-heading-02-font-weight: 300;
--f-heading-02-line-height: 110%;
--f-heading-02-letter-spacing: -0.03em;
--f-heading-03-font-family: var(--font-waldenburg);
--f-heading-03-font-size: 2.25rem;
--f-heading-03-font-weight: 300;
--f-heading-03-letter-spacing: -0.02em;
--f-heading-04-font-family: var(--font-waldenburg);
--f-heading-04-font-size: 1.5rem;
--f-heading-04-font-weight: 400;
--f-heading-04-line-height: 130%;
--f-heading-05-font-family: var(--font-waldenburg);
--f-heading-05-font-size: 1.25rem;
--f-heading-05-font-weight: 400;
--f-subhead-01-font-family: var(--font-waldenburg);
--f-subhead-01-font-size: 1.375rem;
--f-subhead-01-font-weight: 700;
--f-subhead-01-line-height: 140%;
--f-subhead-01-letter-spacing: 0.01em;
--f-subhead-02-font-family: var(--font-waldenburg);
--f-subhead-02-font-size: 1.125rem;
--f-subhead-02-font-weight: 700;
--f-subhead-02-line-height: 140%;
--f-subhead-02-letter-spacing: 0.01em;
--f-subhead-03-font-family: var(--font-waldenburg);
--f-subhead-03-font-size: 1rem;
--f-subhead-03-font-weight: 700;
--f-subhead-03-line-height: 140%;
--f-subhead-03-letter-spacing: 0.01em;
--f-subhead-04-font-family: var(--font-waldenburg);
--f-subhead-04-font-size: 1rem;
--f-subhead-04-font-weight: 400;
--f-subhead-04-line-height: 140%;
--f-subhead-05-font-family: var(--font-waldenburg);
--f-subhead-05-font-size: 0.875rem;
--f-subhead-05-font-weight: 400;
--f-subhead-05-line-height: 120%;
--f-description-02-font-weight: 400;
--f-description-03-font-family: var(--font-inter);
--f-description-03-font-weight: 400;
--f-description-03-line-height: 140%;
--f-description-03-letter-spacing: 0.01em;
--f-description-04-font-family: var(--font-inter);
--f-description-04-font-weight: 400;
--f-description-04-line-height: 140%;
--f-description-04-letter-spacing: 0.01em;
--f-description-05-font-family: var(--font-inter);
--f-description-05-font-size: 1rem;
--f-description-05-font-weight: 400;
--f-description-05-line-height: 140%;
--f-description-05-letter-spacing: 0.01em;
--f-paragraph-01-font-family: var(--font-inter);
--f-paragraph-01-font-size: 1.125rem;
--f-paragraph-01-font-weight: 400;
--f-paragraph-01-line-height: 140%;
--f-paragraph-01-letter-spacing: 0em;
--f-paragraph-02-font-family: var(--font-inter);
--f-paragraph-02-font-size: 1rem;
--f-paragraph-02-font-weight: 400;
--f-paragraph-02-line-height: 140%;
--f-paragraph-02-letter-spacing: 0em;
--f-paragraph-03-font-family: var(--font-inter);
--f-paragraph-03-font-size: 0.875rem;
--f-paragraph-03-font-weight: 400;
--f-paragraph-03-line-height: 140%;
--f-paragraph-03-letter-spacing: 0em;
--f-paragraph-04-font-family: var(--font-inter);
--f-paragraph-04-font-size: 0.75rem;
--f-paragraph-04-font-weight: 400;
--f-paragraph-04-line-height: 140%;
--f-paragraph-04-letter-spacing: 0em;
--f-body-01-font-family: var(--font-inter);
--f-body-01-font-size: 1.125rem;
--f-body-01-font-weight: 400;
--f-ui-01-font-family: var(--font-waldenburg-fh);
--f-ui-01-font-size: 1.125rem;
--f-ui-02-font-family: var(--font-inter);
--f-ui-02-font-size: 0.875rem;
--f-ui-02-font-weight: 400;
--f-ui-02-line-height: 140%;
--f-ui-03-font-family: var(--font-waldenburg-fh);
--f-ui-03-font-size: 0.875rem;
--f-ui-03-font-weight: 700;
--f-ui-03-line-height: 110%;
--f-ui-03-text-transform: uppercase;
--f-ui-04-font-family: var(--font-waldenburg-fh);
--f-ui-04-font-weight: 700;
--f-ui-04-line-height: 110%;
--f-ui-04-letter-spacing: 0.05em;
--f-ui-04-text-transform: uppercase;
--f-ui-05-font-family: var(--font-inter);
--f-ui-05-font-size: 0.75rem;
--f-ui-05-font-weight: 400;
--f-ui-05-line-height: 140%;
--f-ui-05-letter-spacing: 0.02em;
--f-ui-06-font-family: var(--font-waldenburg-fh);
--f-ui-06-font-size: 0.875rem;
--f-ui-06-font-weight: 700;
--f-ui-06-line-height: 110%;
--f-ui-06-letter-spacing: 0.05em;
--f-ui-07-font-family: var(--font-inter);
--f-ui-07-font-weight: 400;
--f-ui-07-line-height: 140%;
--f-ui-07-letter-spacing: 0.02em;
--f-ui-08-font-family: var(--font-inter);
--f-ui-08-font-size: 0.75rem;
--f-ui-08-font-weight: 400;
--f-ui-08-line-height: 140%;
--f-description-blog-font-family: var(--font-inter);
--f-description-blog-font-weight: 400;
--f-description-blog-letter-spacing: 0.01em;
--f-body-blog-font-family: var(--font-inter);
--f-body-blog-font-size: 1.0625rem;
--f-body-blog-font-weight: 400;
--f-body-blog-line-height: 30px;
--tw-font-size-xs: 0.875rem;
--tw-font-size-base: 1rem;
--tw-font-size-lg: 1.0625rem;
--tw-font-size-xl: 1.125rem;
--tw-font-size-3xl: 1.5rem;
--tw-font-size-4xl: 2rem;
--tw-font-size-5xl: 2.25rem;

/* Spacing (33) */
--inner-gutter: 20px;
--outer-gutter: 64px;
--spacing-outer-gutter: 4rem;
--spacing-inner-gutter: 1.25rem;
--spacing-container-gutter: 0.625rem;
--spacing-outer-content: 6.25rem;
--spacing-content-wide: 10rem;
--spacing-content-xwide: 12.5rem;
--tw-trim-top-2xs: 0.25rem;
--tw-trim-bottom-2xs: 0.28125rem;
--tw-trim-top-2xs-loose: 0.34375rem;
--tw-trim-top-base: 0.375rem;
--tw-trim-top-xs-loose: 0.4375rem;
--tw-trim-bottom-base: 0.40625rem;
--tw-trim-top-base-loose: 0.5rem;
--tw-trim-top-lg-loose: 0.53125rem;
--tw-trim-top-3xl-loose: 0.5625rem;
--tw-trim-bottom-3xl: 0.46875rem;
--tw-trim-bottom-3xl-loose: 0.59375rem;
--space-xs: 6px; /* 27 elements — e.g. div .tw-flex, div .tw-flex, div .tw-flex /* mined from computed styles */ */
--space-sm: 8px; /* 40 elements — e.g. div .tw-grid, div .tw-grid, div .tw-py-2 /* mined from computed styles */ */
--space-md: 12px; /* 36 elements — e.g. a .tw-group, a .tw-group, a .inline-flex /* mined from computed styles */ */
--space-lg: 16px; /* 27 elements — e.g. div .tw-py-2, div .tw-py-2, div .tw-py-2 /* mined from computed styles */ */
--space-xl: 24px; /* 36 elements — e.g. div .tw-relative, div .tw-relative, div .tw-relative /* mined from computed styles */ */
--space-2xl: 32px; /* 16 elements — e.g. div .tw-relative, div .tw-relative, div .tw-grid /* mined from computed styles */ */
--space-3xl: 48px; /* 27 elements — e.g. div .tw-relative, div .tw-relative, div .tw-flex /* mined from computed styles */ */
--space-xs: 6px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 24px;
--space-2xl: 32px;
--space-3xl: 48px;

/* Radius (9) */
--shadcn-radius: 0.5rem;
--radius-sm: 18px; /* 3 elements — e.g. a .tw-py-2 "ElevenCreative", a .tw-py-2 "ElevenAgents", a .tw-py-2 "ElevenAPI" /* mined from computed styles */ */
--radius-md: 50px; /* 8 elements — e.g. button .cb-btn "Reject All", button .cb-btn "Customize", button .cb-btn "Accept All Cookies" /* mined from computed styles */ */
--radius-lg: 50%; /* 2 elements — e.g. button .cb-orb-button, button .cb-orb-button /* mined from computed styles */ */
--radius-full: 100px; /* 4 elements — e.g. input .cb-toggle-checkbox, input .cb-toggle-checkbox, input .cb-toggle-checkbox /* mined from computed styles */ */
--radius-sm: 18px;
--radius-md: 50px;
--radius-full: 100px;
--radius-lg: 50%;

/* Effects (4) */
--breakpoint: "xxxl";
--grid-columns: 12;
--env: "dev";
--shadow-card: rgba(0, 0, 0, 0.4)  0px 0px 1px 0px,
  rgba(0, 0, 0, 0.04) 0px 1px 1px 0px,
  rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;

/* Motion (22) */
----motion-text-reveal-word: @keyframes text-reveal-word { 
  0% { opacity: 0; transform: scaleY(0.95) scaleX… <0.3KB elided>; /* @keyframes text-reveal-word */
----motion-text-reveal-fill: @keyframes text-reveal-fill { 
  100% { background-size: 0px 100%; }
}; /* @keyframes text-reveal-fill */
----motion-ping: @keyframes ping { 
  75%, 100% { transform: scale(2); opacity: 0; }
}; /* @keyframes ping */
----motion-fade-in: @keyframes fade-in { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}; /* @keyframes fade-in */
----motion-spin: @keyframes spin { 
  100% { transform: rotate(1turn); }
}; /* @keyframes spin */
----motion-enter: @keyframes enter { 
  0% { opacity: var(--tw-enter-opacity,1); transform: transl… <0.3KB elided>; /* @keyframes enter */
----motion-exit: @keyframes exit { 
  100% { opacity: var(--tw-exit-opacity,1); transform: transl… <0.3KB elided>; /* @keyframes exit */
----motion-fadeTranslateXIn: @keyframes fadeTranslateXIn { 
  0% { opacity: 0; transform: translateX(var(--translate-x-from,100%)); }
  100% { opacity: 1; transform: translateX(0px); }
}; /* @keyframes fadeTranslateXIn */
----motion-fadeTranslateYIn: @keyframes fadeTranslateYIn { 
  0% { opacity: 0; transform: translateY(var(--translate-y-from,100%)); }
  100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes fadeTranslateYIn */
----motion-ds-slide: @keyframes ds-slide { 
  0% { transform: translateX(-150%) scale(var(--ds-scale)… <0.2KB elided>; /* @keyframes ds-slide */
----motion-pulse: @keyframes pulse { 
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}; /* @keyframes pulse */
----motion-opacity: @keyframes opacity { 
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}; /* @keyframes opacity */
----motion-pop: @keyframes pop { 
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  70% { transform: scale(0.97); }
  100% { transform: scale(1); }
}; /* @keyframes pop */
----motion-fadeInScaleY: @keyframes fadeInScaleY { 
  0% { opacity: 0; transform: scaleY(1.5); }
  100% { opacity: 1; transform: scaleY(1); }
}; /* @keyframes fadeInScaleY */
----motion-fadeIn: @keyframes fadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}; /* @keyframes fadeIn */
----motion-shimmer-text: @keyframes shimmer-text { 
  0% { background-position: 100% 0px; }
  100% { background-position: -100% 0px; }
}; /* @keyframes shimmer-text */
----motion-tw-pulse: @keyframes tw-pulse { 
  50% { opacity: 0.5; }
}; /* @keyframes tw-pulse */
----motion-tw-spin: @keyframes tw-spin { 
  100% { transform: rotate(1turn); }
}; /* @keyframes tw-spin */
--duration-fast: 0.15s; /* 18 elements — e.g. button, button, button /* mined from computed styles */ */
--duration-base: 0.3s; /* 33 elements — e.g. button, button, button /* mined from computed styles */ */
--duration-slow: 0.36s; /* 4 elements — e.g. div, div, div /* mined from computed styles */ */
--ease-default: ease; /* 91 elements — e.g. button, button, button /* mined from computed styles */ */
```

## Appendix B: Token Source Metadata

```
tokenSource:      extracted-css-vars
confidence:       high
properties found: 388 CSS custom properties
extraction site:  elevenlabs.io
extraction date:  [TBD - record at extraction time]

Curated token count: 39 tokens mapped to standard semantic roles
Original CSS variable names: PRESERVED exactly as extracted
Synthesised names: Only --z-* z-index scale and --shadow-card are synthetic
  (annotated inline with confidence level)

Font source: Self-hosted WOFF2 via CDN (eleven-public-cdn.elevenlabs.io)
  Fonts confirmed: Waldenburg (300/400/700), WaldenburgFH (700 condensed),
                   Inter (variable 100–900), Geist Mono (variable)
  Fallbacks: Arial (Waldenburg Fallback, WaldenburgFH Fallback, Geist Mono Fallback)
  Note: JetBrains Mono referenced via --jetbrainsMono variable but @font-face
        declaration not found in extraction — may be loaded separately

Framework: Next.js + Tailwind CSS v4 (CSS vars via @theme — note --tw-* prefix tokens)
UI Library: shadcn/ui (confirmed by --shadcn-* variable prefix, 0 0% 100% HSL format)
Icons: Lucide

Shadcn token format note:
  All --shadcn-* tokens are stored as bare HSL channel values (e.g. "0 0% 100%")
  WITHOUT the hsl() wrapper. This is the shadcn convention.
  ALWAYS use: hsl(var(--shadcn-primary)), NOT var(--shadcn-primary) directly in CSS.

Border radius note:
  The --radius-md: 50px value was mined from 8 cookie-banner button elements.
  The brand primary CTA button uses border-radius: 9999px (from button_primary
  computed style). Both represent pill-shaped buttons. Use --radius-md (50px)
  for standard buttons; 9999px is safe for any pill button.

Breakpoints:
  Only two breakpoints detected: 480px (mobile) and 1024px (desktop).
  No explicit tablet breakpoint between these values.

Confidence annotations:
  Colour tokens:    high (direct CSS var extraction)
  Typography:       high (both CSS vars and computed styles confirm)
  Spacing scale:    high (--space-* vars directly extracted)
  Radius:           high (mined from computed element styles)
  Motion:           high (direct CSS var extraction + computed transitions)
  Z-index scale:    reconstructed: moderate confidence (no z-index vars found; 
                    inferred from typical shadcn/Next.js nav patterns)
  Shadow tokens:    extracted: high confidence (from code element computed boxShadow)
  Page sections:    inferred: moderate confidence (no screenshots; derived from
                    component inventory + layout digest structural signals)
```