Vercel
Add this design system to use its color palette, typography, spacing & other tokens while creating your own designs.
Frontend cloud platform. Monochrome near-black on white, the signature tri-gradient system, engineered Geist type.
Palette
Typography
56px
24px
16px
12px
Spacing & Shape
| Token | Value | Preview |
|---|---|---|
| base | 4px | |
| x2 | 8px | |
| x3 | 12px | |
| x4 | 16px | |
| x6 | 24px | |
| x8 | 32px | |
| x16 | 64px | |
| x24 | 96px |
Border Radius
| Token | Value | Preview |
|---|---|---|
| sm | 6px | |
| full | 9999px |
design.md
tokens (raw)
name: vercel-design
version: alpha
description: >
The Geist design system: a near-white developer canvas (#fafafa) with a crisp
HSL-stepped neutral greyscale and near-black ink (gray-1000, hsl 0 0% 9%).
Two faces only — Geist (grotesque) for everything and Geist Mono for labels,
eyebrows and code, set UPPERCASE. Pure-black pill buttons, sharp technical
grid lines with plus-mark intersections, and the iconic prismatic
yellow→white→green spectrum behind the triangle logo are the signatures.
Color is reserved: blue for Pro/links, purple for Enterprise. Surfaces studied
via Playwright: home (computed :root --ds/--geist tokens + elements).
colors:
# Surface
surface: '#FFFFFF' # ds-background-100
surface-secondary: '#FAFAFA' # ds-background-200, page canvas
# Text (greyscale, HSL 0 0% L)
on-surface: '#171717' # ds-gray-1000 (9% L)
on-surface-secondary: '#4D4D4D' # ds-gray-900 (30% L)
on-surface-tertiary: '#8F8F8F' # ds-gray-700 (56% L)
hairline: '#EBEBEB' # ds-gray-200 (92% L)
# Inverse / buttons
inverse: '#000000' # pure black pill buttons
on-inverse: '#FFFFFF'
# Accents (reserved)
blue: '#0070F3' # ds-blue-700 (hsl 212 100% 48%) — Pro, links (#0072F5)
purple: '#7C3AED' # ds-purple-900 (hsl 274 71% 43%) — Enterprise
cyan: '#50E3C2' # geist-cyan
warning: '#F5A623' # geist-warning
error: '#EE0000' # geist-error
typography:
display: # "Build and deploy on the AI Cloud."
fontFamily: 'Geist, Arial, sans-serif'
fontSize: 56px
fontWeight: 600
lineHeight: 56px
letterSpacing: -2.2px
heading:
fontFamily: 'Geist, Arial, sans-serif'
fontSize: 24px
fontWeight: 600
lineHeight: 32px
letterSpacing: -0.96px
body-md:
fontFamily: 'Geist, Arial, sans-serif'
fontSize: 16px
fontWeight: 400
lineHeight: 24px
letterSpacing: 0
eyebrow-mono: # "GET STARTED", "LOADING STATUS…"
fontFamily: '"Geist Mono", ui-monospace, monospace'
fontSize: 12px
fontWeight: 400
lineHeight: 16px
letterSpacing: 0
transform: uppercase
rounded:
sm: 6px # inline link chips, small controls
full: 9999px # pill buttons
spacing: # --geist-space, 4px base
base: 4px
x2: 8px
x3: 12px
x4: 16px
x6: 24px
x8: 32px
x16: 64px
x24: 96px
components:
button-primary: # "Start Deploying"
backgroundColor: '{colors.inverse}'
textColor: '{colors.on-inverse}'
typography: '{typography.body-md}'
rounded: '{rounded.full}'
padding: '12px 20px'
note: 'leading triangle glyph'
button-secondary: # "Get a Demo"
backgroundColor: '{colors.surface}'
textColor: '{colors.on-surface}'
border: '1px solid {colors.hairline}'
rounded: '{rounded.full}'
chip: # "Enterprise" / "Security" inline tokens
backgroundColor: '{colors.surface}'
border: '1px solid {colors.hairline}'
rounded: '{rounded.full}'
note: 'leading 16px icon'
link-inline:
textColor: '{colors.blue}'
rounded: '{rounded.sm}'
padding: '0 4px'
motion:
easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
duration-standard: 200ms
note: 'fast, near-instant; prismatic gradient animates subtly'
icons:
style: line / geometric
stroke: 1.5px
sizes: { sm: 16px, md: 20px, lg: 24px }
color-rule: 'monochrome ink; the black triangle is the brand mark'Vercel
v alpha · Geist Design System · "Build and deploy on the AI Cloud."
Overview. Vercel runs on Geist, its in-house design system: a near-white developer canvas (#FAFAFA) with a precise, HSL-stepped neutral greyscale and near-black ink (#171717, gray-1000 at 9% lightness). The type system is two faces only — Geist grotesque for display and body, Geist Mono for eyebrows, labels and code, always UPPERCASE. The chrome is monochrome and technical: pure-black pill buttons, thin grid lines with plus-mark intersections framing the hero, and the unmistakable prismatic yellow→white→green spectrum glowing behind the black triangle logomark. Color is rationed and semantic — blue for Pro and links, purple for Enterprise — never decorative.
Colors
- Greyscale (HSL
0 0% L) is the whole palette: ink#171717(gray-1000), secondary#4D4D4D(900), tertiary#8F8F8F(700), hairline#EBEBEB(200), canvas#FAFAFA(background-200), surface#FFFFFF(100). Defined as HSL steps for perfect tonal control. - Pure black
#000000{colors.inverse}— primary buttons only (darker than the ink used for text). - Blue
#0070F3{colors.blue}(ds-blue-700) — links and the word "Pro". - Purple
#7C3AED{colors.purple}(ds-purple-900) — the word "Enterprise". - System accents — cyan
#50E3C2, warning#F5A623, error#EE0000, surfaced rarely.
Typography
Geist (grotesque; the brand's own; substitute Inter) and Geist Mono (substitute JetBrains Mono). Display is tracked dramatically tight (-2.2px at 56px). Mono is used UPPERCASE for eyebrows and status text — a core Geist tell.
| Token | Family | Size | Weight | Line-height | Tracking | Usage |
|---|---|---|---|---|---|---|
| display | Geist | 56px | 600 | 56px | -2.2px | hero h1 |
| heading | Geist | 24px | 600 | 32px | -0.96px | section h2 |
| body-md | Geist | 16px | 400 | 24px | 0 | body, buttons |
| eyebrow-mono | Geist Mono | 12px | 400 | 16px | 0 (UPPER) | labels, status |
Layout
Centered hero on an explicit technical grid with hairline columns/rows and + marks at intersections. Spacing follows a strict 4px base scale (--geist-space: 4/8/12/16/24/32/64/96). Footer is a dense multi-column link sitemap with mono uppercase headers.
Elevation & Depth
Flat and precise. Buttons and cards are defined by borders and tint, not shadow. The only "depth" is the soft prismatic gradient bloom behind the logo.
Shapes
Two radii: pill (9999px) for buttons and chips, 6px for inline link chips/small controls. Crisp and minimal — no large rounded cards.
Components
- button-primary "Start Deploying": black pill, white label, leading triangle glyph.
- button-secondary "Get a Demo": white pill, hairline border, ink label.
- chip: white pill with hairline border and a leading 16px icon (inline "Enterprise"/"Security").
- link-inline: blue text with a 6px hover chip.
Motion
Fast and near-instant (~200ms) with a standard ease — befitting a deploy platform. The prismatic spectrum animates subtly; otherwise motion is restrained.
Iconography
1.5px geometric line icons, monochrome ink, 16/20/24px. The solid black triangle is the singular brand mark; status badges ("NEW") render as mono uppercase pills.
Do's and Don'ts
- Do build the palette from the HSL greyscale; use
#000only for buttons,#171717for text. - Do set eyebrows and status labels in Geist Mono, UPPERCASE.
- Do track display type very tight (
-2.2px). - Do keep color semantic: blue = Pro/links, purple = Enterprise.
- Don't use color decoratively or add drop shadows — Geist is flat and technical.
- Don't round large surfaces; reserve pills for buttons and 6px for small controls.
