Vapi — design system & UI screens

AI · 1 screen · 11 sections · https://vapi.ai/

Dark voice-AI landing; a person-on-phone photo hero with a Lead Qualification live-call UI and enterprise-scale proof, under a $50M Series B announcement bar.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/vapi.

Decoded design system

Vapi's decoded design system: background #0E0E13, text #FFFAEA, accent #9ACDBF, link #9ACDBF, primary #FFFAEA; type scale h1 80px / h2 58px / body 16px; 4px spacing base; 0px base radius. The single interactive/action color is #07070A — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#0E0E13`
surface	`#1C1C1F`
border	`#323133`
text	`#FFFAEA`
text_muted	`#A3A098`
primary	`#FFFAEA`
accent	`#9ACDBF`
link	`#9ACDBF`
button_bg	`#07070A`
button_text	`#FFFFFF`

Using these colors

Action color #07070A — the single interactive color; only on things you click or must notice, never large fills.
accent, link are all #9ACDBF — one role, not several (the action color).
accent #9ACDBF — accent for emphasis — keep it rare on the page.
primary #FFFAEA — ≈ the text color — a foreground/text color, not an action color (action = #07070A).

Typography

Heading: foundryGridnik
Body: avantt
Mono: Geist Mono
h1: 80px
h2: 58px
body: 16px

Spacing

base unit: 4px
scale: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px

Radii

base: 0px
button: 12px

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →