darkboldminimalhigh-contrast
Vercel Colors & Fonts
What colors and fonts does Vercel use? Frontend cloud platform. Black & white, sharp, bold typography.
Vercel Color Palette
Primary: #000000
Primary
#000000Brand, buttons
Background
#000000Main background
Surface
#111111Cards
Border
#333333Dividers
Text Primary
#FFFFFFHeadings
Text Secondary
#888888Body text
Accent
#0070F3Links, highlights
What Font Does Vercel Use?
Vercel uses Geist and Geist
Headings
Geist
700custom
Body Text
Geist
400custom
Code
Geist Mono
400custom
Spacing & Radius
Spacing Scale
Base: 4px
481624324864128
Border Radius
Small
4pxMedium
8pxLarge
12pxVercel Tailwind Config
Copy this config to your project
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'primary': '#000000',
'background': '#000000',
'surface': '#111111',
'border': '#333333',
'text-primary': '#FFFFFF',
'text-secondary': '#888888',
'accent': '#0070F3',
},
fontFamily: {
'heading': ['Geist', 'sans-serif'],
'body': ['Geist', 'sans-serif'],
'mono': ['Geist Mono', 'sans-serif'],
},
},
},
}Extract Vercel's Full Design
Get pixel-perfect colors, fonts, and spacing extracted directly from the live site. Ready for Tailwind and Cursor AI.
Get PromptUI — $19One-time payment · 20 extractions · No subscription
Similar Design Systems
Explore more design systems
Updated: 2025-01-15