coderef

ElevenLabs

ElevenLabs is an AI research and product company that began with human-like voice technology and now describes three distinct offerings: ElevenAgents for customer-facing voice and chat agents, ElevenCreative for creator and marketing…
DownloadRaw
elevenlabs.ioVisit ↗
View full
elevenlabs.ioVisit site ↗
ElevenLabs website, full page

Palette

At a glance

Website
elevenlabs.io ↗
Theme
light
Typefaces
System
Sections
10
Length
1,905 words

Add it to your project

Then prompt your agent

Design System · ElevenLabs

Light and dark previews, tokens and a ready-to-use package, generated from this DESIGN.md. No AI involved: the same file always produces the same output.

Generating design system…

DESIGN.md

DownloadRaw
Design tokens (YAML front matter)
name: ElevenLabs
colors:
  canvas: '#ffffff'
  surface: '#f5f3f1'
  foreground: '#000000'
  muted: '#777169'
  hairline: '#e5e5e5'
  primary: '#000000'
  on-primary: '#ffffff'
typography:
  display:
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.08
    use: Waldenburg h1 on captured public marketing home
  body:
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    use: Inter repeated body/list text on captured public routes
  control:
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1
    use: Inter public primary-action sample
rounded:
  sm: 4px
  md: 12px
  lg: 16px
  full: 9999px
spacing:
  xs: 4
  sm: 6
  md: 8
  lg: 12
  xl: 16
  xxl: 20
components:
  public-selected-tab:
    type: tab
    rounded: 14px
    padding: 0px 21px 0px 20px
    typography: 18px/400 Inter
    states: selected via aria-selected=true; no measured visual delta
    use: One public-home selected tab; not a product-wide component contract
fonts:
  roles:
    ui: Inter
    display: Waldenburg

Design System Inspiration of ElevenLabs

Overview

Visual Theme & Atmosphere

ElevenLabs is an AI research and product company that began with human-like voice technology and now describes three distinct offerings: ElevenAgents for customer-facing voice and chat agents, ElevenCreative for creator and marketing workflows, and ElevenAPI for developers. Its official brand system keeps the parent identity spare—black, white, the two-bar “11” pause-like symbol, and disciplined naming—while giving each platform a separate graphic and color approach. The supplied public capture of the marketing home, a customer story, and pricing reinforces that distinction: black-and-white actions, warm near-neutrals, low-contrast borders, Inter for the repeated reading rhythm, and light Waldenburg display moments. These are public communication surfaces, not evidence of the authenticated product interface or documentation chrome. About · Brand guidelines

Key characteristics:

  • Parent-brand public chrome is neutral: #000000, #ffffff, #f5f3f1, and #e5e5e5 are selector-backed observations.
  • The official “11” symbol abstracts eleven and references a pause icon; its clear-space and naming rules belong to brand use, not a UI component library.
  • Inter is the repeated live UI/body family; light-weight Waldenburg is a live public display family.
  • ElevenAgents, ElevenCreative, and ElevenAPI have official platform-specific identities and must not be reduced to one parent-product palette.

Primary tasks

  • Build a customer-facing voice or chat agent with testing and monitoring.
  • Generate and edit speech, music, image, and video in the browser.
  • Call the AI audio models from code using the official SDKs.
  • Make a piece of content available in another language and voice.

Brand Narrative

ElevenLabs says it was founded in 2022 by Piotr Dąbkowski and Mati Staniszewski after the two reflected on poor dubbing in films they watched while growing up in Poland. The company’s own help material describes that origin as the motivation for improving voice dubbing and states a mission of making content accessible in any language and voice. Press · What is ElevenLabs?

Its current public account is broader than the original voice model: the About page names an agent platform for businesses, a creative platform for creators and marketers, and an API platform for developers. That shift explains why the official brand system deliberately gives the three platforms their own graphic treatment instead of using one visual vocabulary everywhere.

Principles

  1. Make communication and creation more seamless. UI implication: state the relevant capability and audience before styling a generic “AI” surface.
  2. Keep platform identities legible. UI implication: preserve official platform names and do not transplant an Agents or Creative color direction into the parent brand without context.
  3. Treat safety as part of the product. UI implication: make consent, provenance, reporting, and misuse boundaries understandable where the relevant flow is evidenced.
  4. Use the official mark with discipline. UI implication: protect the “11” symbol’s clear space and never reconstruct it with text characters.

Personas

The official sources identify stakeholder groups rather than named user personas; no fictional individual is asserted here.

  • Businesses deploying agents: ElevenAgents is described as supporting voice and chat agents with integrations, testing, monitoring, and reliability.
  • Creators and marketers: ElevenCreative is described as a browser-based environment for generating and editing speech, music, image, and video.
  • Developers: ElevenAPI provides access to AI audio models through APIs and official SDKs.
  • Accessibility and nonprofit recipients: the Impact program provides free licenses to qualifying individuals and organizations. About · Documentation

Colors

Selector-backed public surfaces

  • Canvas / inverse action (#ffffff): observed page and public inverse-action background.
  • Primary public action / foreground (#000000): observed black public action and primary text.
  • Warm public surface (#f5f3f1): observed on a pill-shaped home control only; not a global canvas claim.
  • Muted text (#777169): repeated public-route muted text.
  • Hairline (#e5e5e5): repeated computed border color across the captured routes.
  • On primary (#ffffff): observed text on the black public action.

Official platform-brand boundary

The official brand page assigns blue to ElevenAgents, orange to ElevenCreative, and a monochrome approach to ElevenAPI. It does not provide selector-backed CSS values in this packet, so no platform hue is promoted into the parent token set. The supplied capture is public marketing/editorial/pricing evidence only; it does not establish an authenticated dashboard palette.

Typography

Evidence classes

Evidence class Family and boundary
Live computed surface-use Inter is loaded/high with 879 observed uses across the supplied public routes, with CDN source URLs. Waldenburg is loaded/high with 22 observed uses and three ElevenLabs CDN font files; observed samples include a 48px/300 home h1 and 36px/300 headings.
Official product-use No official source in this packet names a product UI font family. The official documentation establishes the separate developer-doc domain but was not raw-style inspected.
Official distributed brand asset The official brand page distributes logo and symbol assets, not a font package or font license. It supports brand-mark use only.
Declared-only Geist Mono, WaldenburgFH, Waldenburg-ML, and listed fallback families have declared/source evidence in the capture but no visible loaded use. They are not UI-family tokens or specimen claims.
System / unresolved No system fallback is substituted for an identified family; no font-license claim is made where an official font-license source was not found.

Selector-backed hierarchy

Role Family Size Weight Line height Use
Public display Waldenburg 48px 300 1.08 Captured home h1
Public section heading Waldenburg 36px 300 1.17 Captured public h2
Repeated reading text Inter 18px 400 1.60 Captured list/body text
Public action sample Inter 15px 400 1.00 One black home action

Layout

The supplied desktop public routes repeat compact 4px text-control corners alongside 12px/16px containers and full-pill actions. Their spacing observations include 4, 6, 8, 12, 16, and 20px values. Those values support a restrained public rhythm but do not prove a universal spacing scale or a product-layout grid. Official platform art direction—spheres for Agents and Chladni-pattern variations for Creative/API—belongs to platform-brand materials rather than to this parent marketing token set.

Responsive Behavior

No mobile viewport or breakpoint behavior is present in the supplied evidence. Preserve the observed public components’ content semantics when adapting a layout, but do not claim a specific collapse threshold, mobile navigation pattern, or touch-target size without new route-specific evidence.

Elevation & Depth

Only two selector-backed public depth treatments are retained: the white public action’s dark 1px-like edge plus low-alpha 1px/2px lift, and the home editorial card’s 0px 2px 4px low-alpha shadow. The capture has no evidence for a universal shadow ladder, modal elevation, or authenticated-product layers.

Motion & Easing

No motion duration, easing value, or reduced-motion behavior was measured in the supplied artifact, and the official brand guidance reviewed here describes graphics rather than a UI motion specification. No motion token is asserted.

Components

Public actions

Black public action

  • Background: #000000
  • Text: #ffffff
  • Radius: 9999px
  • Padding: 0px 14px
  • Font: 15px / 400 / Inter
  • Use: One public-home action at home::[data-omd-capture="63"]; do not generalize to an authenticated product button.

White public action

  • Background: #ffffff
  • Text: #000000
  • Radius: 9999px
  • Shadow: rgba(0, 0, 0, 0.4) 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 1px, rgba(0, 0, 0, 0.04) 0px 2px 4px
  • Use: Repeated public-route action at home::[data-omd-capture="97"]; capture does not establish its semantic variant name.

Warm public pill

  • Background: #f5f3f1
  • Text: #000000
  • Radius: 9999px
  • Padding: 0px 16px
  • Font: 15px / 400 / Inter
  • Use: Home-only public control at home::[data-omd-capture="32"].

Public content and navigation

Editorial card

  • Background: #ffffff
  • Radius: 16px
  • Shadow: rgba(0, 0, 0, 0.4) 0px 0px 1.143px, rgba(0, 0, 0, 0.04) 0px 2px 4px
  • Use: Public-home article capture; it is not a general dashboard-card contract.

Listbox trigger

  • Radius: 12px
  • Padding: 0px 8px 0px 12px
  • Font: 15px / 500 / Inter
  • Use: Public-home button with aria-haspopup="listbox" at home::[data-omd-capture="59"].

Selected public tab

  • Radius: 14px
  • Padding: 0px 21px 0px 20px
  • Use: Selected role="tab" capture at home::[data-omd-capture="12"]. No selected-color change, hover, focus, or pressed style was observed.

The supplied artifact records zero interaction expansions. Its disabled buttons and aria-selected tabs are structural observations only; unmeasured state styling and unobserved menu/dialog variants are intentionally omitted.

States

The supplied public capture includes structural disabled buttons and selected tabs but no measured authenticated-product, loading, error, success, form-validation, or expanded interaction state. Preserve only the documented public selected/disabled provenance in §4; omit product-state recipes rather than invent them.

Do’s and Don’ts

Do

  • Use the black/white action pairing only where the public-surface context calls for it.
  • Keep live Inter reading/UI and light Waldenburg display roles distinct.
  • Preserve official platform names exactly: ElevenAgents, ElevenCreative, and ElevenAPI.
  • Treat Agents blue, Creative orange, and API monochrome as platform-brand direction until route-local UI values are observed.

Don’t

  • Don’t apply parent marketing neutrals as an asserted authenticated-product palette.
  • Don’t substitute a system or fallback face for declared-only Geist Mono or WaldenburgFH.
  • Don’t invent hover, focus, expanded-menu, or pressed visual variants from structural ARIA/state observations.
  • Don’t alter the official “11” symbol, its construction, or the prescribed platform names.

Voice & Tone

Official copy is direct, technically specific, and mission-led: the company describes itself as an AI research and product company making communication and creation with technology seamless, while its documentation routes audiences through product-specific paths and concrete API examples. Safety language is explicit rather than ornamental: the safety page frames safeguards as part of development, deployment, and misuse prevention. About · Documentation · Safety

Context Evidence-backed direction
Parent brand Describe the research/product company and its three named platforms plainly.
Documentation Use example-first, capability-specific language; do not borrow unobserved docs-chrome styles.
Safety Name the safeguard, traceability, or accountability point directly.
Brand naming Keep ElevenLabs, ElevenAgents, ElevenCreative, and ElevenAPI in their official forms.

Agent Prompt Guide

Quick public-surface reference

  • Canvas: #ffffff
  • Foreground / black action: #000000
  • Warm pill: #f5f3f1
  • Muted text: #777169
  • Hairline: #e5e5e5
  • Display: Waldenburg 48px/300 on one public-home h1
  • Reading text: Inter 18px/400/1.60

Safe prompt boundary

“Create a public marketing action using the observed black #000000 fill, white text, 9999px radius, 0px 14px padding, and 15px/400 Inter label. Keep it scoped to a parent-brand marketing context; do not present it as a measured ElevenLabs dashboard component.”

More like ElevenLabs

All brands designs →

Brand names describe the visual style only; coderef is not affiliated with or endorsed by any brand listed. Licenses