# ElevenLabs — Design System
> AI voice generator and conversational agents platform.
- **Canonical:** https://uiuxskills.com/library/elevenlabs
- **Source:** https://elevenlabs.io
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:16:19.546Z

---

---
version: alpha
name: ElevenLabs
description: AI voice generator and conversational agents platform.
tone: >-
  Professional, innovative, and precise. The tone is authoritative yet accessible, focusing on
  technical capability and enterprise-grade performance.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FDFCFC"
  surface-dark: "#1A1A1A"
  on-surface: "#000000"
  on-inverse: "#FFFFFF"
  outline: "#E5E5E5"
  error: "#D93025"
  success: "#1E8E3E"
  info: "#1A73E8"
  focus-ring: "#000000"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-inverse}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
    textColor: "{colors.on-inverse}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#555555"
  badge:
    backgroundColor: "#F0F0F0"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FDE7E7"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-info:
    backgroundColor: "{colors.info}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.08)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

ElevenLabs delivers a high-performance, research-driven AI audio platform. The visual identity is clean, modern, and enterprise-focused, utilizing a high-contrast monochromatic palette with subtle texture to convey technical sophistication and reliability.

## Colors

The color strategy relies on a strict monochromatic system to maintain a professional, high-contrast aesthetic that prioritizes readability and technical clarity.

*   Primary (`#000000`): Used for primary actions, high-impact text, and focus states.
*   Surface (`#FDFCFC`): The primary background color for the site.
*   Surface-Dark (inferred) (`#1A1A1A`): Used for dark mode sections and high-contrast containers.
*   On-Surface (`#000000`): Standard text color for light surfaces.
*   On-Inverse (`#FFFFFF`): Text color for dark-mode components and primary buttons.
*   Outline (inferred) (`#E5E5E5`): Border color for dividers and structural containers.
*   Error (inferred) (`#D93025`): Semantic color for errors and critical alerts.
*   Success (inferred) (`#1E8E3E`): Semantic color for success states.
*   Info (inferred) (`#1A73E8`): Semantic color for informational elements.
*   Focus-Ring (inferred) (`#000000`): The standard focus state indicator for interactive elements.

## Typography

The typography uses the Inter font family to ensure a clean, legible, and modern interface across all screen sizes.

*   Display-lg (inferred): Used for primary hero headlines.
*   Display-md (inferred): Used for major section headers.
*   Headline-lg (inferred): Used for sub-headers.
*   Headline-md (inferred): Used for feature titles.
*   Headline-sm (inferred): Used for card titles.
*   Body-md (inferred): Standard body text for paragraphs.
*   Label-sm (inferred): Used for small UI labels and button text.

## Layout

The site utilizes a responsive grid system with a generous max-width container and a 4px base spacing unit to maintain consistent rhythm. The page structure follows a logical flow: nav, hero, features, customer-stories, product-showcase, api-section, and footer. The hero pattern features a centered headline and subhead with primary and secondary CTAs, followed by a large product visual. The design is mobile-first, with navigation collapsing into a drawer on smaller viewports.

## Elevation & Depth

Depth is used sparingly to maintain a flat, enterprise-grade aesthetic. Subtle single-layer shadows are applied to distinguish interactive elements from the background.

*   Elevation.sm: Subtle lift for small interactive cards.
*   Elevation.md: Standard lift for dropdowns, popovers, or floating menus.
*   Elevation.lg: Pronounced lift for modal overlays or persistent drawers.

## Shapes

The brand uses a balanced approach to geometry: sharp, 0px-radius corners are used for structural containers and dividers to emphasize technical precision, while full-rounded (`rounded.full`) corners are reserved for buttons and badges to provide an approachable, modern feel.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and transparent backgrounds with `{colors.primary}` borders for secondary actions. They are designed with `{rounded.full}` to create a distinct, modern silhouette.

### Card
Cards provide a structural container using `{colors.surface}` and `{rounded.md}`. Use `card-elevated` for sections requiring more visual weight, or `card-dark` for high-contrast feature highlights.

