Design System — Vercel Design System

Visual Theme & Atmosphere

Vercel is a developer-platform brand — the page is a deployment dashboard's marketing surface, written for engineers who already know the syntax. It earns that posture with one of the cleanest stark systems on the web: near-white {colors.canvas-soft} body background, ink-near-black {colors.ink} text, a 200-step gray scale that gives every divider, border, and disabled state its own deliberate step. The only place the brand introduces colour at marketing scale is the multi-stop mesh gradient ({colors.gradient-develop-start} → {colors.gradient-preview-end} → {colors.gradient-ship-start} → cyan / magenta / amber) that floats in atmospheric backdrops, never miniaturised to a swatch. That gradient is the entire decoration system.

Type is the second decisive voice. The brand's own custom geometric sans (Geist) carries display, body, button — everything narrative — at weight 600 for display, 500 for buttons, 400 for body. A matching monospaced face (Geist Mono) carries technical labels: terminal mockups, code blocks, sometimes filename captions. Headlines are sentence-case with aggressive negative letter-spacing (-2.4px at 48 px hero) — the brand never letter-spaces positively, never goes uppercase outside of mono labels.

...

Key Characteristics:

A single black-ink primary CTA {colors.primary} carries every conversion target, paired with white-on-white button-secondary for the secondary action. The brand uses 100 px pill shape for marketing CTAs and a tight 6 px square shape for in-app nav buttons.
...

Live Visual Theme Representation:

Visual Theme Example

Color Palette & Roles

Brand & Accent

Ink ({colors.primary} — #171717): The single primary CTA color. Black-near-pure ink that carries every Sign Up pill, every footer CTA, the dark-band polarity-flip. Used as text color throughout the page on light surfaces. (Resolved from --ds-gray-1000.)
Cyan ({colors.cyan} — #50e3c2): A signature mint-cyan used in the brand gradient and inside Geist-system spotlight tokens. Visible inside the hero gradient stops.
...

Surface

Canvas ({colors.canvas} — #ffffff): The pure-white card / dialog / modal surface.
Canvas Soft ({colors.canvas-soft} — #fafafa): The default page background — 98 % white. Almost every section sits on this tone.
...

Text

Ink ({colors.ink} — #171717): Every heading and body paragraph on light surfaces.
Body ({colors.body} — #4d4d4d): Secondary text — sub-headings, body captions, nav-link inactive text, footer column body.
...

Semantic

Success / Link ({colors.success} — #0070f3): The brand's legacy success indicator doubles as the primary link color. Visible underline-on-hover for inline body links.
Link Deep ({colors.link-deep} — #0761d1): The pressed / visited tone for inline links.
...

Brand Gradient

The brand's signature decoration is a three-pair gradient stack:

Develop ({colors.gradient-develop-start} #007cf0 → {colors.gradient-develop-end} #00dfd8) — the blue-to-teal pair used to mark the "deploy" / "develop" rhythm.
Preview ({colors.gradient-preview-start} #7928ca → {colors.gradient-preview-end} #ff0080) — the violet-to-pink pair used for "preview" surfaces.
...

The three pairs collapse into a single multi-color mesh gradient when used as the hero atmospheric backdrop. Treat the gradient as one unified object — do not crop down to a single colour, do not reorder the stops, and do not miniaturise. Used at hero scale only.

primary

#171717

on-primary

#ffffff

ink

#171717

body

#4d4d4d

mute

#888888

hairline

#ebebeb

hairline-strong

#a1a1a1

canvas

#ffffff

canvas-soft

#fafafa

canvas-soft-2

#f5f5f5

link

#0070f3

link-deep

#0761d1

link-bg-soft

#d3e5ff

success

#0070f3

error

#ee0000

error-soft

#f7d4d6

error-deep

#c50000

warning

#f5a623

warning-soft

#ffefcf

warning-deep

#ab570a

violet

#7928ca

violet-soft

#d8ccf1

violet-deep

#4c2889

cyan

#50e3c2

cyan-soft

#aaffec

cyan-deep

#29bc9b

highlight-pink

#ff0080

highlight-magenta

#eb367f

gradient-develop-start

#007cf0

gradient-develop-end

#00dfd8

gradient-preview-start

#7928ca

gradient-preview-end

#ff0080

gradient-ship-start

#ff4d4d

gradient-ship-end

#f9cb28

selection-bg

#171717

selection-fg

#f2f2f2

Typography Rules

Font Family

Two custom faces carry the entire system:

1. A custom geometric sans (extracted as Geist) for every display, body, button, link, and label. Weights 400 / 500 / 600 are the working set; the face never appears in 700 or heavier. Display sizes are tracked aggressively negative (-2.4 px at 48 px hero, -1.28 px at 32 px section); body stays at neutral or slightly-negative tracking. 2. A custom monospaced face (extracted as Geist Mono) for terminal mockups, code blocks, and small mono-caption labels — anything that wants to signal "technical." Weight 400 only at 12 – 13 px. Tracking neutral.

A condensed display sans (Space Grotesk) is loaded as a third face for occasional editorial moments but does not render as the primary face anywhere in the captured surfaces.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
...	...	...	...	...	...

Principles

Negative tracking is part of the voice. Display sizes use aggressive -2.4 to -0.6 px tracking. Reverting to default tracking breaks the brand.
Sentence-case headlines, period-terminated. Headlines like "Build and deploy on the AI Cloud." end with a deliberate period — that punctuation is part of the brand's voice.
...

Note on Font Substitutes

...

Geometric sans — Inter (400 / 500 / 600) is the closest stylistic match; font-feature-settings: "ss01", "ss02" enables the geometric alternates. Satoshi is a passable second choice.
Monospace — JetBrains Mono (400) at 12 – 13 px matches the technical voice. IBM Plex Mono is the second-best option.

Dynamic Preview:

display-xl size: 48px | weight: 600 | height: 48px | spacing: -2.4px