Vercel / Geist Monochrome

---
name: vercel-geist-monochrome
description: Apply the Vercel / Geist Monochrome visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Vercel / Geist Monochrome, mentions Geist design system, Vercel style, engineering monochrome, or describes near-monochrome palette, hairline 1px borders, shadow-as-border stacks — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Vercel / Geist Monochrome Design System

Near-monochrome engineering workspace: warm-white canvas, ink-black type that is never pure black, hairline borders carrying all structure, and exactly one prismatic conic-gradient burst per screen. Shadows imitate borders; whitespace does the rest.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Vercel / Geist Monochrome.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (Geist design system, Vercel style, engineering monochrome, black-and-white dev SaaS), or describes its traits: near-monochrome palette; hairline 1px borders; shadow-as-border stacks; mono uppercase eyebrows; tight sentence-case headlines; single prismatic accent.

## Design tokens

### Color palette

- Warm off-white page canvas: `#fafafa` (--color-bg)
- Cards and raised panels: `#ffffff` (--color-surface)
- Primary ink — never pure #000: `#171717` (--color-text)
- Secondary copy: `#4d4d4d` (--color-text-muted)
- Tertiary labels and captions: `#666666` (--color-text-subtle)
- Link and focus blue — the only persistent color: `#0070f3` (--color-accent)
- Hairline dividers and card edges: `#ebebeb` (--color-border)
- Prismatic burst stop, used once per screen: `#52aeff` (--color-prism-blue)
- Prismatic burst stop and error state: `#e5484d` (--color-prism-red)
- Prismatic burst stop and success tint: `#45dec5` (--color-prism-teal)

### Typography

- Display / headings: Geist (fallback: -apple-system, Segoe UI, sans-serif)
- Body: Geist (fallback: -apple-system, Segoe UI, sans-serif)
- Mono / data: Geist Mono (fallback: SFMono-Regular, Menlo, monospace)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.15, letter-spacing -0.04em
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 80, 120 — 4px base unit; compact 24px card padding but vast 80–120px section padding — the page breathes between blocks, not inside them.
- Border radius: sm 6px, md 8px, pill 100px — 6px is the workhorse radius; primary CTAs are full 100px pills.
- Border treatment: 1px solid #ebebeb — Structure comes from hairlines; heavier weights are never used. Cards often swap the border for a 0 0 0 1px shadow.

### Shadows

- border: `0 0 0 1px rgba(0,0,0,.08)` — Shadow-as-border on cards and inputs
- layered: `0 0 0 1px rgba(0,0,0,.08), 0 2px 2px rgba(0,0,0,.04), 0 0 0 1px #fafafa` — Raised cards and popovers
- none: `none` — Most flat surfaces — depth is the exception

### Layout

- Max content width: 1080px
- Vast whitespace with centered narrow content columns
- Faint graph-paper grid lines as section backdrops
- One conic prism element per screen, never more
- Full-width hairline rules separating sections edge to edge

### Effects

- Conic-gradient prism glow behind the hero mark
- Faint dotted or graph grid backgrounds at ~4% opacity
- Skeleton shimmer for loading states

### Motion

- Easing: cubic-bezier(0.25, 0.1, 0.25, 1); durations 120ms / 200ms / 300ms
- Hover swaps border color from #ebebeb to #999 — no lift, no scale
- Opacity and color transitions only; movement is rare and small
- Copy-to-clipboard and toast feedback are instant and quiet

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-text: #171717;
  --color-text-muted: #4d4d4d;
  --color-text-subtle: #666666;
  --color-accent: #0070f3;
  --color-border: #ebebeb;
  --color-prism-blue: #52aeff;
  --color-prism-red: #e5484d;
  --color-prism-teal: #45dec5;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-pill: 100px;
  --shadow-border: 0 0 0 1px rgba(0,0,0,.08);
  --shadow-layered: 0 0 0 1px rgba(0,0,0,.08), 0 2px 2px rgba(0,0,0,.04), 0 0 0 1px #fafafa;
  --border-default: 1px solid #ebebeb;
  --font-display: Geist, -apple-system, "Segoe UI", sans-serif;
  --font-body: Geist, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", SFMono-Regular, Menlo, monospace;
  --text-base: 16px;
  --leading-heading: 1.15;
  --leading-body: 1.5;
  --tracking-heading: -0.04em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** 64px, bg-colored with 1px bottom hairline; wordmark left, quiet text links, small black pill CTA right; sticky with slight blur on scroll
- **Hero:** MONO UPPERCASE EYEBROW in Geist Mono, then a tight -0.04em sentence-case headline in #171717, muted subhead, black pill CTA plus ghost secondary, prism glow behind
- **Card:** White surface, shadow-as-border, 6px radius, 24px padding; title in 500, body in text-muted; entire card is the hover target with border darkening
- **Button (primary):** Solid #171717 fill, white text, 100px pill, 500 weight; inverts to white with hairline border on hover
- **Button (secondary):** White fill, hairline border, #171717 text, same pill geometry; border darkens on hover
- **Form fields:** White fill, hairline border, 6px radius, 40px tall; focus adds a 2px #0070f3 ring outside the border

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A grayscale page whose only saturated moment is one conic-gradient prism (blue/red/teal) — usually the logo mark or a hero glow — while every card is drawn with a 0 0 0 1px shadow-border instead of a real border. Spend boldness here; keep everything else quiet.

## Do

- Let borders and whitespace do all structural work — reach for gray before any color
- Set eyebrows and code in Geist Mono to signal the engineering register
- Keep headlines sentence-case with aggressive -0.04em tracking
- Spend the entire color budget on one prismatic element per screen

## Don't

- No pure #000 text or borders — the darkest ink is #171717
- No drop shadows deeper than the sanctioned layered stack
- Don't scatter the prism colors through the UI as decorative accents
- No bold 700+ weights; emphasis comes from size and spacing

## Accessibility notes

- Accent #0070f3 on the #fafafa canvas measures ~4.4:1 — below AA for small text; reserve it for links at 16px+, underlined links, or darken toward #0060d1 for fine print
- text-subtle #666666 on #fafafa sits near 5.5:1 — fine for body but avoid it below 12px
- Hairline #ebebeb borders are decorative only; never rely on them to convey state without a text or icon change

## Reference sites

- Vercel: https://vercel.com
- Geist design system: https://vercel.com/geist
- Next.js: https://nextjs.org

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip vercel-geist-monochrome.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/vercel-geist-monochrome.json

Settings → Capabilities → Skills → Upload skill → vercel-geist-monochrome.zip