# Vapi · Design system migration spec

> Source: https://vapi.ai  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of balancing high-end editorial photography with a clean, developer-centric SaaS aesthetic.

## 1. Identity DNA

Vapi's design language operates on the principle of a developer-first platform that feels as approachable as a consumer app. It balances high-end editorial photography with clean, technical documentation, creating a system that is both enterprise-grade and intuitively navigable. This duality defines the identity: a sophisticated tool for building voice AI that is itself built on a foundation of clarity and trust.

**One-liner:** A developer-first platform for building and deploying enterprise voice AI agents at scale.
**Keywords:** enterprise · voice AI · platform · developer · scalable
**Analogy:** An enterprise-grade developer platform that feels as approachable as a consumer app, blending high-end editorial photography with clean, technical documentation.

## 2. Color

The color system is built on a warm, creamy base palette anchored by high-contrast dark ink and a single high-chroma red accent for primary actions. This restrained trio—cream, black, and a singular red—creates a professional canvas that prioritizes legibility and enterprise trust.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFAEA` | main background |
| `--bg-soft` | `#FAFAFA` | card background |
| `--bg-quiet` | `#F3F4F6` | quiet area |
| `--ink` | `#1F1F23` | body text |
| `--ink-soft` | `#4B5563` | secondary text |
| `--muted` | `#9CA3AF` | placeholder |
| `--muted-soft` | `#D1D5DB` | weak hint |
| `--accent` | `#FA5E53` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** A warm, creamy base palette anchored by high-contrast dark ink and a single high-chroma red accent for primary actions.

The palette's restraint is deliberate, avoiding decorative flourishes to keep the focus on functional clarity and strong visual hierarchy.

## 3. Typography

The typographic voice is defined by a primary geometric sans-serif for headlines, establishing a bold, technical identity. Paired with a clean humanist sans-serif for body text, the system uses tight letter-spacing for display sizes and tracked uppercase for category labels to create a modern, punchy feel.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1.6px | Hero headlines |
| h2 | 40px | 1.1 | 500 | -0.56px | Section headers |
| h3 | 24px | 1.2 | 500 | 0px | Card titles and feature headers |
| body | 16px | 1.5 | 400 | 0px | Standard body text |
| caption | 14px | 1.4 | 400 | 0.2px | Metadata and helper text |

**Type rules:**
- Tight letter-spacing (negative) for large display text to create a modern, punchy feel.
- Uppercase and tracked-out styles for category labels and 'eyebrow' text.
- Consistent use of a primary geometric sans-serif for headlines to establish a bold, technical identity.

## 4. Spacing

Spacing follows a generous, even rhythm built on a strong preference for 24px and 40px gaps, maintaining clarity in dense feature grids.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 40 / 48 / 64 / 72 / 96 px
- **Rhythm:** Generous, even spacing with a strong preference for 24px and 40px gaps to maintain clarity in dense feature grids.

## 5. Surfaces

Depth is conveyed through minimal, almost invisible box-shadows and subtle 1px solid borders used for containment and card definition. Surfaces are kept clean, relying on generous whitespace and horizontal dividers rather than heavy visual clutter.

- **Radius:** sm 6px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgb(204, 204, 204) 0px 0px 2px 2px
  - 0px 4px 6px -1px rgba(0, 0, 0, 0.1)
- **Borders:** Minimal 1px solid borders used for subtle containment and card definitions.

## 6. Layout

The layout skeleton is a standard 12-column grid system with generous outer padding, providing a robust structure for dense content. This grid collapses gracefully into a single-column mobile stack, ensuring the system is scalable and responsive.

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

**Skeleton:** A standard 12-column grid system with generous outer padding that collapses into a single-column mobile stack.

## 7. Motion & Interaction

Motion is treated as functional feedback, with smooth 0.15s cubic-bezier transitions applied globally for a highly responsive and polished feel. Patterns are subtle and professional—fades for overlays, background shifts on interaction, and slight transforms for state changes.

- **Durations:** micro 150ms · small 220ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions on interactive elements.
  - Opacity and visibility fades for dropdown and overlay reveals.
  - Subtle transform movements for state changes.

- **Hover:** Subtle color transitions and background shifts on buttons and links.
- **Click:** Immediate visual feedback with slight transform or opacity changes.
- **Transition:** Global 0.15s cubic-bezier transitions for a highly responsive and polished feel.
- **Keyboard:** Standard focus rings using subtle 2px box-shadows for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, technical, and enterprise-focused, matching the platform's purpose. Headlines are short, punchy, and human-centric, while CTAs are direct and action-oriented, maintaining a tone that is professional without being sterile.

- **Tone:** Confident, technical, and enterprise-focused.
- **Headline style:** Short, punchy, and human-centric (e.g., 'Speak human to every customer').
- **CTA style:** Direct and action-oriented (e.g., 'Get Started', 'Initiate Call').
- **Avoid:** Overly playful or casual language / Jargon without clear context / Visually cluttered layouts

### Don'ts
- ❌ Don't use a pure white (#FFFFFF) background — the screenshot uses a warm, creamy off-white (#FFFAEA) instead.
- ❌ Don't use decorative serif fonts — the screenshot relies entirely on clean, geometric, and humanist sans-serif categories.
- ❌ Don't use bright neon or multi-colored gradients — the palette is strictly restrained to cream, black, and a single red accent.
- ❌ Don't use heavy drop shadows — the screenshot uses very subtle, almost invisible box-shadows for depth.
- ❌ Don't clutter the layout with borders — the screenshot uses generous whitespace and horizontal lines for separation.
- ❌ Don't use large, multi-line blockquotes — the screenshot uses highly compressed, large display type for maximum impact.

The system deliberately avoids playful language, uncontextualized jargon, and visual clutter, enforcing a disciplined, trustworthy aesthetic.

## System Prompt (paste into AI tool)

```
Vapi is an enterprise voice AI platform designed for developers. It features a sophisticated yet highly legible aesthetic built on a warm cream background (#FFFAEA), stark black typography (#1F1F23), and a singular red accent (#FA5E53) for primary calls to action. The typography system is strictly sans-serif, utilizing bold, geometric display fonts with tight letter-spacing for headlines and clean humanist sans-serif for body text. The layout is spacious, using a 12-column grid with generous padding. Critical design constraints include avoiding pure white backgrounds, avoiding decorative serifs, avoiding heavy visual clutter, and maintaining a restrained, professional color palette that prioritizes readability and enterprise trust.
```