### Input Field
Input fields feature a clean, minimal design with `{rounded.sm}` corners and `{colors.outline}` borders. They must show the `{colors.focus-ring}` border color upon interaction to maintain accessibility.

### Badge
Badges are used for status indicators or category labels, utilizing `{typography.label-sm}`. They come in semantic variants like `badge-success` or `badge-error` to provide immediate visual feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Use `{colors.error}` for non-destructive actions. |
| Apply `{rounded.full}` to all call-to-action buttons. | Mix `{rounded.sm}` and `{rounded.full}` on the same component. |
| Maintain `{spacing.md}` between grid items. | Use drop shadows on flat text elements. |
| Use `{colors.outline}` for all subtle dividers. | Exceed two font weights on a single page. |
| Apply `{typography.display-lg}` for hero headlines only. | Use `{typography.label-sm}` for primary body copy. |
| Use `{colors.surface}` for primary content backgrounds. | Use `{colors.surface-dark}` on light backgrounds. |
| Apply `{elevation.md}` to interactive cards. | Apply heavy, multi-layer shadows to UI elements. |
| Use `{colors.focus-ring}` for keyboard navigation. | Remove focus rings from interactive components. |

## Content Style

CTA labels should use imperative verbs and remain concise, such as "Get started" or "Learn more." This keeps the user journey focused and actionable.

Headings are benefit-driven, clear, and professional. They should communicate the value of the platform immediately without relying on excessive marketing fluff.

Copy density is designed to be scannable. Use short paragraphs and frequent bullet points to break up technical information, ensuring the content remains accessible to both developers and enterprise stakeholders.

## Imagery & Icons

The imagery style is mixed, combining high-quality product screenshots, clean UI mockups, and abstract background textures. Icons are minimalist and stroke-based, maintaining the brand's commitment to technical clarity. Avoid overly decorative or complex illustrations; prioritize imagery that demonstrates the product's functionality and scale.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for ElevenLabs, a minimal enterprise AI audio platform. Match its precise, authoritative tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every color, spacing, radius, and typography value by its token name — `{colors.primary}`, `{spacing.md}`, `{rounded.full}`, `{typography.body-md}` — never hardcode hex values or pixel sizes.
2. Respect all component definitions under `components:` exactly. Do not invent variants (e.g., a button size or card style) that the spec does not list.
3. Follow the Shapes section: structural containers and dividers use `{rounded.sm}` or 0px; buttons and badges always use `{rounded.full}`.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., applying `{colors.error}` to a non-destructive action), surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) is available, those values take precedence.

## Output contract

**Must:**
- Use token names for all design values.
- Render hover, focus, and disabled states for every interactive component the spec defines (e.g., `button-primary-hover`, `input-field-focus`).
- Apply `{colors.focus-ring}` to all keyboard-navigable elements; never omit focus rings.
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding and gaps; maintain the 4px base rhythm.
- Apply `{elevation.sm}` / `{elevation.md}` / `{elevation.lg}` only as described under Elevation & Depth.
- Use imperative, concise CTA copy ("Get started", "Learn more") per the Content Style section.

**Must NOT:**
- Invent colors, font sizes, radii, or elevation values absent from the spec.
- Use framework utility defaults when a token exists.
- Apply `{colors.error}` to non-destructive actions, or `{typography.label-sm}` as body copy.
- Mix `{rounded.sm}` and `{rounded.full}` on a single component.
- Add emoji, decorative illustrations, or unsolicited marketing copy.
- Rewrite existing page copy, button labels, or alter navigation structure as a side effect of applying tokens.

## When in doubt
- If a value is not defined in the spec, ask before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous background roles, default to `{colors.surface}`; for text on light surfaces, use `{colors.on-surface}`; for text on dark or primary surfaces, use `{colors.on-inverse}`.
- Follow mobile-first layout with a single breakpoint at 768px unless the Layout section specifies otherwise.
- Surface any Do/Don't conflict explicitly rather than silently overriding either the spec or the user's request.