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; 8px 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: 8px
scale: 2px, 4px, 8px, 10px, 14px, 16px, 24px, 32px, 40px, 48px

Radii

base: 0px
button: 12px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 200ms · 300ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · ease-out
animated properties: background-color, color, border-color, stroke

Native design tokens

Token	Value
`--osano-clear-dialog-background`	`rgba(0,0,0,0)`
`--osano-button-border-color`	`rgba(0,0,0,0)`
`--osano-button-background-color`	`#37aa9d`
`--osano-button-foreground-color`	`#fafafa`
`--osano-dialog-background-color`	`#1f1f23`
`--osano-dialog-foreground-color`	`#fafafa`
`--osano-info-dialog-overlay-color`	`rgba(0,0,0,0.45)`
`--osano-link-color`	`#37aa9d`
`--osano-toggle-off-track-color`	`#62f6b5`
`--osano-toggle-off-thumb-color`	`#FFFFFF`

…and 110 more measured on the page.

Button states (measured)

primary focus: outline 1px auto rgb(16, 16, 16)

Layout (measured)

container max-width: 1296px
common grid: 2 columns

Motion choreography (measured)

Load order: span.inline-block×2 → span.pointer-events-none×2 → li.flex → span×3 → div.animate-pulse×2 → span.absolute

Scroll reveal: 10 elements rest at translateY(58px), animate in over 298ms.

Stagger: span ×3 — 150ms apart.

Responsive (measured)

breakpoints: 420px · 640px · 768px · 1024px · 1280px · 1536px
mobile (390px): hero 56px · nav hamburger

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

Screens

Vapi - Speak Human to Every Customer