elevenlabs.io

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: elevenlabs.io
description: "Light product system built on #fdfcfc with #ffffff as the primary CTA accent. Type anchored in Waldenburg at 36px / weight 300. Extracted automatically from https://elevenlabs.io/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  elevenlabs.io is built on a warm, off-white canvas (rgb(253, 252, 252)).
  The system uses rgb(255, 255, 255) as the singular interactive color.
  Fully-rounded CTAs (9999px) signal a friendly, tactile interaction model alongside Waldenburg as the primary typeface.
  Waldenburg is paired with Inter Fallback for secondary roles.
  A layered elevation system (19 distinct shadows) building a clear front-to-back hierarchy.
  Motion is minimal — a few targeted transitions, no decorative animation.

colors:
  background: "#fdfcfc"
  surface-1: "#ffffff"
  surface-2: "#ebe8e4"
  ink-subtle: "#e5e5e5"
  primary: "#ffffff"
  on-primary: "#111111"
  primary-hover: "#2b7fff"
  hairline: "#e5e5e5"

typography:
  display-xl:
    fontFamily: "Waldenburg, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.08
    letterSpacing: -0.96px
  display-md:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.16px
  headline:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.47
    letterSpacing: 0.15px
  body:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0
  body-sm:
    fontFamily: "Waldenburg, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 2.06
    letterSpacing: 0
  button:
    fontFamily: "WaldenburgHF, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.32px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 14px
  lg: 20px
  xl: 24px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 10px
  sm: 20px
  md: 64px
  lg: 160px
  xl: 168px
  xxl: 184px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "#000000"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: 18px 0px
  button-pill:
    backgroundColor: "#000000"
    textColor: "{colors.primary}"
    typography: "{typography.display-md}"
    rounded: "{rounded.pill}"
    padding: 0px 16px
  button-pill-2:
    backgroundColor: "transparent"
    textColor: "#000000"
    typography: "{typography.display-md}"
    rounded: "{rounded.pill}"
    padding: 0px 12px
  card-standard-card:
    backgroundColor: "{colors.primary}"
    typography: "{typography.display-md}"
    rounded: "{rounded.md}"
  input-text-input:
    backgroundColor: "transparent"
    textColor: "transparent"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: 16px 20px 0px
  tab-ghost-tab:
    backgroundColor: "transparent"
    textColor: "#000000"
    typography: "{typography.display-md}"
    rounded: "{rounded.md}"

extracted_at: "2026-06-11T05:00:34.325Z"
completeness: 82
scoreVersion: "v2"

---

# Design System — elevenlabs.io
> Extracted automatically by Prism from https://elevenlabs.io
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: sparse  |  **Motion**: animated  |  **Weight**: heavy  |  **Aesthetic**: soft-rounded

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#fdfcfc` |
| Type posture | sans-led (Inter) | "Two platforms built on the sam" |
| Color assertion | dual-accent | #ffffff |
| Whitespace | sparse | section rhythm 176px |
| Interaction | animated | 1 keyframes, 4 transitions |
| Radius language | soft-pill | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · soft-pill · animated-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(253, 252, 252)` is the page background. Every component composits against this.
> - **Accent**: `rgb(255, 255, 255)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 176px between major bands. Card padding: 160px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

elevenlabs.io sits on a pure white canvas (`#fdfcfc`), a neutral foundation calibrated for sustained reading and component contrast. 

Headlines are set in **Waldenburg**, a sans-serif display face (the dominant type signature, e.g. "Two platforms built on the same research foundation" at 36px). Body text is set in **Inter**. Headlines run at a remarkably light weight (300) — restraint over assertion, creating an editorial calm that invites reading rather than demanding it. Negative letter-spacing at display sizes (-0.96px at 48px) compresses headlines into engineered blocks, dense and precise. 

Body text reads in Pure Black (`#000000`) (contrast ratio 20.8:1, well above WCAG AA). **Pure White** (`#ffffff`) provides interactive distinction without visual aggression. Elevation is built from multi-layer shadow stacks (19 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. 

**Key Characteristics:**
- Background: Pure White (`#fdfcfc`)
- Primary typeface: Waldenburg
- Accent: Pure White (`#ffffff`)
- Display: 48px weight 300, letter-spacing -0.96px
- Shadow system: 19 distinct elevation levels
- Custom fonts loaded: Waldenburg, WaldenburgFH, Inter, Geist Mono, Waldenburg Fallback, WaldenburgFH Fallback, Waldenburg-ML, WaldenburgFH-ML, Inter Fallback, Geist Mono Fallback

## 2. Color Palette & Roles

### Background & Surface
- **Pure White** (`#fdfcfc`): Page background (primary)
- **Whitesmoke** (`#e5e5e5`): Surface / elevated background
- **Pure White** (`#ffffff`): Surface / elevated background
- **Whitesmoke** (`#ebe8e4`): Surface / elevated background
- **Off-White** (`#f5f3f1`): Surface / elevated background

### Text & Content
- **Pure Black** (`#000000`): Primary body text
- **#052f70** (`#052f70`): Secondary text
- **Charcoal** (`#3d3d3d`): Secondary text

### Accent & Interactive
- **Ring Blue** (`#2b7fff`): Interactive / accent
- **#76b900** (`#76b900`): Interactive / accent
- **Brand Indigo** (`#635bff`): Interactive / accent
- **Bright Orange** (`#ff4704`): Interactive / accent
- **#0447ff** (`#0447ff`): Interactive / accent
- **#00ccbc** (`#00ccbc`): Interactive / accent
- **Crimson** (`#f41a2f`): Interactive / accent

### Border & Divider
- **Whitesmoke** (`#e0dfdd`): Borders / dividers

### Full Extracted Palette
**27 colors rendered on the page** + **109** more declared in design tokens (CSS custom properties — not necessarily painted). (16 categorized above + 120 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#57534e` — Charcoal
- `#777169` — Stone
- `#a59f97` — Cool Gray
- `#44403b` — Charcoal
- `#efefef` — Off-White
- `#fff9f5` — Off-White
- `#f5f8ff` — Off-White
- `#0a59d2` — M Tricolor Blue
- `#faf8f8` — Off-White
- `#59544f` — Charcoal
- `#949494` — Grey
- `#525252` — Charcoal *(token)*
- `#064e37` — #064e37 *(token)*
- `#1e566c` — #1e566c *(token)*
- `#7294e3` — Cornflower Blue *(token)*
- `#eedbf9` — Soft Pink *(token)*
- `#464646` — Charcoal *(token)*
- `#bdbdbd` — Light Grey *(token)*
- `#767676` — Slate Grey *(token)*
- `#bd3f11` — #bd3f11 *(token)*
- `#e1e8f9` — Light Gray *(token)*
- `#3e240a` — Warm Brown *(token)*
- `rgba(127, 255, 255, 0.25)` — Translucent #7fffff (25%) *(token)*
- `#93c5fd` — Baby Blue *(token)*
- `#4056ce` — Royal Blue *(token)*
- `#fcd5ac` — #fcd5ac *(token)*
- `#353b73` — #353b73 *(token)*
- `#c8d5f4` — Light Blue *(token)*
- `#c47de5` — #c47de5 *(token)*
- `#f6f092` — #f6f092 *(token)*
- `#cf94ec` — Plum *(token)*
- `#966812` — #966812 *(token)*
- *…+88 more in `raw-css.json` (`desktop.allColors`).*

### CSS Custom Properties (Design Tokens)

**Font Size Token**
- `--f-heading-03-font-size`: `2.25rem`
- `--f-body-blog-font-size`: `1.0625rem`
- `--f-description-blog-font-size`: `1.0625rem`
- `--tw-font-size-4xs`: `0.625rem`

**Spacing Token**
- `--spacing-outer-content`: `6.25rem`
- `--f-subhead-03-letter-spacing`: `0.01em`
- `--f-description-03-letter-spacing`: `0.01em`
- `--f-subhead-01-letter-spacing`: `0.01em`

**Font Weight Token**
- `--f-description-02-font-weight`: `400`
- `--f-ui-02-font-weight`: `400`
- `--f-ui-05-font-weight`: `400`
- `--f-subhead-04-font-weight`: `400`

**Font Family Token**
- `--f-subhead-04-font-family`: `"Waldenburg","Waldenburg Fallback"`
- `--f-description-03-font-family`: `"Inter","Inter Fallback"`
- `--f-description-02-font-family`: `"Inter","Inter Fallback"`
- `--f-paragraph-01-font-family`: `"Inter","Inter Fallback"`

**Border Radius Token**
- `--shadcn-radius`: `0.5rem`

**Shadow Token**
- `--tw-drop-shadow`: ``
- `--tw-ring-shadow`: `0 0 #0000`
- `--tw-shadow-colored`: `0 0 #0000`
- `--tw-ring-offset-shadow`: `0 0 #0000`

**Other tokens**
- `--shadcn-primary`: `0 0% 9%`
- `--f-ui-03-text-transform`: `uppercase`
- `--grid-column-bg`: `rgba(127,255,255,0.25)`
- `--tw-ring-color`: `rgb(147 197 253/0.5)`
- `--page-background-color`: `#FDFCFC`
- `--shadcn-accent-foreground`: `0 0% 9%`
- `--contextual-nav-height`: `4rem`
- `--f-ui-01-text-transform`: `uppercase`

## 3. Typography Rules

### Font Families
- **Primary**: `Inter`
- **Secondary**: `Waldenburg`
- **Font 3**: `WaldenburgFH`
- **Font 4**: `Geist Mono`
- **Font 5**: `Waldenburg Fallback`

### Custom Fonts Loaded
- **Waldenburg** weight 300 (normal)
- **Waldenburg** weight 400 (normal)
- **Waldenburg** weight 700 (normal)
- **WaldenburgFH** weight 700 (normal)
- **Inter** weight 100 900 (normal)
- **Geist Mono** weight 100 900 (normal)
- **Waldenburg Fallback** weight normal (normal)
- **WaldenburgFH Fallback** weight normal (normal)
- **Waldenburg-ML** weight 300 (normal)
- **Waldenburg-ML** weight 400 (normal)
- **Waldenburg-ML** weight 700 (normal)
- **WaldenburgFH-ML** weight 700 (normal)
- **Inter Fallback** weight normal (normal)
- **Geist Mono Fallback** weight normal (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Waldenburg | 48px | 300 | 1.08 | -0.96px | Main headline (h1) |
| Card Title | Inter | 18px | 400 | 1.6 | normal | Card headings |
| Sub-heading | Inter | 16px | 500 | 1.5 | 0.16px | Third-level heading (h3) |
| Button Large | WaldenburgHF | 16px | 700 | 1.5 | 0.32px | Button label (16px) |
| Button Large | Inter | 16px | 400 | 1.4 | normal | Button label (16px) |
| Label Heading | Inter | 15px | 400 | 1.47 | 0.15px | Small heading (H4) |
| Button | Inter | 14px | 400 | 1.43 | normal | Button label (14px) |
| Link | Waldenburg | 14px | 700 | 2.06 | normal | Link (14px) — Decoration: none |

### Font Weight Scale

CSS custom properties define 32 explicit weight steps:
- `--f-heading-03-font-weight`: `300` — Light
- `--f-heading-02-font-weight`: `300` — Light
- `--f-heading-01-font-weight`: `300` — Light
- `--f-description-02-font-weight`: `400` — Regular
- `--f-ui-02-font-weight`: `400` — Regular
- `--f-ui-05-font-weight`: `400` — Regular
- `--f-subhead-04-font-weight`: `400` — Regular
- `--f-heading-04-font-weight`: `400` — Regular
- `--f-description-01-font-weight`: `400` — Regular
- `--f-description-blog-font-weight`: `400` — Regular
- `--f-description-05-font-weight`: `400` — Regular
- `--f-paragraph-03-font-weight`: `400` — Regular
- `--f-heading-05-font-weight`: `400` — Regular
- `--f-paragraph-02-font-weight`: `400` — Regular
- `--f-ui-08-font-weight`: `400` — Regular
- `--f-subhead-05-font-weight`: `400` — Regular
- `--f-body-01-font-weight`: `400` — Regular
- `--f-ui-07-font-weight`: `400` — Regular
- `--f-paragraph-04-font-weight`: `400` — Regular
- `--f-paragraph-01-font-weight`: `400` — Regular
- `--f-description-04-font-weight`: `400` — Regular
- `--f-description-03-font-weight`: `400` — Regular
- `--f-body-blog-font-weight`: `400` — Regular
- `--f-subhead-01-font-weight`: `700` — Bold
- `--f-subhead-02-font-weight`: `700` — Bold
- `--f-ui-04-font-weight`: `700` — Bold
- `--f-subhead-03-font-weight`: `700` — Bold
- `--f-display-02-font-weight`: `700` — Bold
- `--f-ui-01-font-weight`: `700` — Bold
- `--f-ui-03-font-weight`: `700` — Bold
- `--f-ui-06-font-weight`: `700` — Bold
- `--f-display-01-font-weight`: `700` — Bold

### Full Font Size Scale

Sizes detected in the design (descending): `48px`, `36px`, `18px`, `16px`, `15px`, `14px`, `13px`, `12px`, `10px`

> 4 size(s) detected outside the sampled hierarchy (36px, 13px, 12px, 10px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `#000000`
- Padding: 18px 0px
- Radius: 0px
- Font: 16px weight 700
- Use: Subtle action, toolbar, nav button

**Pill**
- Background: `#000000`
- Text: `#ffffff` `{colors.primary}`
- Padding: 0px 16px
- Radius: 9999px
- Font: 16px weight 400
- Use: Status pills, tags, chips

**Pill**
- Background: `transparent`
- Text: `#000000`
- Padding: 0px 12px
- Radius: 9999px
- Font: 18px weight 400
- Use: Status pills, tags, chips

### Cards & Containers

**Standard Card**
- Background: `#ffffff` `{colors.primary}`
- Padding: 0px
- Radius: 16px
- Shadow: `rgba(0, 0, 0, 0.4) 0px 0px 1.143px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px`
- Use: Content containers, listing items

### Inputs & Forms

**Text Input**
- Background: `transparent`
- Text: `transparent`
- Padding: 16px 20px 0px
- Radius: 0px
- Border: 0px solid rgb(229, 229, 229)
- Font: 16px weight 400
- Use: Text fields, search inputs

### Tabs

**Ghost Tab**
- Background: `transparent`
- Text: `#000000`
- Padding: 0px
- Radius: 14px
- Font: 18px weight 400
- Use: Navigation tabs, filter tabs


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative


*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  input:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  card:
    default:
      bg: "rgb(255, 255, 255)"
      fg: "rgb(0, 0, 0)"
      shadow: "rgba(0, 0, 0, 0.4) 0px 0px 1.143px 0px, rgba(0, 0, 0, 0.04) "
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  tab:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **2 shape(s)** in this system: `Ghost`, `Pill`
- **DO NOT introduce new buttons variants** without justification

### Cards & Containers
- **1 shape(s)** in this system: `Standard Card`
- **DO NOT introduce new cards & containers variants** without justification

### Inputs & Forms
- **1 shape(s)** in this system: `Text Input`
- **DO NOT introduce new inputs & forms variants** without justification

### Tabs
- **1 shape(s)** in this system: `Ghost Tab`
- **DO NOT introduce new tabs variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Single column, centered content

### Max Width
min(100vw,81.5rem)

### Spacing System
Generous spacing — editorial breathing room

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 10px |
| sm | 20px |
| md | 64px |
| base | 100px |
| lg | 160px |
| xl | 168px |
| 2xl | 176px |
| 3xl | 184px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 4px | Tiny corners (badges, micro elements) |
| Sm | 8px | Buttons, inputs, small elements |
| Md | 14px | Cards, containers |
| Lg | 20px | Large rounded elements, pill segments |
| Xl | 24px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `0px` |
| Cards & Containers | `16px` |
| Inputs & Forms | `0px` |
| Tabs | `14px` |
| Page Body | `0px` |
| Navigation | `0px` |
| Primary Input | `0px` |

**Shape Personality**: Generously Rounded — Soft, friendly corners (8px+). Approachable, consumer-facing feel.

**Full Radius Spectrum**: 0px, 2px, 4px, 7px, 7.2px, 8px, 10px, 11.5px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~100px internal vertical padding (up to 100px) — **very airy / premium**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `184px` | Top/bottom of full-bleed hero sections |
| **section** | `168px` | Between major bands (color change, content shift) |
| **subsection** | `160px` | Within a section, between content groups |
| **card** | `64px` | Card padding, list-item spacing |
| **compact** | `20px` | Form fields, tight clusters, badge padding |
| **micro** | `10px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**4/8 structural patterns detected.**

### Hero Pattern

- **Composition:** left-aligned — 
- **Viewport coverage:** 327px tall (not full-viewport)
- **Heading:** "Bringing technology to life" — 48px left-aligned
- **Subheading:** "Powering the best enterprises, creators, and developers. From ElevenAgents for customer experience, ElevenCreative for content creation, to the leadin"
- **CTAs:** 2 (primary: "Sign up")
- **Clone instruction:** Reproduce the **left-aligned** layout. Use the heading font-size token at the documented size. Pair the centered text with the hero’s decorative visual (gradient / SVG / hero image — see §9b), not bare text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** logo-left-links-left — Logo and links both on the left (CTAs typically right)
- **Height:** 36px
- **Logo:** ✓ present
- **Nav links:** 5 primary items
- **CTAs in nav:** 0 (no buttons — links only)
- **Clone instruction:** Build a static logo left links left navigation. Link-only — no button styling needed.

### Card Grid Pattern

- **Card count:** 6 cards detected
- **Columns (desktop):** 3-up grid
- **Card dimensions:** 544×468px (aspect 1.16:1)
- **Gap:** 0px between cards
- **Content:** ✗ no image
- **Clone instruction:** Build a 3-column grid (desktop) with cards at ~1.16:1 aspect ratio. Text/icon-only cards (no photography).

### Footer Pattern

- **Columns:** 1
- **Links:** 66 total
- **Height:** 827px
- **Includes:** ✗ no newsletter | ✓ social icons | ✓ language switcher 
- **Clone instruction:** Build a 1-column footer with ~66 links per column, social media links.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.06) 0px 4px 20px 0px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(0, 0, 0, 0.06) 0px 0px 0px 1px`,<br>`rgba(0, 0, 0, 0.04) 0px 1px 2px 0px`,<br>`rgba(0, 0, 0, 0.04) 0px 2px 4px 0px` | Cards, elevated surfaces |
| Inset (Level 3) | <br>`rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset` | Buttons, pressed-state elements |
| Layered (Level 4) | <br>`rgba(0, 0, 0, 0.4) 0px 0px 1px 0px`,<br>`rgba(0, 0, 0, 0.04) 0px 4px 4px 0px` | Cards, elevated surfaces |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Dominant Easing Curves

| Curve | Semantic Name |
|-------|---------------|
| `linear` | Linear — No Easing |

### Duration Scale

| Value | Tier | Typical Use |
|-------|------|-------------|
| `100ms` | Fast | Hover states, micro-interactions |
| `200ms` | Normal | Panel open/close, navigation |

### Copy-Paste Transition Snippets

**Opacity**
```css
transition: opacity 0.2s;
```

**Background**
```css
transition: background 0.2s linear;
```

**Transform**
```css
transition: transform 0.1s;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `pulse` | Scale | transform | Attention / status |

### Motion Fingerprint

- **Speed Character**: Balanced Pacing (median duration: `200ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 1 unique animation (1 total including variants)

> This design moves with balanced pacing timing using custom cubic-bezier curves, creating a UI that feels natural and fluid.

## 8. Do's and Don'ts

### Do
- Use Pure White (`#fdfcfc`) as the page background — it's intentionally not pure white
- Use Inter as the primary typeface — it defines the brand personality
- Use negative letter-spacing (-0.96px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
- Use Pure White (`#ffffff`) as the primary accent — it's the brand's signature interactive color
- Use pill-shaped radius (9999px) for primary CTA buttons — the brand uses fully-rounded, pill CTAs
- Use 16px border-radius on cards — consistent with the grid card corners
- Respect the 10px–168px spacing range — the design uses a wide scale for visual breathing room
- Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Use a 3-column grid on desktop — density matters for this content type

### Don't
- Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't increase letter-spacing on headings — the type is designed to run tight at scale
- Don't invent new shadow values — use only the extracted shadow levels
- Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't use rectangular buttons for primary actions — the rounded pill shape is the brand standard
- Don't make the nav sticky — this design lets it scroll away to maximize content focus
- Don't put a CTA button in the nav — this design uses links only at the top


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(253, 252, 252)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(253, 252, 252)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(255, 255, 255)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(255, 255, 255)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 480px | Single column, compact spacing |
| Tablet | 1024px | Multi-column grids begin |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `48px` | `36px` |
| heading | line-height | `52px` | `42px` |
| heading | letter-spacing | `-0.96px` | `-0.72px` |
| body | font-size | `18px` | `17px` |
| body | line-height | `28.8px` | `23.8px` |
| card | width | `320px` | `316px` |

### Collapsing Strategy
- Headlines: 48px → 36px on mobile
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 18px 0px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Navigation collapses to hamburger** — 5 links visible on desktop, 0 on mobile (the rest hide behind a menu toggle).
- **Card grid: 3-up → 1-up** — cards stack as viewport narrows, becoming a vertical list on mobile.


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Canvas / 2D rendering** — animated/interactive canvas (charts, graphs, particle fields). Reproduce as live data-viz (e.g. an animated SVG/Canvas line chart), NOT a static image.
- **WebGL** — GPU 3D/shader graphics (hero atmosphere is rendered, not a flat gradient).
- **Clip-path shapes** — 4 non-rectangular cut(s).
- **Blend modes** — 8 mix-blend layer(s).

> **Motion fingerprint**: WebGL/3D canvas, non-rectangular shapes (4), blend modes

## 9b. Visual Tone & Photography

**Tone:** Illustration-driven

The site relies primarily on illustrations, vector art, and decorative SVG elements rather than photography. Use commissioned illustrations, icon sets, or generated graphics for clones — stock photos will feel off-brand.

**Canonical Brand Image (OG):**
- https://elevenlabs.io/cover.png (1200×630px)
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 1:1 (square / portrait)
- Rendered size: 256×256px
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 5 (19%)
- Portrait (<0.87): 1 (4%)
- Square (0.87–1.15): 20 (77%)

**Media Format Mix:**
- SVG: 12 (icons, illustrations, decorative geometry)

**Average rendered image size:** 324×284px
**Above-fold image count:** 6 / 26

**Decorative Patterns Detected:**
- 9 large decorative SVG shapes (≥200×200px, non-icon) — likely blob/illustration accents
- **Noise/grain texture** detected — adds tactile film grain to flat backgrounds

**Clone instruction for decorative work:** Decorative SVG accents are part of the brand — generate or source blob/illustration shapes to scatter behind content.

**Imagery Guidance for clones:**
- Use vector illustration as the primary visual language — photos will read as off-brand.
- Maintain consistent illustration style (line weight, color palette) across the site.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Pure White (`#fdfcfc`)
- Primary text: Pure Black (`#000000`)
- Accent: Pure White (`#ffffff`)
- Border: Whitesmoke (`#e5e5e5`)
- Font: Inter
- Body: 18px weight 400

### Example Component Prompts
- "Create a hero section on Pure White background (#fdfcfc). Headline at 48px Inter weight 300, line-height 1.08, letter-spacing -0.96px, color #000000."
- "Create the primary CTA button: `#ffffff` background, `#000000` text, 9999px border-radius, 18px 0px padding, 700 weight, Inter font."
- "Design a card on `#ffffff` background. Border: none. Radius: 16px. Shadow: use extracted shadow. Padding: 0px."
- "Build navigation: static on `#fdfcfc`. Inter 18px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Pure White (`#fdfcfc`) — every component is composited against this exact base.
2. **Typography**: All type in Inter, weight range 300–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: Pure White (`#ffffff`) is the sole interactive color. On hover → Ring Blue (`#2b7fff`). Use CSS transitions, not opacity/brightness filters.
4. **Shape**: CTAs at `9999px`, cards at `16px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
5. **Spacing**: Use the `--ca-space-*` token scale (10px–168px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
6. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-background: #fdfcfc;
  --ca-primary: #ffffff;
  --ca-surface-2: #ebe8e4;
  --ca-hairline: #e5e5e5;
  --ca-on-primary: #111111;
  --ca-primary-hover: #2b7fff;
}

/* Typography */
:root {
  --ca-font-primary: "Waldenburg", system-ui, sans-serif;
  --ca-text-display: 48px;
  --ca-text-body: 14px;
  --ca-text-small: 14px;
  --ca-text-button: 16px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 10px;
  --ca-space-sm: 20px;
  --ca-space-md: 64px;
  --ca-space-base: 100px;
  --ca-space-lg: 160px;
  --ca-space-xl: 168px;
  --ca-space-2xl: 176px;
  --ca-space-3xl: 184px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 14px;
  --ca-radius-lg: 20px;
  --ca-radius-xl: 24px;
  --ca-radius-full: 9999px;
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: hero
    tag: main
    height: 10672px
    width: full-bleed
    layout: block
    children: 6
    vertical-padding: ~64px (generous)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: feature-section
    tag: div
    classes: ["block-section"]
    height: 327px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["px-[var(--page-section-px)]", "[--page-section-px:var(--section-px-none)]", "md:pb-40", "pb-24"]
    height: 327px
    width: 1176px
    layout: block
    children: 1
    vertical-padding: ~80px (generous)
    padding: "120px 0px 40px"
  - section: feature-section
    tag: div
    classes: ["container", "relative"]
    height: 327px
    width: 1176px
    layout: block
    children: 1
    vertical-padding: ~80px (generous)
  - section: content-section
    tag: div
    classes: ["block-section"]
    height: 678px
    width: full-bleed
    layout: block
    children: 1
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: content-section
    tag: div
    classes: ["px-[var(--page-section-px)]", "[--page-section-px:var(--section-px-none)]", "md:pb-120", "pb-80"]
    height: 678px
    width: 1176px
    layout: block
    children: 1
    vertical-padding: ~60px (generous)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
    padding: "0px 0px 120px"
  - section: content-section
    tag: div
    classes: ["container", "relative"]
    height: 678px
    width: 1176px
    layout: block
    children: 1
    vertical-padding: ~60px (generous)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: gallery-grid
    tag: div
    classes: ["-tw-mx-px", "tw-bg-cream", "tw-grid", "tw-gap-x-16"]
    height: 558px
    width: 1178px
    layout: grid: 3-col gap=normal 64px
    children: 3
    bg: "rgb(245, 243, 241)"
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
    padding: "0px 32px"
  - section: unknown
    tag: div
    classes: ["tw-flex", "tw-gap-x-3", "tw-p-4", "tw-@container"]
    height: 80px
    width: 380px
    layout: flex-row justify=normal
    children: 2
    padding: "16px"
  - section: unknown
    tag: div
    classes: ["block-section"]
    height: 279px
    width: full-bleed
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["container", "relative", "border-l", "border-r"]
    height: 279px
    width: 1176px
    layout: block
    children: 2
    vertical-padding: ~40px
  - section: unknown
    tag: div
    classes: ["px-[var(--page-section-px)]", "[--page-section-px:var(--section-px-none)]", "md:pb-40", "pb-24"]
    height: 278px
    width: 1174px
    layout: block
    children: 1
    vertical-padding: ~40px
    padding: "40px 0px"
  - section: unknown
    tag: div
    classes: ["block-section"]
    height: 269px
    width: full-bleed
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["container", "relative", "border-l", "border-r"]
    height: 269px
    width: 1176px
    layout: block
    children: 2
    vertical-padding: ~100px (airy)
  - section: unknown
    tag: div
    classes: ["px-[var(--page-section-px)]", "[--page-section-px:var(--section-px-default)]", "md:pb-40", "pb-24"]
    height: 268px
    width: 1174px
    layout: block
    children: 1
    vertical-padding: ~100px (airy)
    padding: "160px 48px 40px"
  - section: unknown
    tag: div
    classes: ["block-section"]
    height: 530px
    width: full-bleed
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["px-[var(--page-section-px)]", "[--page-section-px:var(--section-px-default)]", "pb-16", "pt-0"]
    height: 530px
    width: 1174px
    layout: block
    children: 1
    padding: "0px 48px 16px"
  - section: unknown
    tag: div
    classes: ["container", "relative", "border-l", "border-r"]
    height: 530px
    width: 1176px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["block-section"]
    height: 388px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["container", "relative", "border-l", "border-r"]
    height: 388px
    width: 1176px
    layout: block
    children: 2
    vertical-padding: ~100px (airy)
  - section: feature-section
    tag: div
    classes: ["px-[var(--page-section-px)]", "[--page-section-px:var(--section-px-default)]", "md:pb-40", "pb-24"]
    height: 387px
    width: 1174px
    layout: block
    children: 1
    vertical-padding: ~100px (airy)
    padding: "160px 48px 40px"
  - section: content-section
    tag: div
    classes: ["block-section"]
    height: 854px
    width: full-bleed
    layout: block
    children: 1
  - section: content-section
    tag: div
    classes: ["px-[var(--page-section-px)]", "[--page-section-px:var(--section-px-sm)]", "pb-0", "md:pb-0"]
    height: 854px
    width: 1174px
    layout: block
    children: 1
    padding: "0px 16px"
  - section: content-section
    tag: div
    classes: ["container", "relative", "border-l", "border-r"]
    height: 854px
    width: 1176px
    layout: block
    children: 1
  - section: logo-strip
    tag: div
    classes: ["block-section"]
    height: 124px
    width: full-bleed
    layout: block
    children: 1
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "Powering the best enterprises, creators, and developers. From ElevenAgents for customer experience,"
    - "Trusted by leading developers and enterprises"
    - "Two platforms built on the same research foundation"
    - "Safety, built in"
  sub-headings:
    - "ElevenCreative"
    - "Create ultra-realistic speech, turn ideas into videos, compose music in any genre, or design immersi"
    - "All-in-one AI editor"
    - "Ultra-realistic speech"
    - "Text to Speech API"
    - "Eleven Multilingual v2"
  ctas:
    - "Skip to content"
    - "ElevenCreative"
    - "Resources"
    - "Log in"
    - "Sign up"
    - "Contact sales"
  navigation:
    - "ElevenCreative"
    - "ElevenAgents"
    - "ElevenAPI"
    - "Enterprise"
    - "Pricing"
  footer-links:
    - "ElevenCreative"
    - "Text to Speech"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  logo:
    count: 1
    avg-ratio: 2.85
    common-aspect: "~16:6 banner"
  product:
    count: 14
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
  thumbnail:
    count: 17
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Skip to content
</button>
```
_Source pattern detected: padding `0px 16px` · radius `9999px` · weight `400`_

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `0px` · radius `16px` · shadow `rgba(0, 0, 0, 0.4) 0px 0px 1.143px 0px, rgba(0, 0, 0, 0.04) `_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 4 · **cta** 3 · **auth** 1 · **pricing** 1 · **docs** 2 · **blog** 30 · **project** 5 · **social** 1 · **other** 13

**Primary actions (conversion path):**
- Account access — "Log in" (login/signup) → `https://elevenlabs.io/app/sign-in`
- Primary call-to-action — "Sign up" (the conversion path) → `https://elevenlabs.io/app/sign-up`
- Primary call-to-action — "Sign up" (the conversion path) → `https://elevenlabs.io/app/sign-up?redirect=%2Fapp%2Fvoice-library`
- Primary call-to-action — "Get started" (the conversion path) → `https://elevenlabs.io/app/sign-up`

**Projects / case studies detected** (clustered by URL + featured image):

*App* — medium confidence, 8 items:

| Title | Featured image | Link |
|---|---|---|
| Advertisement | — | https://elevenlabs.io/app/voice-library?use_cases=advertisement |
| Characters | — | https://elevenlabs.io/app/voice-library?use_cases=characters_animation |
| Narration | — | https://elevenlabs.io/app/voice-library?use_cases=narrative_story |
| Conversational | — | https://elevenlabs.io/app/voice-library?use_cases=conversational |
| Social Media | — | https://elevenlabs.io/app/voice-library?use_cases=social_media |
| Log in | — | https://elevenlabs.io/app/sign-in |
| Sign up | — | https://elevenlabs.io/app/sign-up |
| Sign up | — | https://elevenlabs.io/app/sign-up?redirect=%2Fapp%2Fvoice-library |

**Signals:** 27/60 links carry a featured image · dominant link roles: inline-link (28), content-card (23), navigation (4).


---
## Extraction Completeness: 82/100 (B)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 22 | 25 | 16 named colors |
| Typography | 20 | 20 | 8 roles defined |
| Components | 16 | 20 | 4 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 10 | 10 | 457 vars |
| Responsive Breakpoints | 2 | 5 | 2 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (Waldenburg, WaldenburgFH, Inter)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **Limited breakpoint data** — fewer than 3 media query breakpoints detected. The site may use fluid CSS (clamp/vw) or container queries for responsiveness rather than traditional breakpoints.
- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.

*✅ No critical extraction gaps detected — high-confidence reproduction expected.*

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 457 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 8 typography roles inferred |
| §4 Components | Medium | 4 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 20 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | Medium | 2 breakpoints detected |
| §9b Photography | High | 26 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

8 font file(s) captured (199KB total). When running `prism add`, fonts are saved to `extractions/elevenlabs.io/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Fallback';
  /* src: url('/fonts/Inter-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  /* src: url('/fonts/Geist-Mono.woff2') format('woff2'); */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono Fallback';
  /* src: url('/fonts/Geist-Mono-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Waldenburg Fallback';
  /* src: url('/fonts/Waldenburg-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'WaldenburgFH Fallback';
  /* src: url('/fonts/WaldenburgFH-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Waldenburg';
  /* src: url('/fonts/Waldenburg.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Waldenburg';
  /* src: url('/fonts/Waldenburg.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Waldenburg';
  /* src: url('/fonts/Waldenburg.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'WaldenburgFH';
  /* src: url('/fonts/WaldenburgFH.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Waldenburg-ML';
  /* src: url('/fonts/Waldenburg-ML.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Waldenburg-ML';
  /* src: url('/fonts/Waldenburg-ML.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Waldenburg-ML';
  /* src: url('/fonts/Waldenburg-ML.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'WaldenburgFH-ML';
  /* src: url('/fonts/WaldenburgFH-ML.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

**22 @keyframes found** — these are the real animation definitions:

```
@keyframes fake-progress { ... }
@keyframes tw-noise-drift { ... }
@keyframes tw-pulse { ... }
@keyframes tw-spin { ... }
@keyframes tw-typing-dot-bounce { ... }
@keyframes move-bg { ... }
@keyframes text-reveal-word { ... }
@keyframes text-reveal-fill { ... }
@keyframes ping { ... }
@keyframes fade-in { ... }
@keyframes spin { ... }
@keyframes enter { ... }
@keyframes exit { ... }
@keyframes fadeTranslateXIn { ... }
@keyframes fadeTranslateYIn { ... }
@keyframes ds-slide { ... }
@keyframes pulse { ... }
@keyframes opacity { ... }
@keyframes pop { ... }
@keyframes fadeInScaleY { ... }
@keyframes fadeIn { ... }
@keyframes shimmer-text { ... }
```

<details><summary>Full keyframes CSS (22 animations)</summary>

```css
@keyframes fake-progress{0%{transform:scaleX(0)}1%{transform:scaleX(.3)}10%{transform:scaleX(.4)}20%{transform:scaleX(.55)}40%{transform:scaleX(.75)}60%{transform:scaleX(.85)}80%{transform:scaleX(.92)}
@keyframes tw-noise-drift{0%{transform:translateZ(0)}10%{transform:translate3d(-5%,-5%,0)}20%{transform:translate3d(-10%,5%,0)}30%{transform:translate3d(5%,-10%,0)}40%{transform:translate3d(-5%,15%,0)}50%{transform:translate3d(-10%,5%,0)}60%{transform:translate3d(15%,0,0)}70%{transform:translate3d(0,10%,0)}80%{transform:translate3d(-15%,0,0)}90%{transform:translate3d(10%,5%,0)}
@keyframes tw-pulse{50%{opacity:.5}}
@keyframes tw-spin{to{transform:rotate(1turn)}}
@keyframes tw-typing-dot-bounce{0%,58%,to{opacity:.6;transform:translateY(0)}28%{opacity:.6;transform:translateY(-3px)}}
@keyframes move-bg{0%{background-position:0 0}
@keyframes text-reveal-word{0%{opacity:0;transform:scaleY(.95) scaleX(.92);filter:blur(12px)}15%{opacity:.1}40%{transform:scaleY(1) scaleX(1)}60%{transform:scaleY(1) scaleX(1);filter:blur(0)}
@keyframes text-reveal-fill{to{background-size:0 100%}}
@keyframes ping{75%,to{transform:scale(2);opacity:0}}
@keyframes fade-in{0%{opacity:0}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}
@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}
@keyframes fadeTranslateXIn{0%{opacity:0;transform:translateX(var(--translate-x-from,100%))}
@keyframes fadeTranslateYIn{0%{opacity:0;transform:translateY(var(--translate-y-from,100%))}
@keyframes ds-slide{0%{transform:translateX(-150%) scale(var(--ds-scale));filter:blur(20px)}15%{filter:blur(0)}85%{filter:blur(0)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,1)}80%{box-shadow:0 0 0 0 rgba(255,255,255,1)}
@keyframes opacity{0%{opacity:.5}50%{opacity:1}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.04)}70%{transform:scale(.97)}
@keyframes fadeInScaleY{0%{opacity:0;transform:scaleY(1.5)}
@keyframes fadeIn{0%{opacity:0}
@keyframes shimmer-text{0%{background-position:100% 0}
```
</details>

### Brand Gradient Palette

**3 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: linear-gradient(to left,var(--marker-background-color,white);

/* Gradient 2 */
background: linear-gradient(to right,var(--marker-background-color,white);

/* Gradient 3 */
background: radial-gradient(ellipse at center,black 0,black 24%,rgb(0 0 0/.55);

```

### Hover State CSS (Intercepted)

**1 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
.typography>:is(p,ul,ol,blockquote,h2,h3,h4) a:hover,.typography>a:hover{text-decoration-color:#000}

.typography-white>:is(p,ul,ol,blockquote,h2,h3,h4) a:hover,.typography-white>a:hover{text-decoration-color:#FFF}
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 4369 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**2 breakpoints** read from the live `@media` rules (not guessed):
`480px` · `1024px`

### Measured Design Scale
**Type scale by usage** (× = paint count): `18px`×1339 · `14px`×1228 · `15px`×691 · `16px`×683 · `13px`×228 · `36px`×96 · `20px`×42 · `12px`×21

**Radius scale** (× = paint count): `9999px`×197 · `4px`×179 · `20px`×76 · `2px`×22 · `18px`×12 · `14px`×10 · `24px`×8 · `16px`×8

**Weights** (× = paint count): `400`×2987 · `500`×1233 · `300`×122 · `700`×24

**Layout gaps** (× = paint count): `6px`×24 · `8px`×20 · `normal 48px`×8 · `16px`×8 · `normal 12px`×5 · `10px`×5 · `4px`×4 · `normal 8px`×3

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px
rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset
rgba(0, 0, 0, 0.1) 0px 0px 0px 0.5px inset
rgba(0, 0, 0, 0.08) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.04) 0px 1.677px 3.354px 0px
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { font-family:var(--f-body-01-font-family); font-weight:var(--f-body-01-font-weight); font-size:var(--f-body-01-font-size) }
body { background-color:var(--page-background-color) }
h1 { font-family:var(--font-waldenburg); font-weight:300; font-size:var(--tw-font-size-6xl) }
h1 { color:rgb(0 0 0/var(--tw-text-opacity,1)) }
h2 { font-family:var(--font-inter); font-weight:400; font-size:var(--tw-font-size-base) }
button { font-family:inherit; font-size:100%; font-weight:inherit; color:inherit }
button { gap:8px; color:#949494; font-size:16px; font-weight:700; background:none; font-family:WaldenburgHF,"WaldenburgHF Fallback",sans-serif; background-color:initial }
button { color:#000 }
a { color:#000; font-weight:bold }
input { font-family:inherit; font-size:100%; font-weight:inherit; color:inherit }
input { border-radius:100px; background-color:#fff; background:#efefef; transition:background .2s linear }
input { background:#000; background-color:rgb(0, 0, 0) }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://elevenlabs.io | 2026-06-11T05:00:34.443Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*