# Vercel Monochrome 순백 캔버스 위 진짜 검정 — Geist 타이포그래피와 1px 헤어라인, 그레이스케일 위계만으로 완성하는 개발자 미니멀리즘. - taxonomy: swiss-international · monochrome, developer-minimal, true-black, geist, hairline-borders, mono-labels, high-contrast, grayscale-hierarchy · complexity=low - page types: landing, marketing, docs, dashboard, app - best for: 개발자 도구·인프라 제품 랜딩, 기술 문서 사이트, 타이포그래피 중심 포트폴리오, 다크 모드가 정체성인 콘솔형 대시보드 - avoid for: 따뜻하고 컬러풀한 소비자 브랜드, 일러스트·사진이 주인공인 라이프스타일 사이트, 장난스러운 키즈/이벤트 페이지, 색으로 카테고리를 구분해야 하는 데이터 밀집 UI - provenance: website (Agentic Infrastructure - Vercel) — confidence: colors=computed-css, typography=computed-css, radius=computed-css, dark=computed-css, color_roles=vision-inferred, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred, effects=vision-inferred, destructive=0.5 ## Design rules # 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. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Vercel Monochrome — theme.css (generated, do not edit) */ :root { --radius: 6px; --radius-selector: 9999px; --radius-field: 6px; --font-sans: "Geist", "GeistSans", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace; --font-display: "Geist", "GeistSans", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --spacing: 8px; --shadow: 0px 1px 2px 0px color-mix(in oklab, oklch(0 0 0) 8%, transparent); --ks-display-weight: 400; --ks-display-tracking: -0.06em; --background: oklch(0.985 0 0); --foreground: oklch(0.205 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.205 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.205 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.42 0 0); --muted: oklch(0.955 0 0); --muted-foreground: oklch(0.51 0 0); --accent: oklch(0.579 0.215 258); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.577 0.215 27); --destructive-foreground: oklch(1 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.579 0.215 258); --chart-1: oklch(0.205 0 0); --chart-2: oklch(0.579 0.215 258); --chart-3: oklch(0.515 0.125 147.4); --chart-4: oklch(0.65 0 0); --chart-5: oklch(0.70 0.12 215); } .dark { --background: oklch(0 0 0); --foreground: oklch(0.946 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.946 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.946 0 0); --primary: oklch(0.946 0 0); --primary-foreground: oklch(0 0 0); --secondary: oklch(0.205 0 0); --secondary-foreground: oklch(0.709 0 0); --muted: oklch(0.168 0 0); --muted-foreground: oklch(0.709 0 0); --accent: oklch(0.717 0.152 251); --accent-foreground: oklch(0 0 0); --destructive: oklch(0.655 0.2 25); --destructive-foreground: oklch(0 0 0); --border: oklch(0.28 0 0); --input: oklch(0.28 0 0); --ring: oklch(0.717 0.152 251); --chart-1: oklch(0.946 0 0); --chart-2: oklch(0.717 0.152 251); --chart-3: oklch(0.731 0.142 148); --chart-4: oklch(0.627 0 0); --chart-5: oklch(0.76 0.11 215); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

Deploy in
monochrome.

For coding agents
To ship apps
Automated by agents
Deploy Now Talk to Sales

Global delivery

Zero to millions

Hierarchy from gray steps, never color.

Fluid compute

Hairlines, not shadows

Every division is a 1px border ring.

Status: live

One blue, at most

Chroma is a focus ring, not decoration.

``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/vercel-mono.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `