# Vercel Monochrome

## Overview
Strict black-and-white developer minimalism, extracted from vercel.com. A near-white canvas (#fafafa) carries true-dark ink (#171717); dark mode inverts onto pure black (#000000) with #ededed text. The palette is entirely zero-chroma — hierarchy is built from gray value steps and oversized, tightly-tracked Geist type, never from color. Uppercase Geist Mono labels give the page its technical voice. The one chromatic note is a blue focus ring (#0072f5), used so sparingly the page still reads as monochrome.

## Colors & Roles
- **Light**: `background` oklch(0.985 0 0) #fafafa (largest measured area), `foreground`/`primary` oklch(0.205 0 0) #171717. Cards/popovers are pure white for a faint tonal lift. Text hierarchy descends #171717 → #4d4d4d (`secondary-foreground`) → #666 (`muted-foreground`) → #8f8f8f. `border`/`input` #ebebeb — the measured 1px hairline. `accent`/`ring` = measured blue #0072f5.
- **Dark**: `background` pure black oklch(0 0 0) — measured, not a dark gray. `foreground` #ededed, `card`/`popover` #0a0a0a, `border` #2e2e2e, `primary` inverts to white. `accent`/`ring` = measured #52a8ff.
- Charts stay mostly grayscale: ink, blue, measured green (#297a3a / #62c073), mid-gray, cyan. `destructive` is authored (unmeasured on the page).

## Typography Rules
Geist everywhere (Google Fonts: "Geist"; mono: "Geist Mono"). The signature is aggressive negative tracking on display type — measured H1 64px at -3.84px and H2 56px at -3.36px are both exactly **-0.06em**. Weights are light: 400 hero, 450 section heads, 500/600 for UI and small headings only; presence comes from size + tracking, never boldness. Section kickers and feature lists ("FOR CODING AGENTS") are uppercase Geist Mono, 13px, +0.04em tracking, muted gray.

## Layout Principles
Max width ~1200px, 12-column grid, 24px gutters. Hero is asymmetric: giant left-aligned title, uppercase mono label stack on the right, centered logo mark. Section gaps are huge (`clamp(6rem, 12vw, 11rem)`); more than half the viewport can be empty canvas. Customer logos run in a single grayscale strip.

## Depth & Elevation
Effectively flat. Every measured "shadow" is a `box-shadow: 0 0 0 1px` ring standing in for a border (8–14% opacity). Blurred shadows are reserved for dropdowns/modals at minimal values. Elevation = background tonal step (background → card) + hairline.

## Shapes
Small radii: 6px for cards, inputs, and boxes (measured); 2px appears on micro elements; buttons are full pills (9999px). No large rounded bubbles.

## Component Stylings
- **Button**: primary = solid `primary` fill (black in light, white in dark) with inverted text, pill radius, 14px/500, padding 10px 20px. Secondary = `card` bg + 1px `border`, same pill. Focus = measured double ring: `0 0 0 2px background, 0 0 0 4px ring` (blue).
- **Card**: `card` bg, 1px hairline, 6px radius, 24–32px padding, no shadow.
- **Input**: 1px `input` border, 6px radius, 14px text; focus swaps to the blue double ring.
- **Nav**: fixed top, background + 1px bottom hairline; triangle logo left, 14px ghost links (muted → foreground on hover), bordered "Log In" pill + filled "Sign Up" pill right.
- **Label**: uppercase Geist Mono 13px `muted-foreground` — the section-kicker signature.

## Motion
Instant and restrained: 120–200ms opacity fades and one-step tone shifts on hover. No bounce, spring, or parallax.

## Do's and Don'ts
**Do:** start zero-chroma and add blue last, only for focus/links; build hierarchy from gray steps + size; track display type to -0.06em at light weights; use mono uppercase kickers; keep dark mode on pure #000.
**Don't:** use gradients/glass/colored illustration; fill buttons or headlines with brand blue; float cards on blurred shadows; compromise dark to #111-gray; reach for 700+ weights.

## Responsive Behavior
Grid collapses to one column; display type scales via clamp() while keeping -0.06em tracking. Nav condenses to logo + pills. Mono label stacks wrap below the hero title.

## Agent Prompt Guide
> See `ai.agent_prompt` in style.json — zero-chroma grayscale, Geist at -0.06em, pill buttons, 1px hairlines, pure-black dark mode, blue reserved for focus rings.

## Known Gaps / Confidence
Colors, typography, and radii are computed-css (measured). Role assignment, taxonomy, layout, and motion are vision-inferred from screenshots. `destructive` red was not observed on the page and is authored to match the palette's contrast levels. Real Vercel uses self-hosted GeistSans; the Google Fonts "Geist"/"Geist Mono" fallback is faithful.