elevenlabs.io website design: fonts, colors and UI patterns

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.