# Vercel · Design system migration spec

> Source: https://vercel.com  ·  Curated by OpenDesign  ·  en

> This site is a definitive example of modern, developer-focused design, combining stark minimalism with high-contrast UI and precise typography.

## 1. Identity DNA

Vercel's interface operates with the discipline of a high-end precision instrument. Its system is built on a foundation of geometric clarity, monochrome authority, and the bold, confident restraint of a tool designed for developers.

**One-liner:** A high-performance developer platform with a stark, monochrome aesthetic punctuated by vibrant gradients.
**Keywords:** developer · cloud · performance · infrastructure · AI
**Analogy:** A precision instrument for modern web infrastructure

## 2. Color

The color system is a study in binary contrast: pure black, clean white, and structured grays. Chromatic color is not a language here, but a single, deliberate accent reserved for one central decorative graphic.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#fafafa` | card background |
| `--ink` | `#171717` | body text |
| `--ink-soft` | `#4d4d4d` | secondary text |
| `--muted` | `#666666` | placeholder |
| `--muted-soft` | `#8f8f8f` | weak hint |
| `--line` | `rgba(235,235,235,1)` | divider |

**Color principle:** A stark, monochrome foundation where typography and high-contrast UI elements carry the visual weight.

The principle is that monochrome creates an unwavering hierarchy, ensuring content and function are never obscured by decorative color.

## 3. Typography

Type is set in a strict, functional sans-serif, chosen for its geometric and humanist characteristics that convey technical precision. Headlines are bold and tightly set, while body text is given generous space for optimal readability.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 500 | -1.92px | Hero headline |
| headline | 32px | 1.1 | 500 | -0.8px | Section headings |
| body | 16px | 1.5 | 400 | 0px | Primary body text |
| caption | 14px | 1.4 | 400 | 0px | Secondary body text |
| mono | 14px | 1.6 | 400 | 0px | Code blocks |

**Type rules:**
- Tight negative tracking for display sizes
- Generous vertical rhythm in body copy
- Monospaced font for all code representations

## 4. Spacing

All vertical and horizontal rhythm is governed by a consistent 8px grid, creating a predictable and harmonious spatial structure.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid with consistent multiples for spacing and sizing

## 5. Surfaces

Surfaces are defined not by texture or depth, but by the crisp clarity of light borders and barely-perceptible shadows. The result is a flat, architectural feel where content exists on cleanly articulated planes.

- **Radius:** sm 4px · md 6px · lg 12px · pill 9999px
- **Shadows:**
  - rgba(0,0,0,0.08) 0px 0px 0px 1px
  - rgba(0,0,0,0.04) 0px 2px 2px 0px
- **Borders:** 1px solid #ebebeb

## 6. Layout

The layout skeleton is a centered, single-column construct, beginning with a fluid hero container that commands attention. Content sections follow in a structured, linear progression, using generous whitespace to frame each component.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column layout with wide margins, utilizing a visible 12-column grid in the hero

## 7. Motion & Interaction

Motion is treated as a functional polish, not a decorative layer. Animations are minimal and purposeful—subtle fade-ins and smooth transitions that acknowledge interaction and enhance perceived performance without drawing attention to themselves.

- **Durations:** micro 100ms · small 150ms · medium 400ms
- **Easing:** `cubic-bezier(0.33, 0.12, 0.15, 1)`
- **Patterns:**
  - Subtle opacity transitions
  - Color shifts on hover
  - Transform on click

- **Hover:** Subtle color change or border transition
- **Click:** Immediate visual response with slight transform or opacity shift
- **Transition:** Fast color and border-color transitions (0.15s)
- **Keyboard:** Standard focus states with visible outlines

## 8. Voice & Don'ts

The editorial voice is professional, technical, and direct, mirroring the interface's clarity. It favors declarative, action-oriented headlines and strong verbs in calls to action, avoiding any hyperbole or casual language.

- **Tone:** Professional, direct, and technically precise
- **Headline style:** Bold, concise, and action-oriented statements
- **CTA style:** Clear, imperative verbs like 'Start Deploying' and 'Get a Demo'
- **Avoid:** Overly playful language / Ambiguous terminology / Excessive exclamation points

### Don'ts
- ❌ Don't use vibrant or neon colors as primary UI elements — screenshot shows a strictly monochrome interface
- ❌ Don't use rounded corners on all elements — screenshot shows sharp, geometric shapes like the logo and cards
- ❌ Don't use wide, decorative fonts — screenshot shows a clean, functional sans-serif for all headings
- ❌ Don't create overly complex layouts with many columns — screenshot shows a spacious, single-column flow
- ❌ Don't use drop shadows for depth — screenshot relies on thin borders and high contrast for separation
- ❌ Don't use all-caps for body text — screenshot reserves uppercase for small labels or tags

The system deliberately excludes decorative typefaces, multiple accent colors, and visual clutter to protect its core identity as a serious, tool-like interface.

## System Prompt (paste into AI tool)

```
Design system for a high-performance developer platform. Use a stark monochrome palette centered on black (#171717) and white (#ffffff) with functional grays. Typography should be a clean geometric sans-serif for display and a humanist sans for body text. Layout is spacious and centered, utilizing a visible grid. Components are high-contrast, often pill-shaped, with subtle borders. Critical constraints: maintain a strict monochrome foundation, avoid soft or rounded aesthetics, and keep typography precise and legible. Ensure all interactive elements provide clear, fast feedback.
```
