Vercel

vercel.com

engineered minimalism - a near-monochrome light site where a geometric grid, the in-house Geist typeface and tightly-tracked bold headings make "developer tool" feel like precision hardware.

Developer Tool Frontend Cloud Platform flagship

Design tokens

ink
ink-pure
text-secondary
text-tertiary
text-quaternary
white
bg-subtle
border
accents-2
blue
error
ship-coral
display
Geist
body
Geist
mono
Geist Mono

Do / Don't

Reference it for

  • A geometric grid as a visible design element - the + crosshair intersection marker is the signature device.
  • Tightly-tracked bold headings (~-0.05em) as the "engineered" feel.
  • A fully fluid type system built on clamp() tokens.
  • A model multiplier-based spacing scale (space-Nx, base 4px).
  • Near-monochrome restraint: black, white, #fafafa, one blue.

Do not copy

  • The Geist typeface (Vercel's own) and the blue #0070f3 - both are Vercel's identity.
  • The triangle-and-rainbow-mesh hero - a brand signature.
  • The crosshair grid as a literal lift - borrow the *idea* of an honest grid, draw your own markers.

Signature moves

visible-grid with crosshair markers

a geometric grid is treated as a visible design element, with a + crosshair intersection marker as the signature device, on a near-monochrome canvas (black, white, #fafafa, one blue #0070f3).

tightly-tracked engineered headings

bold headings are tightly tracked (~-0.05em) to give an engineered, precision-hardware feel, in a single geometric typeface across a fully fluid clamp() scale.