Vercel Color Palette
TechVercel's stark black-and-white identity with its iconic triangle logo represents the cutting edge of web development, emphasizing speed, performance, and developer experience.
vercel.comVercel logo is a trademark of Vercel. Used for informational purposes.
Brand Colors
Vercel Black
primary
Vercel Dark
secondary
Vercel Blue
accent
Surfaces & Borders
Vercel Background
background
Vercel Surface
surface
Vercel Border
border
Typography
Vercel White
textPrimary
Vercel Gray
textSecondary
Vercel Muted
textMuted
Semantic Colors
Vercel Success
success
Vercel Warning
warning
Vercel Error
error
Vercel Info
info
Accessibility
textPrimary / background
textPrimary / surface
textSecondary / background
textSecondary / surface
textMuted / background
textMuted / surface
Color Theory
Vercel's palette is maximally reduced — black and white form an absolute binary with blue as the sole chromatic element. This extreme minimalism reflects the brand's focus on performance and developer tooling.
- Pure black backgrounds with white text create maximum contrast and drama
- Blue (#0070F3) is the only color, used exclusively for interactive states
- Grayscale surface layers (#111111, #171717, #333333) provide subtle depth
Color Psychology
The stark black-and-white palette projects authority, technical precision, and cutting-edge modernism. It signals a company that strips away everything unnecessary — a philosophy that extends to their developer tools.
Evolution
Vercel (formerly ZEIT) has maintained a dark, minimal aesthetic since its early days. The shift from ZEIT to Vercel brought the triangle logo and solidified the pure black brand identity, with blue replacing earlier accent colors.
How Vercel Uses Color
Primary
Black dominates as both the brand color and primary background, creating Vercel's signature dark-mode-first experience.
Secondary
Slightly elevated dark surfaces (#111111, #171717) provide card and panel differentiation.
Accent
Vercel Blue (#0070F3) is used for links, buttons, and interactive elements — it's the sole color in an otherwise monochrome world.
Backgrounds
The black background makes deployment previews, code snippets, and dashboard data feel like terminal outputs — familiar to developers.
Typography
Near-white text (#EDEDED) with gray levels creates readable hierarchy without the harshness of pure white on black.
Semantic
Blue doubles as success color (deployment complete), while orange and red handle warnings and errors respectively.
Agent integration
Use Vercel's Colors in Your Agent
Terminal
Copies full install command. Saves skill to .claude/skills/vercel/ — auto-detected on next run.
Included in the skill file
- 113 color roles — hex, HSL, and CSS variable names
- 2WCAG contrast rules for accessible pairings
- 3Auto-applies Vercel's palette when generating UI
Frequently Asked Questions
Create Something Inspired by Vercel
Generate a unique color palette inspired by Vercel's aesthetic using AI.