Geist: pure black, gray ladders, alpha rings, white primary button, GeistMono details. Captured from logged-in dashboard.
Browse Vercel in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: vercel.com/home (live DOM, computed styles), 2026-07-08. Coverage: marketing homepage, dark theme. Light variant: not captured. Token system shared with the dashboard surface (apps/vercel/app/DESIGN.md).
Dark-first marketing on a pure-black canvas, carrying the same Geist monochrome discipline as the product — grayscale chrome, alpha-white rings, #ededed text — but at marketing scale: 64px display type set unusually light (weight 400/450) with aggressive -6% tracking, and full-pill CTAs instead of the dashboard's 6px rectangles. Color is rationed to two moments: a five-stop spectrum gradient (the agentic branding) and an animated 2D-canvas hero; everything else stays black-and-gray. It deliberately avoids heavy display weights, decorative color washes, and blur effects. Feels: monochrome, cinematic, precise, engineering-grade.
Shares the full Geist ladders (gray 100–1000, alpha-white 100–1000, blue/red/amber/green accent scales) — see the app surface. Load-bearing values inline:
| Token | Hex | Role / usage |
|---|---|---|
| Canvas | #000000 | Page background (background-200) |
| Raised surface | #0a0a0a | Section blends, CTA text color (background-100) |
| Text primary | #ededed | Headings, body, nav links (gray-1000) |
| Text secondary | #a1a1a1 | Muted copy (gray-900, shared ladder) |
| Hairline | #1f1f1f | Nav bottom border, CTA border (gray-200) |
| Card ring | rgba(255,255,255,0.145) | Alpha-white ring on cards |
| CTA bg / text | #ededed / #0a0a0a | White pill on black |
| Accent blue | #0070f3 | Links/focus (shared Geist blue-700) |
Gradient accents (the only decorative color on the page):
| Gradient | Stops |
|---|---|
| Spectrum (agentic branding) | rgb(0,255,149) green → rgb(255,208,0) gold → rgb(255,23,68) red → rgb(149,0,255) purple → rgb(0,229,255) cyan |
| Secondary | rgb(255,220,48) yellow → rgb(56,162,255) blue |
| Scrims | black → transparent (linear/radial); transparent → rgb(10,10,10) |
Rule: chrome is grayscale; the spectrum gradient and canvas hero are the only color moments — status colors follow the shared Geist accent scales.
GeistSans (fallback: -apple-system, sans-serif) — everything; GeistMono for technical strings (shared Geist rule).| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| h1 (hero display) | 64 / 64 | 400 | -3.84px (-6%) |
| h2 | 56 / — | 450 | -3.36px (-6%) |
| Body | 16 / 24 | 400 | normal |
| Paragraph | 14 / 21 | 400 | normal, #ededed |
| Nav links | 16 / — | 400 | normal, #ededed |
Pattern: display type gets *lighter* as it gets bigger — 400/450 at 64/56px, versus the dashboard's 600 weight ceiling — with tracking tightening to -6%. Size carries the hierarchy, not weight.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.
Source: logged-in vercel.com dashboard (live DOM, resolved CSS variables), 2026-07-06. Coverage: dashboard, dark theme + Geist token system (375 CSS vars found). Public reference: vercel.com/geist. Marketing site: not captured as its own surface. Responsive: not captured.
Monochrome, high-contrast, engineering-grade. A pure-black canvas carries 10-step gray ladders for every surface, border and text level; color exists only to signal status (info, error, warning, success). Borders are alpha-white rings rather than solid colors, so every edge reads as "ring + glow" over any background. Sharp but not cold — soft shadows, 8px-class radii, and roomy 48px+ rows keep it calm. Feels: monochrome, precise, engineering-grade, calm.
Scale logic: steps 100–400 = backgrounds/fills, 500 = borders, 600–800 = mid (hover borders, placeholders), 900 = secondary text/solid accent, 1000 = primary text.
| Token | Value | Role / usage |
|---|---|---|
| background-200 | #000000 | Page background (deepest) |
| background-100 | #0a0a0a (hsl 0 0% 4%) | Raised surfaces, cards, sidebar |
| gray-100 | #1a1a1a (10%) | Subtle fill, hover bg |
| gray-200 | #1f1f1f (12%) | Fills, inset panels |
| gray-300 | #292929 (16%) | Active fills |
| gray-400 | #2e2e2e (18%) | Component borders (default) |
| gray-500 | #454545 (27%) | Emphasized borders |
| gray-600 | #878787 (53%) | Placeholder, disabled |
| gray-700 | #8f8f8f (56%) | Icons |
| gray-800 | #7d7d7d (49%) | Hover borders |
| gray-900 | #a1a1a1 (63%) | Secondary text |
| gray-1000 | #ededed (93%) | Primary text |
alpha-100 #ffffff0f · 200 #ffffff17 · 300 #ffffff21 · 400 #ffffff24 · 500 #ffffff3d · 600 #ffffff82 · 700 #ffffff8a · 800 #ffffff78 · 900 #ffffff9c · 1000 #ffffffeb
oklch(64.94% .1982 251.813) ≈ #52a8ff, 700 oklch(57.61% .2321 258.23) ≈ #0070f3 (the classic Vercel blue), 900 oklch(71.7% .1648 250.794), 1000 (text-on-tint) oklch(96.75% .0179 242.423)oklch(62.56% .2234 23.03) ≈ #ee4444, 800 oklch(58.01% .227 25.12) (hover), 900 oklch(69.96% .2136 22.03) (text)#f5a623, text-on-dark via amber-900--geist-cyan #50e3c2, --geist-warning #f5a623Light theme flips the ladders (100 lightest); same token names — theme via .dark-theme / .light-theme class. Rule: chrome is grayscale; color appears only for status and interactive states.
GeistSans (fallback: -apple-system, sans-serif) — everythingGeistMono — code, URLs, git branches, timestamps, tabular numbers#ededed| Role | Size/Line | Weight | Notes |
|---|---|---|---|
| Page title | 24–32 / 1.2 | 600 | tracking -0.02em |
| Card title | 16 / 24 | 600 | |
| Body / rows | 14 / 20 | 400 | |
| Secondary | 13–14 | 400 | color gray-900 #a1a1a1 |
| Labels/caps | 12 | 500 | letter-spacing 0.04em, uppercase, gray-900 |
| Code/mono | 13 | 400 | GeistMono, gray-1000 on gray-100 chip |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.