# Elevenlabs · Design system migration spec

> Source: https://elevenlabs.io  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of a modern, premium SaaS aesthetic that balances professionalism with a warm, slightly playful feel through its use of soft gradients and rounded shapes.

## 1. Identity DNA

ElevenLabs's design system is built as a high-end enterprise software brochure, where clarity and authority take precedence over decoration. It constructs a professional environment through disciplined contrast, restrained typography, and a strict neutral palette, establishing reliability as a foundational element of its identity.

**One-liner:** Premium AI audio platform with a clean, warm, and slightly playful aesthetic.
**Keywords:** AI voice · enterprise · creative · developer · audio
**Analogy:** A high-end recording studio interface brought to a clean digital canvas

## 2. Color

The color system is built on a high-contrast foundation of pure white, black, and a warm light gray for surface differentiation. This strict, neutral palette avoids any saturated hues to maintain a professional, technical aesthetic.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FDFCFC` | main background |
| `--bg-soft` | `#F5F3F1` | card background |
| `--bg-quiet` | `#EBE8E4` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#777169` | secondary text |
| `--muted` | `#E5E5E5` | placeholder |
| `--line` | `rgba(0,0,0,0.05)` | divider |

**Color principle:** High-contrast ink on warm neutrals with soft, organic gradients for accents

The principle is absolute: color serves structure and readability, never emotional decoration.

## 3. Typography

Typographic voice is split between a transitional-serif for authoritative headlines and a humanist-sans for all body and interface text. This pairing balances gravitas with the clarity required for a technical SaaS platform.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** geometric-mono

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Main hero headlines |
| heading | 32px | 1.2 | 500 | -0.5px | Section headings |
| body | 18px | 1.6 | 400 | 0px | Main body text |
| small | 14px | 1.5 | 400 | 0.14px | Secondary text and labels |

## 4. Spacing

A consistent 4px base unit establishes a predictable, clean grid that governs all spatial relationships.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent use of 8px and 16px increments for padding and gaps

## 5. Surfaces

Depth is communicated with surgical precision, using thin, light borders and a single, subtle shadow. Surfaces are defined by generous padding and soft backgrounds, not by complex gradients or heavy depth effects.

- **Radius:** sm 4px · md 8px · lg 20px · pill 9999px
- **Shadows:**
  - 0 1px 2px 0 rgba(0,0,0,0.04)
  - 0 2px 4px 0 rgba(0,0,0,0.04)
  - 0 0 0 1px rgba(0,0,0,0.06)
- **Borders:** Very subtle 1px borders in rgba(0,0,0,0.05) or rgb(229,229,229)

## 6. Layout

The layout skeleton follows a classic SaaS structure: a spacious hero section with split headline and copy, followed by a product showcase area. This traditional hierarchy ensures immediate clarity of purpose and function.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Clean, single-column layout with generous whitespace and centered containers

## 7. Motion & Interaction

Motion philosophy is one of minimal, functional support. Animations are limited to subtle fades for content loading and smooth transitions for interactive state changes, ensuring a polished, professional feel without distraction.

- **Durations:** micro 150ms · small 300ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions for color and background on hover

- **Hover:** Color and background-color transitions with 0.15s duration
- **Click:** Subtle transform or opacity change
- **Transition:** All properties with cubic-bezier(0.4, 0, 0.2, 1)
- **Keyboard:** Standard focusable elements with visible focus states

## 8. Voice & Don'ts

The editorial voice is professional, confident, and slightly technical, using clear, declarative statements. Language is direct, with calls to action relying on straightforward verbs like 'Sign up' or 'Contact sales'.

- **Tone:** Professional, innovative, and slightly playful
- **Headline style:** Large, bold, geometric sans-serif headlines with tight letter-spacing
- **CTA style:** Pill-shaped buttons with solid black fill for primary actions
- **Avoid:** Loud colors / Aggressive typography / Cluttered layouts / Technical jargon in hero copy

### Don'ts
- ❌ Don't use pure white backgrounds — screenshot shows a warm off-white (#FDFCFC) instead
- ❌ Don't use sharp corners — screenshot shows 20px radius on large cards and 9999px on buttons
- ❌ Don't use high-chroma accent colors — screenshot shows organic, soft gradients instead
- ❌ Don't use thin, light fonts for headlines — screenshot shows 500 weight for display text
- ❌ Don't use complex backgrounds — screenshot shows clean, mostly flat surfaces
- ❌ Don't use tight spacing — screenshot shows generous padding (160px top) and gaps (48px)

The system deliberately excludes dark mode, decorative illustrations, playful typography, and complex gradients to enforce its disciplined, enterprise-focused character.

## System Prompt (paste into AI tool)

```
A premium AI audio platform (SaaS) for enterprises and creators. Key colors are warm off-white (#FDFCFC) for backgrounds, solid black (#000000) for ink, and soft muted tones (#777169, #EBE8E4). Typography combines geometric-sans for display with humanist-sans for body. Critical don'ts: avoid pure white backgrounds, use 9999px pill radius for buttons, never use high-chroma accent colors, use generous whitespace, use 500 font-weight for display text, avoid complex background patterns.
```
