Vercel Design System

---
name: Vercel
url: https://vercel.com
version: 5.0.0
tokens:
  colors:
    primary: "#000000"
    background: "#000000"
    surface: "#111111"
    surface-hover: "#222222"
    text-primary: "#ededed"
    text-secondary: "#888888"
    border: "rgba(255, 255, 255, 0.14)"
    accent: "#0070f3"
  typography:
    font-sans: "Geist, Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    font-mono: "Geist Mono, monospace"
    scale:
      - { name: display, size: "64px", weight: 700, lineHeight: 1.05, letterSpacing: "-0.04em" }
      - { name: heading-1, size: "40px", weight: 600, lineHeight: 1.1, letterSpacing: "-0.02em" }
      - { name: body, size: "16px", weight: 400, lineHeight: 1.6, letterSpacing: "0" }
  spacing:
    base: "8px"
    scale:
      space-1: "4px"
      space-2: "8px"
      space-4: "16px"
      space-6: "24px"
      space-8: "32px"
  radius:
    sm: "4px"
    md: "8px"
    full: "9999px"
  shadows:
    card: "0 0 0 1px rgba(255,255,255,0.1)"
  breakpoints:
    sm: "640px"
    md: "768px"
    lg: "1024px"
    xl: "1280px"
---

# Vercel — Design System Specification

## 1. Overview & Visual Rationale
Vercel's design is modern monochrome minimalism. Built around pure blacks (`#000000`), stark whites (`#ededed`), and the variable font `Geist`, Vercel focuses heavily on extreme typography contrast and developer utility.

## 2. Color System
- Primary Black: `#000000`
- Surface Dark: `#111111`
- Text White: `#ededed`

## 3. Typography Scale
- Display: 64px / Weight 700 / Geist
- Body: 16px / Weight 400 / Geist

## 4. Button Variants
- Deploy Button: `background: #ededed`, `color: #000000`, `border-radius: 6px`

## 5. Card Examples
- Project Card: `background: #111111`, `border: 1px solid rgba(255,255,255,0.14)`

## 6. Form Elements
- CLI Input: `font-family: Geist Mono`, `border-radius: 6px`

## 7. Spacing Scale
- 4px, 8px, 16px, 24px, 32px, 48px, 64px

## 8. Border Radius Scale
- `sm: 4px`, `md: 8px`, `full: 9999px`

## 9. Elevation & Depth
- `card shadow: 0 0 0 1px rgba(255,255,255,0.1)`

## 10. Responsive Behavior
- `sm: 640px`, `md: 768px`, `lg: 1024px`, `xl: 1280px`