# LiveKit · Design system migration spec

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

> This site is an excellent example of a high-contrast, developer-first UI that balances technical density with clean, accessible design.

## 1. Identity DNA

The design system for LiveKit operates like a high-performance engine room for real-time communication: every component is stripped to its essential function, built for reliability under load, and presented with technical clarity. It is infrastructure made visible, where the aesthetic is a direct consequence of the platform's purpose.

**One-liner:** An open source developer platform for building real-time voice, video, and AI agents.
**Keywords:** infrastructure · developer-first · open-source · real-time
**Analogy:** A high-performance engine room for real-time communication.

## 2. Color

The palette is a study in disciplined contrast, built on a deep teal base that provides a stable, low-light environment for focused development work. A single, high-chroma cyan acts as the sole navigational beacon, reserved exclusively for primary actions to ensure immediate visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#012A32` | main background |
| `--bg-soft` | `#0A1416` | card background |
| `--bg-quiet` | `#0D262B` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#A0ADB0` | secondary text |
| `--muted` | `#3F4E51` | placeholder |
| `--muted-soft` | `#2A383B` | weak hint |
| `--accent` | `#00E5FF` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** High-contrast dark mode using a deep teal base, with a single bright cyan accent for primary actions.

Color is never decorative; it is a functional signal within a monochromatic field.

## 3. Typography

Typography is strictly utilitarian, employing clean grotesque and humanist sans-serifs that prioritize legibility over personality. The scale is bifurcated: monumental display type for authoritative statements, and a generous body size with relaxed line-height for parsing technical documentation.

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** ui-monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Hero headlines and primary callouts. |
| body | 16px | 1.5 | 400 | 0px | General body copy and descriptions. |
| caption | 12px | 1.3 | 400 | 0.5px | Metadata, labels, and small UI text. |

**Type rules:**
- Display font uses -1px letter-spacing for a tight, impactful look.
- Body text maintains a generous 1.5 line-height for readability.
- Monospace font is reserved strictly for technical terms or code references.

## 4. Spacing

A strict 4px base grid underpins the entire layout, creating a predictable and consistent vertical and horizontal rhythm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 px
- **Rhythm:** A strict 4px base grid creates consistent and predictable vertical and horizontal spacing throughout the interface.

## 5. Surfaces

Surfaces are defined by precise, luminous borders rather than heavy drop shadows, establishing depth through contrast alone. The shadow values that do exist are faint and atmospheric, hinting at a subtle glow from the accent color rather than simulating physical light.

- **Radius:** sm 4px · md 8px · lg 10px · pill 9999px
- **Shadows:**
  - 0px 0px 8px 0px rgba(0,229,255,0.15)
  - 0px 1px 3px 0px rgba(0,0,0,0)
- **Borders:** 1px solid rgba(255,255,255,0.1)

## 6. Layout

Content is organized on a standard 12-column grid that centers the main narrative, ensuring visual balance and focus. Paragraph widths are deliberately constrained to 680px, a decision that optimizes reading speed and reduces cognitive load for complex technical material.

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

**Skeleton:** A standard 12-column grid that centers content and maintains a maximum paragraph width of 680px for optimal reading.

## 7. Motion & Interaction

Motion is restrained and functional, used to acknowledge user action and guide attention rather than to entertain. The philosophy is one of immediate, smooth feedback: content fades and slides into place to confirm state changes, while interactive elements transition swiftly to signal responsiveness.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth fade-ins and slide-ups for content sections entering the viewport.
  - Button color and border transitions for immediate hover feedback.

- **Hover:** Buttons slightly change opacity or gain a subtle border glow; links underline or change color.
- **Click:** Buttons show a brief press-state reduction in scale or brightness.
- **Transition:** All interactive elements use a fast 0.3s ease-out transition for a responsive feel.
- **Keyboard:** Standard logical tab order with visible focus rings on interactive elements.

## 8. Voice & Don'ts

The editorial voice is technical and authoritative, addressing developers as peers. Headlines are large, bold, and direct—stating platform capabilities without embellishment—while calls to action use imperative, task-oriented language like 'Start building'.

- **Tone:** Technical, authoritative, and developer-focused.
- **Headline style:** Large, bold, and direct, often highlighting key technical capabilities or platform benefits.
- **CTA style:** Action-oriented and imperative, like 'Start building' or 'Contact sales'.
- **Avoid:** Vague marketing speak / Overly casual slang / Unclear technical jargon

### Don'ts
- ❌ Don't use a light theme — the screenshot shows a strict dark mode environment.
- ❌ Don't use decorative or serif fonts for headers — the screenshot shows clean, technical sans-serifs.
- ❌ Don't use a wide variety of colors — the screenshot shows a monochromatic palette with one strong accent.
- ❌ Don't use large, heavy drop shadows — the screenshot shows mostly border-based surfaces.
- ❌ Don't use rounded rectangles for primary CTAs — the screenshot shows pill-shaped buttons.
- ❌ Don't use multi-column text layouts for hero sections — the screenshot shows centered, single-column messaging.

The system deliberately excludes light themes, decorative serif typography, and multi-color palettes, committing to an aesthetic that is purely functional and developer-first.

## System Prompt (paste into AI tool)

```
LiveKit is a high-performance developer platform for real-time communication and AI agents. The design uses a deep teal dark mode (#012A32) with a vibrant cyan accent (#00E5FF) for high-contrast interactions. Typography is strictly technical, utilizing grotesque and humanist sans-serif categories for clarity and a modern feel. Critical constraints: do not use light backgrounds, avoid decorative serif typography, and never use multi-colored palettes; the aesthetic is disciplined and monochromatic with a single high-chroma accent. The layout is clean, spacious, and developer-focused.
```