ElevenLabs
MIT
Modern SaaS design system with pill-shaped components, custom Waldenburg typography, and a light eggshell aesthetic suited for developer tools and voice-tech platforms
Colour (129)
color.black#000
color.red50#FEF3F2
color.blue50#F2F5FC
color.cyan50#EEFBFD
color.red100#FDE4E3
color.red200#FDCDCB
color.red300#FAABA7
color.red400#F57A74
color.red500#EB524B
color.red600#D7332B
color.red700#B52720
color.red800#96231E
color.red900#7D231F
color.red950#440D0B
color.teal50#EAFDF9
color.blue100#E1E8F9
color.blue200#C8D5F4
color.blue300#A1BAEC
color.blue400#7294E3
color.blue500#5D79DF
color.blue600#4056CE
color.blue700#3C48B9
color.blue800#384094
color.blue900#353B73
color.blue950#252846
color.currentcurrentColor
color.cyan100#D3F4FA
color.cyan200#ADEAF4
color.cyan300#74D9EC
color.cyan400#4EC7E0
color.cyan500#19A2C1
color.cyan600#1783A3
color.cyan700#1A6984
color.cyan800#1E566C
color.cyan900#1D495C
color.cyan950#0D2F3F
color.green50#ECFDF4
color.inheritinherit
color.teal100#CEF8EF
color.teal200#9EF0DE
color.teal300#66E1CC
color.teal400#37C8B5
color.teal500#1FAD9D
color.teal600#168D81
color.teal700#166F67
color.teal800#165A55
color.teal900#174A46
color.teal950#072C2B
Spacing (26)
spacing.twtrimtop2xs0.25rem
spacing.twtrimbottom2xs0.28125rem
spacing.twtrimtop2xsloose0.34375rem
spacing.twtrimtopbase0.375rem
spacing.twtrimbottombase0.40625rem
spacing.twtrimtopxsloose0.4375rem
spacing.twtrimbottom3xl0.46875rem
spacing.twtrimtopbaseloose0.5rem
spacing.twtrimtoplgloose0.53125rem
spacing.twtrimtop3xlloose0.5625rem
spacing.twtrimbottom3xlloose0.59375rem
spacing.spacingcontainergutter0.625rem
spacing.spacinginnergutter1.25rem
spacing.spacingoutergutter4rem
spacing.spacexs6px
spacing.spacingoutercontent6.25rem
spacing.spacesm8px
spacing.spacingcontentwide10rem
spacing.spacemd12px
spacing.spacingcontentxwide12.5rem
spacing.spacelg16px
spacing.innergutter20px
spacing.spacexl24px
spacing.space2xl32px
spacing.space3xl48px
spacing.outergutter64px
Radius (5)
shadcnradius0.5rem
radiussm18px
radiuslg50%
radiusmd50px
radiusfull100px
Shadow (5)
effect.env"dev"
effect.breakpoint"xxxl"
effect.shadowcardrgba(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
effect.gridcolumns12
effect.motionopacity@keyframes opacity {
0% { opacity: 0.5
# 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)
```More from the gallery
Browse all kits →You may also like

Vercel
MITClean, minimal developer-focused design system built on Geist typography with light surfaces, precise spacing, and fast interactions for modern web applications
00
lightminimaldeveloper-toolsaas

Sentry
MITDark, minimal design system for developer tools with a sophisticated purple palette and refined typography, tailored for error monitoring and performance platforms
00
darkminimaldeveloper-toolsaas

OpenAI
MITClean, minimal design system for AI-native products built on Next.js and Tailwind, featuring a light monochromatic palette with precise token-based spacing and typography
02
lightminimalsaasdeveloper-tool