Color Palette
Brand Gradient Colors (Develop / Preview / Ship)
Develop
#007CF0 → #00DFD8
Preview
#7928CA → #FF0080
Typography
Base Font · Geist
Geist
Deploy your frontend. Ship at the speed of inspiration. Your complete platform for the web.
Regular · 400
Medium · 500
Semibold · 600
Mono Font · Geist Mono
Geist Mono
npm i vercel · vercel deploy · vercel env pull .env.local
Regular · 400
Medium · 500
Deploy to the web instantly.
Display LG · 32px · Semibold · line-height: 40px · letter-spacing: −1.28px
The best frontend developer experience
Display Base · 24px · Semibold · line-height: 32px · letter-spacing: −0.96px
Import from GitHub, deploy in seconds.
Body LG · 16px · Medium · line-height: 24px · letter-spacing: −0.32px
Built for Next.js and frameworks like Nuxt, SvelteKit, Astro, and more.
Body SM · 14px · Regular · line-height: 20px · letter-spacing: −0.28px
vercel.com/acme-corp/my-app · sha: a1b2c3d · branch: main
Mono Caption · 13px · Regular · Geist Mono · line-height: 18px
Letter Spacing
Deploy
Tight · −1.28px
--letter-spacing-tight · display 32px
Preview
Normal · −0.96px
--letter-spacing-normal · heading 24px
Import
Wide · −0.32px
--letter-spacing-wide · body 16px
Ship
Wider · −0.28px
--letter-spacing-wider · body 14px
All Vercel letter-spacing tokens are negative — every size tracks tighter than default. This is characteristic of modern tech-forward brands using custom sans-serif typefaces designed for digital reading.
Spacing
Spacing Scale
20 tokens — 1px → 127.9px · Geist spacing system with fractional fluid values at the upper range
Note the cluster of fractional values (60.2188px, 60.2266px, 61.0859px, 61.0938px) — these are likely viewport-scaled values captured from Vercel's marketing page at a specific screen width, not intentional integers.
Borders
Border Radii
SM (asymmetric)
0 8px 8px 0
LG (asymmetric)
6px 0 0 6px
Like Bloomberg, Vercel uses asymmetric radius tokens — --radius-sm (rounded right) and --radius-lg (rounded left) — for paired input/button groups and tab-like components where one end is flush.
Border Widths
--border-width-hairline
1px · the only border width — universal across all components
Vercel uses a single border width throughout the UI. Differentiation is achieved through color and shadow rather than weight — the --shadow-md token (a 1px ring shadow) effectively acts as an alternate border treatment.
Shadow / Elevation
Shadow Tokens
6 tokens — from inset ring to layered card stack
--shadow-sm
Input field border state
rgba(0,0,0,0.08) 0px 0px 0px 1px inset — an inset ring used as the default input border, replacing a CSS border property
--shadow-md
Button / card ring
rgb(235,235,235) 0px 0px 0px 1px — a light gray outer ring used as a border substitute on white elements against white backgrounds
--shadow-lg
Hover lift
rgba(0,0,0,0.12) 0px 5px 10px — standard card hover elevation, applied on hover state of interactive cards
--shadow-xl
Focus ring
White 2px ring + oklch focus color 4px — Vercel's unique double-ring focus state using oklch color space for the accessible focus indicator
--shadow-shadow-5
Subtle card outline
rgba(0,0,0,0.08) 0px 0px 0px 1px — same as shadow-sm but outer, for panels and menu containers
--shadow-shadow-6
Complex card
5-layer compound shadow: outer ring + blur + inner glow — the full Geist Design System card elevation stack
Z-Index
| Layer | Value | Usage |
|---|
| --z-1 | 1,000 | Base overlay layer — dropdowns, tooltips, contextual menus above page content |
| --z-2 | 100,000 | Modal dialogs, command palette, full-screen overlays |
| --z-3 | 1,000,000 | Critical system UI — onboarding flows, error boundaries, authentication gates |
| --z-4 | 999,999,999 | Maximum layer — used to ensure Vercel's own UI overlays third-party embeds, iframes, and any injected scripts |
Vercel's z-index system is the most extreme in this series — it jumps from 1,000 to 999,999,999 across just 4 tokens, reflecting the complexity of a deployment platform that must render its UI reliably above arbitrary third-party code in embedded preview environments. No negative z-index is used — everything stacks up.
Breakpoints
📱
--breakpoint-xs → sm
360–370px
Smallest phone widths
📱
--breakpoint-md → xl
380–401px
Standard mobile (paired)
📱
--breakpoint-bp-8/9
427–428px
iPhone Plus / Max
📱
--breakpoint-bp-17/18
513–514px
Large phone (paired)
💻
--breakpoint-bp-21/22
600–601px
Tablet portrait
💻
--breakpoint-bp-34/35
768–769px
Tablet landscape
💻
--breakpoint-bp-39/40
960–961px
Small desktop
🖥️
--breakpoint-bp-43
1024px
Standard desktop
🖥️
--breakpoint-bp-49/50
1150–1151px
Wide desktop
🖥️
--breakpoint-bp-55
1280px
Full desktop
🖥️
--breakpoint-bp-56
1400px
Vercel ds-page-width
🖥️
--breakpoint-bp-57
1480px
XL widescreen
With 57 breakpoints (360px → 1480px), Vercel holds the record in this series by a wide margin. The density at small sizes (360–540px) in 1–10px increments reflects fine-grained control over complex dashboard layouts on mobile devices. The 57 breakpoints are almost entirely paired max/min boundaries used throughout Vercel's marketing site and dashboard. The internal Geist spacing system defines its own canonical grid at 4px base, 24px gap, 40px medium, 48px large.
Opacity
Opacity Tokens
2 tokens only — minimalist opacity palette
--opacity-40
40% · disabled states
--opacity-60
60% · secondary content
Only 2 opacity tokens — Vercel's design system relies primarily on specific color values from the --ds-gray-alpha-* scale (4%, 8%, 12%…90%) for transparency effects rather than generic opacity modifiers. These 2 tokens are used for component-level dim and disabled states.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Token | Background Token | Ratio | WCAG Rating |
|---|
| --color-dark-gray | --color-white | 17.93:1 | AAA |
| --color-dark-gray | --color-white-2 | 17.18:1 | AAA |
| --color-black | --color-white | 21:1 | AAA |
| --color-black | --color-white-2 | 20.12:1 | AAA |
| --color-dark-gray-2 | --color-white | 8.45:1 | AAA |
| --color-dark-gray-2 | --color-white-2 | 8.10:1 | AAA |
| --color-mid-gray | --color-white | 3.23:1 | AA Large |
| --color-mid-gray | --color-white-2 | 3.10:1 | AA Large |
| --color-mid-gray | --color-dark-gray-5 | 4.54:1 | AA |
| --color-orange | --color-white | 4.23:1 | AA Large |
| --color-orange | --color-white-2 | 4.05:1 | AA Large |
| --color-dark-gray | --color-dark-gray-5 | 1.22:1 | Fail |
| --color-dark-gray | --color-blue-3 | 2.95:1 | Fail |
| --color-black | --color-blue-4 | 3.08:1 | AA Large |
| --color-dark-gray-2 | --color-dark-gray-5 | 1.74:1 | Fail |
| --color-mid-gray | --color-blue-3 | 1.88:1 | Fail |
| --color-orange | --color-dark-gray-5 | 3.47:1 | AA Large |
CSS Variables Reference
White--color-white#FFFFFF
White 2--color-white-2#FAFAFA
Black--color-black#000000
Dark Gray--color-dark-gray#171717
Dark Gray 3--color-dark-gray-3#1F1F1F
Dark Gray 4--color-dark-gray-4#444444
Dark Gray 2--color-dark-gray-2#4D4D4D
Dark Gray 5--color-dark-gray-5#24292E
Mid Gray 2--color-mid-gray-2#7D7D7D
Mid Gray--color-mid-gray#8F8F8F
Mid Gray 3--color-mid-gray-3#A8A8A8
Light Gray--color-light-gray#EBEBEB
Light Gray 2--color-light-gray-2#E6E6E6
Light Gray 4--color-light-gray-4#DBDBDB
Blue (Develop)--color-blue#007CF0
Cyan (Develop end)--color-cyan#00DFD8
Blue 3 (Preview)--color-blue-3#6B4FBB
Pink (Preview end)--color-pink#FF0080
Orange--color-orange#C15F3C
Blue 2--color-blue-2#006BFF
Base Font--font-family-baseGeist
Mono Font--font-family-2Geist Mono
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
2XS--font-size-2xs13px
XS--font-size-xs14px
SM--font-size-sm16px
Base--font-size-base24px
LG Display--font-size-lg32px
LH Tight--line-height-tight18px
LH Snug--line-height-snug20px
LH Normal--line-height-normal24px
LH Relaxed--line-height-relaxed32px
LH Loose--line-height-loose40px
Tight (display)--letter-spacing-tight−1.28px
Normal (heading)--letter-spacing-normal−0.96px
Wide (body 16)--letter-spacing-wide−0.32px
Wider (body 14)--letter-spacing-wider−0.28px
Space 3 (base)--space-34px
Section Gap--space-2432px
Space SM (fluid)--space-4050.95px
Space MD (fluid)--space-4860.22px
Space LG (fluid)--space-8061.09px
Header height--space-12864px
Hero spacing--space-160127.89px
Hairline--border-width-hairline1px
SM (rounded right)--radius-sm0 8px 8px 0
LG (rounded left)--radius-lg6px 0 0 6px
Inset border--shadow-sm0px 0px 0px 1px inset
Ring border--shadow-mdrgb(235,235,235) 1px
Card hover--shadow-lg0px 5px 10px
Focus ring (oklch)--shadow-xl2px white + 4px blue
Instant--duration-instant100ms
Fast--duration-fast150ms
Normal--duration-normal200ms
Overlay layer--z-11,000
Modal--z-2100,000
System UI--z-31,000,000
Maximum (anti-iframe)--z-4999,999,999
Design System Preview · Vercel (Light) · Generated 18/04/2026 · 22 color tokens · 5 font-size · 2 font-family · 3 font-weight · 5 line-height · 4 letter-spacing · 20 spacing · 6 radius · 1 border-width · 6 shadow · 3 duration · 4 z-index · 57 breakpoints · 2 opacity