---
title: "Vapi design system"
variant: extended
source: https://vapi.ai/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/vapi-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Vapi · Design System

> A crisp developer platform framed by kinetic green.

**Theme:** light · **Industry:** ai · **Source:** https://vapi.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Vapi pairs a restrained black-and-white interface with a cinematic green hero and product-led storytelling. Alternating proof points, platform features, integrations, and customer stories keep a technical offer approachable.

## North star

Keep the interface nearly monochrome and let one cinematic green image carry the visual drama.

## Overview

The page builds its identity from a near-monochrome interface interrupted by a vivid green, motion-blurred hero image. White and near-white sections carry most of the product narrative, while black bands mark the hero, integrations strip, and footer. The mint accent is sparing in interface chrome; the dominant green in the opening view belongs to imagery, not a general-purpose UI fill. Avantt supplies compact, contemporary headings and readable body copy, with close tracking on large display text. Foundry Gridnik is reserved for uppercase eyebrow labels and badges. A centered announcement and navigation lead into a left-aligned hero with strong type and a live call-demo control. Below, alternating media-and-copy features, logo proof, enterprise capabilities, customer stories, and a five-column metrics row create a steady, comfortable rhythm. Product imagery is framed as evidence, while flat surfaces and restrained separators keep attention on content.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Primary dark text, black hero and integrations band, footer, and inverse section backgrounds. |
| Gallery White | `#fefefe` | `--color-gallery-white` | surface | Main page canvas and broad light sections; also supports white copy on dark surfaces. |
| Night Slate | `#0e0e13` | `--color-night-slate` | surface | Near-black inverse surface and muted text tone within dark UI areas. |
| Forest Slate | `#3c4846` | `--color-forest-slate` | semantic | Measured border tone; use only for subtle dividers and outlines on dark surfaces. |
| Graphite Panel | `#2a2a2a` | `--color-graphite-panel` | surface | Dark link, navigation, and button surface tone, including inset dark UI. |
| Soft Black | `#151515` | `--color-soft-black` | surface | Secondary deep surface tone for dark interface and supporting elements. |
| Quiet Gray | `#b2b2b2` | `--color-quiet-gray` | neutral | Low-emphasis footer and supporting text against dark backgrounds. |
| Signal Mint | `#62f6b5` | `--color-signal-mint` | accent | Rare mint accent; visible in small interface details, distinct from the green hero photography. |

### Semantic aliases

`--color-canvas` → `#fefefe` (Gallery White) · `--color-surface` → `#0e0e13` (Night Slate) · `--color-surface-2` → `#000000` (Pure Ink) · `--color-surface-3` → `#2a2a2a` (Graphite Panel) · `--color-surface-4` → `#151515` (Soft Black) · `--color-text` → `#000000` (Pure Ink) · `--color-text-muted` → `#0e0e13` (Night Slate) · `--color-text-subtle` → `#fefefe` (Gallery White) · `--color-border` → `#3c4846` (Forest Slate) · `--color-accent` → `#62f6b5` (Signal Mint)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fefefe` | 20.82:1 | AAA |
| `#000000` | `#0e0e13` | 1.09:1 | fail |
| `#000000` | `#2a2a2a` | 1.46:1 | fail |
| `#0e0e13` | `#fefefe` | 19.09:1 | AAA |
| `#0e0e13` | `#000000` | 1.09:1 | fail |
| `#0e0e13` | `#2a2a2a` | 1.34:1 | fail |
| `#fefefe` | `#0e0e13` | 19.09:1 | AAA |
| `#fefefe` | `#000000` | 20.82:1 | AAA |
| `#fefefe` | `#2a2a2a` | 14.23:1 | AAA |
| `#62f6b5` | `#fefefe` | 1.35:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%)`
- `linear-gradient(to right in oklab, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to left in oklab, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| avantt | `--font-body` | webfont | 400, 500, 600 | Primary display, headings, body copy, navigation, links, and buttons. | Inter |
| foundryGridnik | `--font-foundrygridnik` | webfont | 500, 400 | Eyebrow labels and uppercase category badges. | Space Mono |

- **avantt:** Use medium to semibold for key headings and controls; large headings use tight negative tracking, with otherwise natural case.
- **foundryGridnik:** Small uppercase labels use moderate positive tracking and restrained weight.

### Type scale — Major Third (ratio ≈ 1.278, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 500 | 1 | -0.04em | — | avantt | Hero headline; large, tightly tracked display copy. |
| h2 | 36px | 600 | 1.04 | -0.039em | — | avantt | Major section titles and prominent feature headings. |
| h3 | 24px | 400 | 1.2 | -0.02em | — | avantt | Supporting feature titles and secondary content headings. |
| h4 | 20px | 400 | 1.3 | 0 | — | avantt | Compact capability or card headings. |
| body | 15px | 400 | 1.43 | 0 | — | avantt | Descriptions, customer quotations, and explanatory copy. |
| caption | 14px | 400 | 1.3 | 0 | — | avantt | Small supporting notes and secondary labels. |
| button | 15px | 500 | 1.43 | 0 | — | avantt | Primary and secondary CTA labels. |
| nav | 15px | 500 | 1.43 | 0 | — | avantt | Main navigation items and utility links. |
| link | 16px | 500 | 1.4 | 0 | — | avantt | Case study and inline action links. |
| eyebrow | 14px | 500 | 1 | 0.079em | uppercase | foundryGridnik | Uppercase section labels such as integrations and enterprise. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 16, 24, 32, 40, 48, 72, 80, 96 px.
- Section rhythm 72px · element gap 16px · card padding — · max content width 1152px.

Use a centered content frame with a measured maximum width of 1152px and comfortable density. The page alternates full-width dark bands with white content areas. The hero is left aligned beneath centered announcement and navigation bars; later feature content alternates text and media, with a two-column enterprise block and five-column statistics row. Keep section transitions generous, using the measured 72px section rhythm and 16px element rhythm where applicable. Avoid compressing the customer proof and product demonstrations into dense cards.

## Shape & elevation

- Radius: button `12px` · badge `6px` · nav `12px` · link `50%` · xs `4px` · sm `6px` · md `12px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The design is predominantly flat, with no measured shadow system. Separate sections through black and white surface changes, whitespace, and subtle borders rather than floating cards. Product media and case-study panels provide the main visual depth; use the measured 12px button radius and 6px badge radius where those components appear.

## Imagery

The hero is a full-bleed, motion-blurred green photographic or video-like scene, darkened enough for white copy. Product screenshots appear inside rounded image frames as evidence of the platform; customer case studies use real-world imagery with dark overlays and readable captions. Integration marks and customer logos remain small and secondary. Green screenshot pixels are illustrative content, not a reason to introduce broad green interface panels.

## Components

### Announcement bar

Centered event message and registration link in a slim, dark green-toned strip above the white navigation.

### Primary navigation

White horizontal bar with Vapi mark, centered product links, and right-side login and Get started actions.

### Hero and call demo

Full-bleed dark green motion imagery, left-aligned headline and copy, contrasting CTAs, and an inline voice-agent selector with start-call control.

### Alternating feature showcase

White canvas with centered section introduction followed by alternating copy and product screenshots; media is framed rather than card-heavy.

### Integration strip

Black band with uppercase eyebrow, short heading, compact platform link, and a dense grid of integration icons.

### Customer case study

Two-column customer quotation and brand information paired with wide video or image media and a dark caption overlay.

### Metrics and footer

Centered heading above five evenly distributed proof metrics, followed by a black footer with event feature and grouped navigation links.

### Measured component styles

- **Primary button** (“Get started”): background #ffffff · text #000000 · radius 12px · padding 0px 16px · 500 15px avantt
- **Secondary button** (“Appointment Scheduling”): background #1a1a1a · text #ffffff · radius 0px · padding 16px · 400 18px avantt
- **Link** (“5X revenue growth, 250k monthly calls Re”): background #2a2a2a · text #fffaea · radius 0px · padding 72px · 400 16px avantt
- **Input** (“Customer Support Lead Qualification Appo”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px avantt
- **Badge** (“HEALTHCARE”): background #404040 · text #ffffff · border 1px solid #535252 · radius 6px · padding 10px 10px 8px 10px · 400 14px foundryGridnik · uppercase
- **Navigation item** (“Solutions Platform Customers Pricing Car”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px avantt

## Do

- Keep the main interface black, white, and near-white.
- Reserve vivid green for imagery and rare accent details.
- Use Avantt-style clean sans-serif typography with tight display tracking.
- Set eyebrow labels in tracked uppercase mono-inspired type.
- Alternate broad light sections with selective full-width black bands.
- Show product screenshots and customer evidence as content, not decoration.

## Don't

- Do not turn the whole interface green.
- Do not add heavy shadows or layered floating-card effects.
- Do not crowd the page with dense text blocks.
- Do not use oversized decorative typography in every section.
- Do not treat illustration colors as brand UI colors.
- Do not replace the strong section rhythm with uniform card grids.

## Agent prompt

Build a new Vapi-style page with a clean developer-platform feel. Use Gallery White (#fefefe) for the main canvas, Pure Ink (#000000) for text and selective dark bands, and Night Slate (#0e0e13) or Graphite Panel (#2a2a2a) for restrained inverse surfaces. Signal Mint (#62f6b5) is a rare accent, not a page-wide fill; let any cinematic green atmosphere come from imagery. Use an Avantt-like sans serif for compact headings and readable body copy, with tightly tracked display headings and a tracked uppercase mono-style eyebrow. Center content within the measured 1152px maximum width. Create an announcement and navigation, a left-aligned media-led hero, alternating feature demonstrations, proof sections, and a structured footer. Favor flat surfaces, whitespace, clear contrast, and real product evidence over shadows or decorative cards.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark image with left-aligned headline and voice demo controls. | Primary and secondary CTA, Interactive call demo | Green motion imagery, White display text, Dark overlay |
| 2 | testimonials | Two-column light section with quotation and customer logos. | Customer proof, Brand credibility | Quote block, Logo cluster, Light canvas |
| 3 | feature-split | Centered introduction followed by alternating text and product media. | Feature explanation, Product demonstration | White canvas, Alternating media, Rounded screenshots |
| 4 | integrations | Black horizontal band with heading at left and icon grid beside it. | Explore platform link, Integration discovery | Dark band, Compact icon grid, Uppercase eyebrow |
| 5 | feature-grid | Two-column light section with introduction and capability list. | Capability scanning, Enterprise reassurance | Minimal icons, Compact text blocks, Open white space |
| 6 | video | Two-column customer story with text beside wide video media. | Play case study, Customer narrative | Quote and attribution, Video thumbnail, Overlay caption |
| 7 | gallery | Two adjacent image-led customer case tiles on a light canvas. | Read case study, Browse industry examples | Split image panels, Dark text overlays, Category badges |
| 8 | stats | Centered title over five evenly spaced metrics. | Trust through metrics, Quick comparison | Five-column row, Subtle separators, Minimal typography |
| 9 | footer | Black footer with brand and event area plus grouped navigation. | Browse product links, Access legal information | Black surface, Grouped link columns, Muted small text |

## Source CSS custom properties (selected)

```css
--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;
--osano-toggle-on-track-color: #37CD8F;
--osano-toggle-on-thumb-color: #FFFFFF;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-button-close-color: #fafafa;
--osano-button-accept-background-color: #37aa9d;
--osano-button-accept-border-color: rgba(0,0,0,0);
--osano-button-accept-foreground-color: #fafafa;
--osano-button-deny-background-color: #37aa9d;
--osano-button-deny-border-color: rgba(0,0,0,0);
--osano-button-deny-foreground-color: #fafafa;
--osano-button-reject-all-background-color: #37aa9d;
--osano-button-reject-all-background-color-hover: #239689;
--osano-button-reject-all-border-color: rgba(0,0,0,0);
--osano-button-reject-all-foreground-color: #fafafa;
--osano-button-manage-background-color: #37aa9d;
--osano-button-manage-border-color: rgba(0,0,0,0);
--osano-button-manage-foreground-color: #fafafa;
--osano-info-dialog-link-color: #37aa9d;
--osano-info-dialog-button-close-color: #fafafa;
--osano-info-dialog-toggle-off-track-color: #62f6b5;
--osano-info-dialog-toggle-off-thumb-color: #FFFFFF;
--osano-info-dialog-toggle-on-track-color: #37CD8F;
--osano-info-dialog-toggle-on-thumb-color: #FFFFFF;
--osano-info-dialog-button-background-color: #37aa9d;
--osano-info-dialog-button-border-color: #fafafa;
--osano-info-dialog-button-foreground-color: #fafafa;
--osano-dialog-gpc-background-color: #1f1f23;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/vapi-ai