# How elevenlabs.io is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/elevenlabs.io-design)

Last updated: 2026-07-28

# How elevenlabs.io is designed

## Design character

ElevenLabs splits into two tightly related faces: a dark, cinematic marketing site and a denser product app (Studio/Home/Agents) on near-black surfaces with violet/blue accents. The through-line is high-contrast type, soft rounded controls, and AI-product clarity—premium audio tech without skeuophonic gimmicks.

## Foundations

### Color

Measured:

- **App/marketing deep base:** `#0f0f10`
- **Muted text:** `#787881`
- **Pure black:** `#000000` in places
- **Visual accents:** electric blue/violet gradients on marketing heroes; lighter gray panels in app shells
- **Primary text on dark:** white / off-white
- **Cards:** slightly lifted charcoal surfaces

Marketing leans more dramatic (gradient washes, big claims); the app keeps neutrals for long sessions.

### Typography

No declared families. Observed:

- App UI body 16/24 at 400–500
- Compact labels 12–14 / 16–20
- Marketing display much larger (visual hero statements)
- Medium weights for emphasis instead of heavy bold everywhere

### Spacing and layout

- App padding clusters: 10–12–20px; top padding ~50px in some shells
- Radii: **4, 8, 10, 14, 24px** common—cards softer (14–24), chips tighter (4–10)
- Marketing: wide heroes, feature rows, pricing tables
- App: left nav + main canvas + occasional right inspectors

## Visual language

- Dark glass/charcoal panels
- Pill and soft-rectangle buttons
- Gradient light streaks on marketing only
- Product screenshots and waveform/agent diagrams as proof
- Minimal illustration noise

## Components and states

- Marketing nav with product menus + Login/Signup
- Hero with primary/secondary CTAs
- Logo wall and feature grid
- App shell: sidebar, tabbed workspace, cards for projects/agents
- Pricing comparison table
- Agents landing with deployment messaging

## Responsive behavior

Captures include wide desktop app shells and slightly narrower marketing widths. App keeps sidebar patterns on desktop; mobile app chrome not evidenced.

## Practical guidance

**Preserve**

- Near-black base `#0f0f10` with muted `#787881` text
- Soft 10–24px rounding on cards vs tighter controls
- Clear split: dramatic marketing gradients vs calmer app neutrals
- 16/24 UI type baseline

**Avoid**

- Light playful pastels that undercut the audio-AI premium feel
- Mixing loud gradients into dense Studio workflows
- Sharp zero-radius enterprise tables in marketing cards

## Scope note

Eight captures: marketing home, agents, pricing, and in-app home/studio. Color roles limited; radii/spacing partially measured. Font names unknown.

## Captured pages

[![Marketing home](https://pin.fontofweb.com/9194?format=jpg)](https://design.withfudge.com/share/pin-9194)

[Marketing home](https://design.withfudge.com/share/pin-9194)

[![App home](https://pin.fontofweb.com/9195?format=jpg)](https://design.withfudge.com/share/pin-9195)

[App home](https://design.withfudge.com/share/pin-9195)

[![Agents marketing](https://pin.fontofweb.com/9190?format=jpg)](https://design.withfudge.com/share/pin-9190)

[Agents marketing](https://design.withfudge.com/share/pin-9190)

[![Studio app](https://pin.fontofweb.com/9196?format=jpg)](https://design.withfudge.com/share/pin-9196)

[Studio app](https://design.withfudge.com/share/pin-9196)

[![Pricing](https://pin.fontofweb.com/4926?format=jpg)](https://design.withfudge.com/share/pin-4926)

[Pricing](https://design.withfudge.com/share/pin-4926)

## Colors

- `#0f0f10`
- `#787881`
- `#000000`
- `#ffffff`