# DESIGN.md · Vercel (WR-003)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Website Reference · Category: I. Website References
- Platforms: Web
- Color theme: High-contrast · Layout pattern: Split hero · Mood: Stark, editorial, technical
- License / terms: Screenshots: fair-use reference captures; site content © Vercel
- Industry: Devtools
- Patterns: Product-as-hero, Pricing table, Sign-up entry

High-contrast black/white editorial layout with grid-line motifs; three-tier pricing; split sign-up page with provider buttons.

### Analysis (ours)
Vercel’s landing (our capture) is a stark three-part hero on an off-white canvas (#FAFAFA, ESTIMATED): a two-word, tightly tracked headline on the left, the black triangle mark with a soft glow in the center, and three short positioning lines on the right. Color is effectively absent; hierarchy comes from scale, weight and fill versus outline (‘Deploy now’ filled black, ‘Talk to sales’ outlined), and the three header actions are graded the same way (Get a Demo and Log In outlined, Sign Up filled). Pricing is a bordered three-column table (Hobby, Pro marked ‘Popular’, Enterprise) where the price is the largest type, every feature row has a small line icon, and each tier opens with ‘All … features, plus:’ so lists show only the differences. Sign-up is a centered white card on the gray page with four provider buttons (Google, GitHub, ChatGPT, Apple), ‘Show other options’, an email link and one customer metric below. Lesson: in a monochrome system, fill versus outline alone can carry the whole primary/secondary hierarchy. Pitfall: with no accent color, the Popular tier relies on a tiny badge and a slightly whiter column, which is easy to miss.

### Best practices (ours)
- Grade every button pair the same way (filled = primary, outlined = secondary) across nav, hero and pricing.
- Start each higher tier with ‘Everything in X, plus:’ and list only the additions.
- Put the developer’s likely identity providers first on sign-up and tuck email behind them.
- If you remove accent color, give the recommended plan a stronger cue than a small badge.
- Map every color step to a job: Geist steps 100–300 are component backgrounds (default, hover, active), 400–600 borders, 700–800 high-contrast fills, 900–1000 text and icons (OFFICIAL, https://vercel.com/geist/colors).
- Use solid grays by default and alpha grays only when the background must show through; draw each border once and keep shadows translucent (OFFICIAL, https://vercel.com/geist/colors).
- Tie radius to elevation: Geist uses 6px for on-page surfaces and tooltips, 12px for menus and modals, 16px for fullscreen (OFFICIAL, https://vercel.com/geist/materials).
- Publish docs as Markdown for coding agents: every Geist page is available with .md appended (OFFICIAL, https://vercel.com/geist/introduction).

### Deep analysis
Values marked OFFICIAL come from the cited source page (read 2026-10-23); ESTIMATED values were measured by us from the live page’s computed CSS or our captures on 2026-10-23 (what ships today, not official tokens); OURS is our interpretation.

#### Purpose and audience (OURS) · source: https://vercel.com
- Marketing site for a frontend cloud and AI infrastructure platform. The audience is developers and engineering leads; the site has to feel as precise as a developer tool.
- The site is built with Vercel’s own public design system, Geist, so the marketing page also shows off the system.

#### Page structure and flow (ESTIMATED) · source: https://vercel.com
- Landing (capture 2026-10-22): a three-part hero on #FAFAFA with a two-word headline left, the triangle mark with a soft glow center, and short positioning lines right. Live 2026-10-23 headline: ‘Agentic Infrastructure’.
- Pricing: bordered three-column table (Hobby, Pro ‘Popular’, Enterprise); each tier starts ‘All … features, plus:’.
- Sign-up: centered white card with Google, GitHub, ChatGPT and Apple providers first, then ‘Show other options’ and an email link.

#### Color system (OFFICIAL) · source: https://vercel.com/geist/colors
- 10 scales: backgrounds, gray, gray-alpha, blue, red, amber, green, teal, purple, pink. P3 colors are used on supporting browsers and displays.
- Each non-background scale has steps 100–1000: 100 default bg, 200 hover bg, 300 active bg, 400 default border, 500 hover border, 600 active border, 700 high-contrast bg, 800 hover high-contrast bg, 900 secondary text and icons, 1000 primary text and icons.
- Two backgrounds: Background 1 (default, use it especially under color) and Background 2 (use sparingly for subtle separation).
- Gray for text, icons, fills, borders and dividers by default; gray-alpha only when the background should show through (shadows, overlays). Draw each border once; keep material shadows translucent.

#### Color as shipped on the site (ESTIMATED) · source: https://vercel.com
- Page #FAFAFA, primary text #171717, secondary text #4D4D4D, hairlines #EBEBEB.
- --ds-blue-700 = hsl(212 100% 48%) ≈ #0072F5 (the skip-link color); --ds-blue-900 = hsl(211 100% 42%).
- Primary button: #171717 fill with white text; secondary: white fill with dark text. No brand accent appears in the hero. Measured 2026-10-23 (UTC+8) from the public page’s computed CSS at 1440px and 375px; values can change without notice.

#### Typography (OFFICIAL) · source: https://vercel.com/geist/typography
- Geist Sans and Geist Mono (plus the display-only Geist Pixel), 9 weights each, Swiss-inspired, free under the SIL Open Font License 1.1 (https://vercel.com/font).
- Styles are Tailwind classes that set size, line height, tracking and weight together: text-heading-72 … 14, text-button-16 / 14 / 12, text-label-20 … 12 (with mono variants), text-copy-24 … 13.
- Label = single line (Label 14 is ‘most common… used in many menus’); Copy = multi-line with more line height (Copy 14 is ‘most commonly used’). Copy 24 and 20 are for marketing heroes.
- Measured on the site (ESTIMATED): h1 64px / 64px, weight 400, −3.84px (−0.06em); section h2 56px, weight 450, −0.06em; 48px / 56px at 375px; hero copy 24px / 32px, weight 450, −0.04em; nav buttons 14px / 500.

#### Materials, radius and shadow (OFFICIAL) · source: https://vercel.com/geist/materials
- Surface (on the page): base and small 6px radius, medium and large 12px.
- Floating (above the page): tooltip 6px (the only floating element with a triangular stem), menu 12px, modal 12px, fullscreen 16px.
- Measured shadow tokens (ESTIMATED): borders are drawn as shadows (0 0 0 1px rgba(0,0,0,.08)); elevation stacks several very light layers, e.g. medium = 0 2px 2px rgba(0,0,0,.04), 0 8px 8px −8px rgba(0,0,0,.04).
- Hero CTAs on the site are full pills (9999px, 40px tall) while nav buttons use the 6px material radius. Marketing and product shapes are deliberately different.

#### Layout and grid (OFFICIAL) · source: https://vercel.com/geist/grid
- Grid is ‘a core part of the Vercel aesthetic’: a GridSystem with visible guide lines, cells that can span, and ‘solid’ cells that hide the guides they cover.
- Responsive rows and columns are set per breakpoint (sm, md, lg), e.g. 1 / 2 / 3 columns.
- Measured on the site (ESTIMATED): page width tokens 1200px (--geist-page-width) and 1400px (--ds-page-width), each with 24px margins; a 4px spacing unit (4, 8, 12, 16, 24, 32, 40, 64, 96, 128…); form control heights 32 / 36 / 40px; 64px sticky header.

#### Components and states (ESTIMATED) · source: https://vercel.com
- Button pairs are always ranked the same way: filled black = primary, white or outlined = secondary (nav, hero and pricing).
- Geist components ship as @vercel/geistcn (React) with icons in @vercel/geistcn-assets (OFFICIAL, https://vercel.com/geist/introduction).
- Pricing rows use small line icons, and price is the largest type in each column.

#### Accessibility check (ESTIMATED) · source: https://vercel.com
- Contrast (computed by us): #171717 on #FAFAFA = 17.2:1; secondary #4D4D4D on #FAFAFA = 8.1:1, comfortably AA.
- A skip link is present. Geist states 900/1000 are designed for ‘accessible text and icons’ (OFFICIAL, https://vercel.com/geist/colors).
- Watch-out: −0.06em tracking on 56–64px headings is very tight; it works for Geist at that size but will collide in other fonts or at smaller sizes.

#### What makes it work (OURS) · source: https://vercel.com
- Monochrome plus fill vs outline gives a whole hierarchy without an accent color.
- Visible grid lines turn layout into decoration, so the page looks engineered without illustrations.
- The design system is public, documented and agent-readable, so the marketing site and the product share one source.

#### Lessons for our own sites (OURS) · source: https://vercel.com
- Adopt the 10-step ‘job per step’ color model; it makes hover, active and border states predictable.
- Since Geist is open-licensed, it is a safe font choice for a developer-tool look, but pair it with your own color so you don’t look like a Vercel template.
- Give the recommended pricing tier a stronger cue than a small badge when there is no accent color.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FAFAFA` ~76%
- `#3B3B3B` ~2%
- `#A0A1A2` ~1%
- `#E0E1E2` ~1%
- `#BDBCBC` ~1%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Top nav
- Grid-line hero
- Logo wall
- Three-tier pricing
- Provider sign-in buttons

## Layout rules
- Observed layout pattern: **Split hero** (from our captures).
- Public flow (captured, stopped before any form submission): Landing (https://vercel.com/) → Pricing (https://vercel.com/pricing) → Sign-up entry (https://vercel.com/signup)

## Do’s and don’ts
- Do: Use pure black/white contrasts and strong type hierarchy.
- Don’t: Don’t use mid-grays for important text.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://vercel.com
- Capture: https://vercel.com/
- Capture: https://vercel.com/pricing
- Capture: https://vercel.com/signup
- Library entry: https://design-library-byt.pages.dev/entry/WR-003