Vercel DESIGN.md — Vercel Design System for AI Agents

What is inside the Vercel DESIGN.md

Vercel-style neutral and blue token map for light and dark product surfaces.

Geist typography notes for headings, interface labels, code, and compact metadata.

Spacing, radius, border, and shadow rules tuned for dashboard and deployment UI.

Button, card, input, navigation, and deploy-status component rules for AI-generated screens.

Anti-patterns that prevent generic SaaS gradients, oversized cards, and loose spacing.

Vercel design tokens

Primary text

#000000

High-contrast foreground for dense developer UI.

Raised surface

#171717

Dark panel surface used for command bars and preview frames.

Action blue

#0070F3

Focused link and primary action accent.

Typeface

Geist

Geometric sans family for UI, docs, and dashboard copy.

Use with AI coding agents

Cursor

Save the file in the repo, reference it from .cursor/rules, and ask Cursor to follow the token names before editing Tailwind or shadcn components.

Claude Code

Paste the DESIGN.md summary into CLAUDE.md or keep it beside the task brief so generated UI keeps the Vercel-style density and contrast.

Codex

Add the DESIGN.md to the project context and ask Codex to preserve its colors, typography, spacing, component states, and anti-patterns.

v0

Use the token and component sections as prompt constraints when asking v0 for Vercel-style dashboards, forms, or deployment screens.

Design analysis

Why the Vercel style works

Vercel UI pairs monochrome foundations with one precise blue accent. The result is fast to scan: hierarchy comes from type scale, spacing, and contrast rather than decoration.

What agents usually get wrong

AI agents often inflate Vercel-inspired UI into generic SaaS cards, gradients, and loose dashboards. The useful constraint is restraint: compact rows, sharp contrast, narrow accents, and clear system states.

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

shadcn/ui DESIGN.md

A related component-system reference for building agent-generated UI with shadcn/ui.

v0 by Vercel DESIGN.md

A related workflow page for Vercel-built AI UI generation with v0.

Cursor DESIGN.md

A related agent workflow page for applying Vercel-inspired rules in Cursor.

GitHub DESIGN.md

A related devtool reference for dark, keyboard-centric AI-built interfaces.

Tailwind CSS DESIGN.md

The primary Tailwind CSS reference: spacing scale, color tokens, and component tone for AI agents.

Tailwind DESIGN.md template

A companion template for CSS variables, spacing, and component tone.

DESIGN.md for v0 guide

The educational guide for writing v0-specific design memory.

DESIGN.md for Codex guide

How to keep Codex-generated UI on-brand with a visual context layer.