Vercel design system file
Vercel DESIGN.md for AI coding agents
A Vercel-inspired DESIGN.md with color tokens, Geist typography, spacing rules, component patterns, and prompts for Cursor, Claude Code, Codex, and v0.
Why it matters
What is inside the Vercel DESIGN.md
A reference file gives the agent durable decisions to apply — and a boundary for what to avoid.
Components
01Vercel-style neutral and blue token map for light and dark product surfaces.
Product taste
02Geist typography notes for headings, interface labels, code, and compact metadata.
Agent consistency
03Spacing, radius, border, and shadow rules tuned for dashboard and deployment UI.
Scope
04Button, card, input, navigation, and deploy-status component rules for AI-generated screens.
Rule
05Anti-patterns that prevent generic SaaS gradients, oversized cards, and loose spacing.
Color System
Brand palette extracted from the design system. Click any swatch to copy the hex value.
Text / Primary
#171717
Accent
#0070f3
Surface / Background
#fafafa
Border / Subtle
#ebebeb
Color Tokens
Typography Specimen
Geist
Display
2.8rem / 700 / 1.04
The quick brown fox
Heading H1
2rem / 700 / 1.1
The quick brown fox jumps
Heading H2
1.5rem / 600 / 1.15
The quick brown fox jumps over
Heading H3
1.125rem / 600 / 1.2
The quick brown fox jumps over the lazy
Body
1rem / 400 / 1.5
The quick brown fox jumps over the lazy dog
Small / Caption
0.75rem / 400 / 1.5
The quick brown fox jumps over the lazy dog and sat down.
Monospace
const primary = "System";
Layout & Spacing Tokens
Spacing Scale
Border Radius
Elevation & Shadow
Raw DESIGN.md File
The full source file in Markdown format, plus export variants for Tailwind config, CSS variables, and design tokens. Sign in to copy or download the full file.
# Design Language: Vercel: Build and deploy the best web experiences with the AI Cloud
> Extracted from `https://vercel.com` on May 28, 2026
> 3163 elements analyzed
This document describes the complete design language of the website. It is structured for AI/LLM consumption — use it to faithfully recreate the visual design in any framework.
## Color Palette
### Primary Colors
| Role | Hex | RGB | HSL | Usage Count |
|------|-----|-----|-----|-------------|
| Primary | `#0068d6` | rgb(0, 104, 214) | hsl(211, 100%, 42%) | 4 |
| Secondary | `#52aeff` | rgb(82, 174, 255) | hsl(208, 100%, 66%) | 4 |
| Accent | `#0070f3` | rgb(0, 112, 243) | hsl(212, 100%, 48%) | 3 |
### Neutral Colors
| Hex | HSL | Usage Count |
|-----|-----|-------------|
| `#171717` | hsl(0, 0%, 9%) | 3077 |
| `#ebebeb` | hsl(0, 0%, 92%) | 2462 |
| `#4d4d4d` | hsl(0, 0%, 30%) | 565 |
| `#ffffff` | hsl(0, 0%, 100%) | 124 |
| `#666666` | hsl(0, 0%, 40%) | 67 |
| `#000000` | hsl(0, 0%, 0%) | 49 |
| `#7d7d7d` | hsl(0, 0%, 49%) | 20 |
| `#a8a8a8` | hsl(0, 0%, 66%) | 13 |
| `#8f8f8f` | hsl(0, 0%, 56%) | 9 |
| `#ebf5ff` | hsl(210, 100%, 96%) | 2 |
### Background Colors
AI-agent workflow
Read DESIGN.md with AGENTS.md before editing UI. Preserve local imports, responsive behavior, and accessibility.
Related pages and guides
8 references
REFERENCE
shadcn/ui DESIGN.md
A related component-system reference for building agent-generated UI with shadcn/ui.
WORKFLOW
v0 by Vercel DESIGN.md
A related workflow page for Vercel-built AI UI generation with v0.
WORKFLOW
Cursor DESIGN.md
A related agent workflow page for applying Vercel-inspired rules in Cursor.
REFERENCE
GitHub DESIGN.md
A related devtool reference for dark, keyboard-centric AI-built interfaces.
REFERENCE
Tailwind CSS DESIGN.md
The primary Tailwind CSS reference: spacing scale, color tokens, and component tone for AI agents.
TEMPLATE
Tailwind DESIGN.md template
A companion template for CSS variables, spacing, and component tone.
GUIDE
DESIGN.md for v0 guide
The educational guide for writing v0-specific design memory.
GUIDE
DESIGN.md for Codex guide
How to keep Codex-generated UI on-brand with a visual context layer.
Related Vercel and devtool pages
shadcn/ui DESIGN.md
A practical design contract for AI agents using shadcn/ui: component rules, Tailwind tokens, density, states, forms, tables, dashboards, and prompt-ready constraints.
DESIGN.md for Tailwind
Use Tailwind token language inside DESIGN.md without sounding vague.
Tailwind DESIGN.md template
A template style file for Tailwind apps: color tokens, radius, spacing, shadows, and component tone.
FAQ
Can I use this Vercel DESIGN.md with Cursor?
Yes. Copy the file into your project and reference it from Cursor rules before asking Cursor to build or refactor UI.
Is this official Vercel design documentation?
No. This is an independent, Vercel-inspired DESIGN.md created for AI coding agents. It is not endorsed by Vercel.
What Vercel colors are included?
The page highlights core neutral and blue tokens including #000000, #171717, and #0070F3, plus supporting token guidance in the full DESIGN.md.
How do I use this with Codex?
Add the DESIGN.md to the project context, then ask Codex to follow its typography, spacing, color, component, and anti-pattern sections when generating UI.
Is this compatible with shadcn/ui and Tailwind?
Yes. The file is written so the tokens and component rules can be translated into Tailwind theme values and shadcn/ui component variants.