ElevenLabs

Overview

ElevenLabs is an AI voice generation and voice agents platform serving enterprises, creators, and developers with lifelike speech synthesis across 70+ languages. The design system embodies 'Minimalist Precision'—a philosophy that pairs a clean, light canvas (#fdfcfc) with bold, purposeful accent colors (primary blue #0a59d2 and secondary red #f41a2f) to create an interface that feels both approachable and technically sophisticated. The visual language prioritizes clarity and directness: generous whitespace, refined typography hierarchy using Waldenburg for display and Inter for body text, and restrained use of color to guide user attention toward key actions. The emotional response is one of confidence and accessibility—users feel empowered to explore powerful AI capabilities without cognitive overload.

The brand voice is precise, professional, and human-centered. ElevenLabs speaks in clear, action-oriented language without jargon; the tone is encouraging but never breathless. Example: 'Create lifelike speech with our AI voice generator and voice agents platform. Access 5,000+ voices in 70+ languages with secure APIs and SDKs.' The vocabulary emphasizes capability, trust, and scale. Personality traits: authoritative yet approachable, technical yet accessible, ambitious yet grounded.

Colors

The color system is anchored by a light, neutral surface palette (#fdfcfc as primary surface, #f5f3f1 as surface-dim) that provides a calm, professional backdrop. Primary color (#0a59d2) is a vibrant, saturated blue used exclusively for interactive elements—buttons, links, focus states, and key CTAs. This blue commands attention without aggression and conveys trust and technological sophistication. Secondary color (#f41a2f) is a bold red reserved for alerts, error states, and high-priority messaging; it appears sparingly to maintain impact. Tertiary color (#19a2c1) is a teal used for supporting accents and secondary information hierarchies. The surface stack progresses from #fdfcfc (surface) through #f5f3f1 (surface-dim) to #ebe8e4 (surface-container) and #d7d2cc (surface-container-highest

Typography

The type system uses a two-family strategy: Waldenburg (light-weight, elegant serif) for display and headline scales to establish visual hierarchy and brand personality, and Inter (neutral sans-serif) for body, label, and UI text to ensure legibility at small sizes. Display text (96px, 700 weight, -0.04em letter-spacing) commands attention on hero sections; headline-lg (60px, 300 weight, -0.03em) is used for major section titles with refined, understated elegance. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size, with generous line-height (140%) for comfort. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to buttons and UI controls, with uppercase variants (0.05em letter-spacing) for emphasis. All typography uses token references to ensure consistency;

Layout

The layout system uses a 12-column grid with responsive breakpoints at 40rem (md), 64rem (lg), 80rem (xl), and 96rem (2xl). Container max-width is 1440px with outer gutters that scale: 20px on mobile (sm), 40px on tablet and desktop (md/lg), and 64px on ultra-wide screens (xl/2xl). Inner grid column spacing (--inner-gutter) is 8px on mobile, 16px on tablet, and 20px on desktop. Semantic spacing tokens drive rhythm: lg spacing (40px) separates major sections, md spacing (24px) groups related content, and sm spacing (12px) provides breathing room within components. The page background is always {colors.surface} (#fdfcfc), with content containers using surface-container (#ebe8e4) or surface-bright (#ffffff) to create subtle depth without visual clutter. Whitespace is treated as a first-class

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than heavy drop shadows. Level 1 (Base): the page background at {colors.surface} (#fdfcfc) with no shadow. Level 2 (Standard Card): {colors.surface-bright} (#ffffff) with elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle separation. Level 3 (Elevated/Hover): {colors.surface-bright} with elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)) when hovered or in focus, creating a gentle lift. Level 4 (Modal/Overlay): {colors.surface-bright} with elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12)) for maximum prom

Shapes

The shape philosophy is 'Refined Minimalism'—rounded corners are used strategically to soften the interface without sacrificing clarity. Buttons and primary CTAs use {rounded.full} (9999px) for a pill shape that feels modern and approachable, emphasizing their role as primary actions. Cards and containers use {rounded.lg} (1rem / 16px) for a subtle, professional curve that avoids the clinical feel of sharp corners. Input fields and secondary UI elements use {rounded.DEFAULT} (0.5rem / 8px) for a balanced, neutral appearance. Badges and small accent elements use {rounded.full} (9999px) to draw

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#0a59d2) background with {colors.on-primary} (#ffffff) text, {rounded.full} (9999px), 12px horizontal padding, and 44px height for touch-friendly targets. On hover, background transitions to #0a4db8 (darker primary) over 200ms. Button-secondary uses a transparent background with {colors.outline} (1px border) and {colors.on-surface} text, maintaining the same dimensions and border-radius. On hover, background becomes {colors.surface-container-high} (#e0dcd6). Button-ghost is transparent with no border, used for tertiary actions; on hover, background becomes {colors.surface-container} (#ebe8e4). All buttons use {typography.label-md} (14px, 600 weight) except primary buttons which use 400 we

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0a59d2) exclusively for interactive elements and CTAs—never for backgrounds or decorative elements.
• Do maintain minimum 40px vertical spacing between major sections and 24px padding inside cards to preserve the airy, premium feel.
• Do apply {typography.label-md} (14px, 600 weight) to all button text and UI controls for consistent visual weight.
• Do use {rounded.full} (9999px) for primary buttons and {rounded.lg} (16px) for cards to establish clear visual hierarchy.
• Do transition all interactive state changes (hover, focus, active) over 150–200ms with ease-in-out timing for responsive feel.
• Do apply the 3px focus ring at rgba(10, 89, 210, 0.1) to all interactive elements for WCAG AA keyboard navigation compliance.

**Don't**

• Don't use secondary color (#f41a2f) for anything other than alerts, errors, and high-priority warnings—overuse dilutes impact.
• Don't apply shadows heavier than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) or use blur effects; the system relies on color and subtle shadows for depth.
• Don't mix Waldenburg and Inter within a single heading or body paragraph—use Waldenburg for display/headline scales only, Inter for body/label.
• Don't reduce line-height below 24px for body text or below 20px for labels; the system prioritizes readability over density.
• Don't use {colors.on-surface} (#1c1c1c) for disabled states—use {colors.on-surface-variant} (#777169) at 50% opacity instead.
• Don't create custom border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); consistency is essential for visual coherence.