# Vercel — Marketing Site Design Spec (Geist)

> 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`).

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

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.

## 3. Typography Rules

- Sans: `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.

## 4. Component Stylings

### Primary CTA ("Deploy Now")
- Full pill (9999px-class radius) — marketing-only shape (dashboard uses 6px).
- bg `#ededed`, text `#0a0a0a`, h 40px, 14px/500, border `#1f1f1f`.
- Hover fill: not captured (CSS-in-JS).

### Nav
- h 64px, bg `#000`, hairline bottom border `#1f1f1f`, no blur/backdrop-filter. Links 16px/400 `#ededed`.

### Cards
- Ring shadow (verbatim): `0 0 0 1px rgba(255,255,255,0.145), 0 1px 2px rgba(0,0,0,0.16), 0 0 0 1px #000` — the Geist "ring + glow" at marketing scale (alpha-white ring + soft black + black outer seat).

### Logo carousel
- Infinite marquee, 40s loop (see §7).

## 5. Layout Principles

- Nav bar height 64px, full-width, hairline-separated from content.
- Page is a single dark scroll; sections blend into the raised surface via transparent → `rgb(10,10,10)` scrims rather than hard edges.
- Hero anatomy: 64px display h1 + paragraph + white pill CTA + 917×611 animated canvas.
- Grid/columns and max content width: not captured.

## 6. Depth & Elevation

- Borders-as-rings philosophy shared with Geist: edges are alpha-white box-shadow rings, not solid border colors, so they read over any background.
- Marketing card recipe: `0 0 0 1px rgba(255,255,255,0.145), 0 1px 2px rgba(0,0,0,0.16), 0 0 0 1px #000` — ring + soft glow + black seat.
- Radii: pills (9999px) for CTAs; other marketing radii not captured (dashboard: 6–8px controls, 12px cards).
- Depth otherwise comes from scrims (§8), not shadows.

## 7. Motion

- Micro-transition census: `color/background-color/border-color 0.1s cubic-bezier(0.4,…)` on 79 elements, `0.15s` on 40 — everything interactive answers in 100–150ms. `opacity 0.3s`; `height 0.2s` (accordions).
- At rest: logo-carousel marquee 40s infinite; fade-in 0.2s; modal-appear 0.2s. 2 WAAPI animations.
- Keyframes defined: `soft-fade-in`, `fade-slide-in`, `slide-in`, `blue-glow`, `thinking-loader` (AI status), `logo-carousel`, `sandbox-left`/`sandbox-right` (+reverse), `spinner-opacity`, `show`/`hide`.
- Pattern: fast fades and slides only — no scroll-jacking or spring physics observed; the canvas hero carries the showmanship.

## 8. Backgrounds, Effects & WebGL

- **Canvas hero confirmed**: one 2D canvas, 917×611 — the animated hero diagram/visualization (2D context, not WebGL).
- Spectrum gradient: linear `rgb(0,255,149)` → `rgb(255,208,0)` → `rgb(255,23,68)` → `rgb(149,0,255)` → `rgb(0,229,255)` (green → gold → red → purple → cyan; agentic branding).
- Secondary gradient: `rgb(255,220,48)` yellow → `rgb(56,162,255)` blue.
- Black fade scrims: linear/radial `rgb(0,0,0)` → transparent, and transparent → `rgb(10,10,10)` (sections blend into the raised surface).
- No backdrop-filter observed on this page; no background video.

## 9. Do's and Don'ts

### Do
- Keep the canvas pure black `#000000` and all chrome grayscale — the shared Geist ladders by role.
- Set display type light and tight: 400–450 weight at 56–64px with -6% tracking; let size, not weight, carry hierarchy.
- Make the primary CTA a white pill: `#ededed` bg, `#0a0a0a` text, 40px tall, 14px/500.
- Use alpha-white ring shadows for card edges (`0 0 0 1px rgba(255,255,255,0.145), 0 1px 2px rgba(0,0,0,0.16), 0 0 0 1px #000`), never solid border colors.
- Confine decorative color to the spectrum gradient (green→gold→red→purple→cyan) and the canvas hero; reserve accent colors for status per the shared Geist rules.
- Blend sections with black/`#0a0a0a` fade scrims; keep micro-transitions at 100–150ms.
- Use GeistMono for technical strings (shared Geist rule).

### Don't
- Don't use bold/heavy display type — the marketing weight ceiling is 450 (dashboard titles cap at 600); never 700.
- Don't square off marketing CTAs — pills here, 6px rectangles are a dashboard shape.
- Don't add color washes, tinted sections, or a second accent system — the spectrum gradient is the one color moment.
- Don't use solid border colors or backdrop-filter blur — edges are alpha rings, the nav is solid black.
- Don't slow interactions past ~150ms except deliberate ambient loops (40s marquee).

## 10. Responsive Behavior

Breakpoints from media queries: 601 and 960/961 — three bands: mobile (≤600), tablet (601–960), desktop (961+). Specific adaptations (nav collapse, type scale-down): not captured.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#000000` · Text `#ededed` · Muted `#a1a1a1` · Hairline `#1f1f1f` · Card ring `rgba(255,255,255,0.145)` · Accent blue `#0070f3` (shared Geist)
- Font: GeistSans / GeistMono · Body: 16px/24 · Display: 64px/400/-6% · CTA: white pill, h 40px, 14px/500
- Focus: blue-700 2px ring outside 1px border (shared Geist recipe) · Hover fill: not captured

<vercel_marketing_design_language>
Use the Vercel marketing (Geist) design language: pure black #000000 page, GeistSans everywhere (GeistMono for technical strings), text #ededed, muted #a1a1a1, hairlines #1f1f1f. Display type is light and tight — h1 64px weight 400, h2 56px weight 450, both with -6% letter-spacing; body 16px/24. Primary CTA is a full white pill: #ededed bg, #0a0a0a text, 40px tall, 14px/500. Nav is 64px, solid black with a #1f1f1f bottom hairline, no blur. Card edges are alpha-white ring shadows (0 0 0 1px rgba(255,255,255,0.145), 0 1px 2px rgba(0,0,0,0.16), 0 0 0 1px #000), never solid borders. Color appears only as the green→gold→red→purple→cyan spectrum gradient and the animated canvas hero; sections blend via black fade scrims. Micro-transitions 100–150ms; one 40s logo marquee. Focus: Geist blue #0070f3 2px ring. Feels: monochrome, cinematic, precise, engineering-grade. Avoid: bold display weights (nothing above 450 in heroes), squared-off CTAs, decorative color washes beyond the spectrum gradient, solid border colors, and backdrop blur.
</vercel_marketing_design_language>