Design System
Inspired by Vercel

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.

Start Deploying View Documentation
01 / Colors

Color Palette

Primary
Vercel Black
#171717
Primary text, headings
Pure White
#ffffff
Page background
True Black
#000000
Console text default
Workflow Accents
Develop Blue
#0a72ef
Development workflow
Preview Pink
#de1d8d
Preview deployments
Ship Red
#ff5b4f
Ship to production
Console Colors
Console Blue
#0070f3
Syntax blue
Console Purple
#7928ca
Syntax purple
Console Pink
#eb367f
Syntax pink
Neutral Scale
Gray 600
#4d4d4d
Secondary text
Gray 500
#666666
Tertiary text
Gray 400
#808080
Placeholders
Gray 100
#ebebeb
Borders, dividers
Gray 50
#fafafa
Subtle surface tint
Interactive
Link Blue
#0072f5
Links
Focus Blue
hsl(212,100%,48%)
Focus ring
Badge Bg
#ebf5ff
Pill badge surface
02 / Typography

Typography Scale

Display Hero
Display Hero — 48px / 600 / 1.00 / -2.4px / Geist
Section Heading
Section Heading — 40px / 600 / 1.20 / -2.4px / Geist
Sub-heading Large
Sub-heading — 32px / 600 / 1.25 / -1.28px / Geist
Card Title
Card Title — 24px / 600 / 1.33 / -0.96px / Geist
Card Title Light
Card Title Light — 24px / 500 / 1.33 / -0.96px / Geist
Body Large — Build and deploy on the AI Cloud. Vercel provides tools for developers to ship fast.
Body Large — 20px / 400 / 1.80 / normal / Geist
Body Medium — Navigation and emphasized text
Body Medium — 16px / 500 / 1.50 / Geist
Body Semibold — Active states
Body Semibold — 16px / 600 / 1.50 / -0.32px / Geist
Button / Link
Button / Link — 14px / 500 / 1.43 / Geist
Caption — Metadata and small labels
Caption — 12px / 500 / 1.33 / Geist
const app = await deploy('next-app');
Mono Body — 16px / 400 / 1.50 / Geist Mono
DEPLOYMENT STATUS
Mono Label — 12px / 500 / uppercase / Geist Mono
NEW
Micro Badge — 7px / 700 / uppercase / Geist
03 / Buttons

Button Variants

Start Deploying
Primary Dark
Documentation
Ghost / Shadow
AI Optimized
Pill Badge
Develop
Workflow Pill
Preview
Workflow Pill
Ship
Workflow Pill
04 / Cards

Card Examples

Framework

Next.js Integration

Zero-config deployments for Next.js applications. Automatic optimizations, edge rendering, and instant rollbacks.

Elevated

Edge Functions

Run serverless functions at the edge with sub-millisecond cold starts. Card shown with full shadow stack.

AI

v0 by Vercel

Generate UI with AI. Describe what you want and v0 creates the code using shadcn/ui and Tailwind CSS.

05 / Forms

Form Elements

Default (shadow-border)
Focus (blue ring)
Error (red ring)
06 / Spacing

Spacing Scale

2
4
6
8
12
16
32
40
07 / Radius

Border Radius Scale

2px
Code spans
4px
Small
6px
Buttons
8px
Cards
12px
Images
64px
Tabs
9999px
Badges
08 / Elevation

Elevation & Depth

Level 0: Flat
No shadow
Level 1: Ring
Shadow-as-border
Level 1b: Light Ring
Lighter ring
Level 2: Card
Ring + subtle lift
Level 3: Full Card
Ring + lift + ambient + glow
Focus
Accessibility ring