Vercel
The hard-edged monochrome standard for developer infrastructure — pure black on pure white (and the documented inverse), the Geist typeface at confident weights, one classic blue (#0070f3) for links and focus, and the famous develop/preview/ship tri-color gradient as the only expressive moment. Surfaces separate by hairlines and a precise layered shadow scale rather than color; radii stay tight (6px controls, 12px cards) with pills reserved for badges and theme toggles. The system reads as engineering certainty — maximal contrast, minimal palette, typography doing all the talking.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Neutrals
Typography
display-xl
72px · 600 · 1.05
The quick brown fox jumps
display-lg
48px · 600 · 1.08
The quick brown fox jumps
display-md
32px · 600 · 1.15
The quick brown fox jumps
title-lg
24px · 600 · 1.3
The quick brown fox jumps
title-md
20px · 600 · 1.4
The quick brown fox jumps
body-lg
18px · 400 · 1.6
The quick brown fox jumps
body-md
16px · 400 · 1.6
The quick brown fox jumps
body-sm
14px · 400 · 1.55
The quick brown fox jumps
caption
13px · 500 · 1.4
The quick brown fox jumps
code
14px · 400 · 1.6
The quick brown fox jumps
button
14px · 500 · 1
The quick brown fox jumps
nav-link
14px · 400 · 1.4
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 24px | |
| xl | 32px | |
| xxl | 48px | |
| section | 96px | |
| section-lg | 128px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 2px | |
| sm | 4px | |
| md | 6px | |
| lg | 8px | |
| xl | 12px | |
| xxl | 16px | |
| pill | 9999px | |
| full | 9999px |
FAQ
- What colors does Vercel use?
- Vercel's core palette includes #000000, #444444, #666666, #888888, #999999. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Vercel DESIGN.md.
- What font does Vercel use?
- Vercel's primary typeface is Geist. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Vercel design system?
- The hard-edged monochrome standard for developer infrastructure — pure black on pure white (and the documented inverse), the Geist typeface at confident weights, one classic blue (#0070f3) for links…