CURATED · OPEN · FREE

Vapi

A developer-first platform for building and deploying enterprise voice AI agents at scale.

01

Identity DNA

An enterprise-grade developer platform that feels as approachable as a consumer app, blending high-end editorial photography with clean, technical documentation.

02

Color

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

03

Typography

geometric-sans · humanist-sans · monospaced

• display56px · 500
• h240px · 500
• h324px · 500
• body16px · 400
• caption14px · 400

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.

04

Spacing

Generous, even spacing with a strong preference for 24px and 40px gaps to maintain clarity in dense feature grids.

05

Surfaces

Minimal 1px solid borders used for subtle containment and card definitions.

rgb(204, 204, 204) 0px 0px 2px 2px · 0px 4px 6px -1px rgba(0, 0, 0, 0.1)

06

Layout

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

07

Motion & Interaction

Smooth color and background transitions on interactive elements. · Opacity and visibility fades for dropdown and overlay reveals. · Subtle transform movements for state changes.

Subtle color transitions and background shifts on buttons and links. · Immediate visual feedback with slight transform or opacity changes.

08

Components

• button Primary uses a dark pill shape with white text; secondary is a transparent ghost button with a subtle border.
• card Clean, mostly borderless sections separated by generous whitespace and subtle horizontal dividers.
• chip Functional dropdowns and status pills with subtle grey borders and 6px to 8px border radii.
• input Standard text inputs with 8px border radius, subtle borders, and internal padding.
• hero Full-width cinematic photography with a dark gradient overlay to ensure high legibility for the white display text.

09

Voice & Don'ts

• Tone Confident, technical, and enterprise-focused.
• Headlines Short, punchy, and human-centric (e.g., 'Speak human to every customer').
• CTAs Direct and action-oriented (e.g., 'Get Started', 'Initiate Call').

• 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.
• Avoid: Overly playful or casual language
• Avoid: Jargon without clear context
• Avoid: Visually cluttered layouts

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko