Back to Library
V

Vercel

Vercel

Visit Website

Deployment platform. Stark black and white minimalism. No decoration, maximum function. The absence of color is the design statement.

黑白极简三角logo零装饰开发者向功能至上

Color Palette

primary
secondary
background
surface
text
muted
border

Typography

Heading FontInter, system-ui, sans-serif
Body FontInter, system-ui, sans-serif
Base Size16px
Line Height1.5
Weights400, 500, 600, 700

Heading Scale

h1Vercel Heading
h2Vercel Heading
h3Vercel Heading
h4Vercel Heading

DESIGN.md

# Vercel Design System

## Visual Theme & Atmosphere
Radical minimalism. Black on white, white on black. No gradients, no shadows (almost). The triangle logo says everything. Design by absolute subtraction.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #000000 | Pure black, backgrounds |
| Secondary | #FFFFFF | Pure white, text |
| Surface | #111111 | Elevated panels |
| Text | #FFFFFF | Primary text |
| Muted | #888888 | Secondary text |
| Border | #333333 | Subtle dividers |

## Typography Rules
- **Fonts**: Inter, system-ui
- **Base Size**: 16px
- **Line Height**: 1.5
- **Weights**: 400-700

## Component Stylings
- **Buttons**: Black outline or white outline, no fill
- **Cards**: Black bg, white text, zero border radius
- **Navigation**: Minimal, horizontal, text-only

## Agent Prompt Guide
Absolute minimalism. Black and white only. No decorations. Large typography. Maximum whitespace.

Frequently Asked Questions

What is Vercel's design style?

Deployment platform. Stark black and white minimalism. No decoration, maximum function. The absence of color is the design statement.

What is Vercel's primary color?

Vercel uses #000000 as primary color, #000000 for background, and #FFFFFF for text.

What fonts does Vercel use?

Heading font: Inter, system-ui, sans-serif. Body font: Inter, system-ui, sans-serif. Base size: 16px.

How to use Vercel design system in my project?

Click the Copy button above the DESIGN.md code block to copy the complete design specification. AI Coding tools like Cursor can directly read DESIGN.md to generate code matching Vercel's style.

Explore More Design Systems

Discover 50+ curated design systems for your AI Coding projects.

View All Design Systems