Vercel's Geist system is an exercise in subtraction: near-black ink on a near-white sheet, where a single tone carries every heading, CTA, and 1px border, and the only color allowed is a multi-stop mesh gradient confined to the hero. Geist Sans drives tightly-tracked display type, Geist Mono labels the technical eyebrows, and black pill buttons mark the marketing CTAs.
Geist Sans for UI and tightly-tracked display type, Geist Mono for code and uppercase section eyebrows (Inter shown as substitute). Hierarchy is built from size + negative tracking; weight is binary — 600 headings, 500 buttons, 400 body.
White surface, 1px hairline, 12px corners. The workhorse grid tile — often holding a node-graph or code illustration.
Same chrome lifted on a finely-layered, very-low-alpha shadow — menus and featured tiles.
The near-black ink used for the CTA band and inverted featured tiers.
White field, 1px hairline, tight 6px corners.
4px base unit. Card interiors sit at lg–xl (24–32px); section bands run 4xl (96px) up to section (128px).
Bimodal: tight 6px squares for functional chrome (nav buttons, inputs), full pills (100px) for marketing CTAs and 64px for category tabs, with 12–16px on content cards in between.
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Single column; nav → hamburger; CTAs + pricing tiers stack full-width |
| Tablet | 768–1023px | Grids collapse toward 2-up / 1-up; nav condenses |
| Laptop | 1024–1279px | Tightened gutters; 3-col grids retained |
| Desktop | ≥ 1280px | Full multi-column grids; centred ~1200px column |
Touch targets: pill CTAs and nav buttons clear 44×44 WCAG-AAA via line-height-driven height. Collapsing: nav collapses to a menu; hairline-card grids reflow to one column; code-editor and node-graph illustrations scale or scroll; pricing tiers stack.