Vercel is a developer-platform brand — a stark ink-on-near-white duet whose only decorative voice is a multi-color mesh gradient (cyan, blue, violet, pink, amber) that floats at hero scale. A custom geometric sans carries display, body, and button; a matching monospaced face carries every technical label. Headlines run sentence-case with aggressive negative tracking; CTAs ship in two pill scales — 100px marketing, 6px in-app.
/0.1 · color-system
A stark black-and-ink duet on near-white canvas. The brand introduces colour only via the multi-stop mesh gradient that lives at hero scale. Six neutral steps, four-pair gradient stack, and a tight semantic set.
Ink
#171717
Primary CTA fill and headline text on light surfaces.
Cyan
#50e3c2
Mint-cyan stop inside the hero mesh gradient.
Highlight Pink
#ff0080
High-saturation magenta in the preview gradient.
Violet
#7928ca
Deep purple at the start of the preview gradient.
Link Blue
#0070f3
Inline links and legacy success semantic.
Canvas
#ffffff
Pure-white card, dialog, modal surface.
Canvas Soft
#fafafa
Default page background — 98% white.
Canvas Soft 2
#f5f5f5
Slightly deeper inset region for editor and menus.
Hairline
#ebebeb
1px dividers, card borders, input borders.
Hairline Strong
#a1a1a1
500-level gray for deemphasised text.
Ink
#171717
Every heading and body paragraph on light surfaces.
Body
#4d4d4d
Secondary text — sub-headings, captions, footer column body.
Mute
#888888
Lowest-priority text — placeholders, fine print.
On Primary
#ffffff
All text on ink-primary surfaces.
Success / Link
#0070f3
Legacy success indicator + primary link color.
Link Deep
#0761d1
Pressed / visited tone for inline links.
Link Bg Soft
#d3e5ff
Soft pastel blue fill for informational badges.
Error
#ee0000
Validation red for destructive actions.
Error Soft
#f7d4d6
Soft pastel red destructive background.
Error Deep
#c50000
Pressed destructive state.
Warning
#f5a623
Caution / pending status indicator.
Warning Soft
#ffefcf
Soft pastel amber background.
Warning Deep
#ab570a
Pressed amber state.
Develop
#007cf0 → #00dfd8
Blue-to-teal pair marking the deploy/develop rhythm.
Preview
#7928ca → #ff0080
Violet-to-pink pair used for preview surfaces.
Ship
#ff4d4d → #f9cb28
Coral-to-amber pair used for ship surfaces.
/0.2 · typography
A custom geometric sans (Inter as substitute) carries display, body, button, and link. A monospaced face (JetBrains Mono as substitute) carries every technical label. Display sizes use aggressive negative tracking; weight ceiling is 600.
/0.4 · cards & containers
Cards never float on heavy drop-shadow. They sit on the page held by an inset hairline ring plus a stacked soft drop. Two marketing scales (8px / 12px) for feature and callout chrome.
card-marketing · 8px · padding 24
Default 3-up marketing card. Canvas fill, hairline inset, Level 3 soft stack shadow.
card-marketing-large · 12px · padding 32
Larger callout chrome for "compute model" / "AI Gateway" sized features. Level 4 float-stack shadow.
card-soft · 8px · canvas-soft fill
Used inside cluster groups — softer than the canvas-soft page body.
template-card · 16:9 thumb · 8px
Deploy template tile inside the "Deploy your first app" grid.
/0.4b · code-editor-mockup
pricing-card · Hobby
Hobby
$0
Personal projects Up to 3 deployments Community supportpricing-card-featured · Pro
Pro
$20
Everything in Hobby Team collaboration Production analyticspricing-card · Enterprise
Enterprise
Custom
Everything in Pro SSO + audit log SLA & dedicated support/0.5 · form-elements
All form inputs ship at three heights — 32 / 40 / 48px — with the brand's 6px square radius. Hairline border, ink text, canvas fill.
/0.6 · spacing
Base unit 4px. Marketing bands run 64–96px top/bottom; hero bands stretch to 192px for the gradient to breathe. Card interior padding stays 24–32px; inline gap stays 12–24px.
/0.7 · border-radius
Two pill scales coexist by design: 100px marketing CTAs and 6px square in-app controls. Card chrome lands at 8–12px; icon circles at full radius.
/0.8 · elevation
Stacked shadows — multiple small offsets layered with 4–12% black opacity — never a single heavy drop. Inset 1px hairline ring always added so the card edge stays crisp.
/0.9 · signature components
Four section bands carry the page rhythm: canvas hero, mesh-gradient feature, soft showcase, and the polarity-flipped ink band. Plus the logo strip, banner pill, secondary badge, and inline link.
Pure-white hero surface — display-xl headline, body-lg lead, two pill CTAs. Mesh gradient may sit behind at hero scale.
Mesh gradient atmospheric backdrop at section scale. Display-lg headline + body-md supporting copy.
Soft-canvas band hosting template thumbnails or screenshot grids.
Polarity-flipped ink band. White display-lg on near-black. Often hosts a code-editor-mockup flush with the band.
/1.0 · brand-gradient · signature
The brand's entire decoration system collapses into a single multi-stop mesh. Treat it as one unified object — never crop down to a single colour, never reorder the stops, never miniaturise to icon scale. Used at hero scale only.
Develop
#007cf0 → #00dfd8
Preview
#7928ca → #ff0080
Ship
#ff4d4d → #f9cb28
/1.1 · responsive
A five-step breakpoint ladder. Hero stacks at mobile; 3-up grids collapse to 1-up; tab pill rows enable horizontal scroll; nav collapses to hamburger.
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 600px | Hero stacks; nav collapses to hamburger; 3-up grids drop to 1-up; tab pill row enables horizontal scroll. |
| Tablet | 600–959px | 3-up grids drop to 2-up; nav still horizontal. |
| Desktop | 960–1199px | Full 3-up grids; pricing 3-up. |
| Wide | 1200–1399px | Container caps at 1400px content width. |
| Ultra-wide | ≥ 1400px | Content stays centred at 1400px; bands stretch edge-to-edge in colour. |
touch-targets
The button-primary pill renders at ~32px tall in nav contexts and ~48px tall in marketing contexts. Marketing CTAs meet WCAG AAA at all breakpoints; nav buttons inflate touch area through 8px padding on mobile to hit the 44 × 44px floor.
collapsing-strategy
Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.
For individuals getting started.
For teams ready to ship.
For organizations operating at scale.