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

#000000

Brand, buttons

Background

#000000

Main background

Surface

#111111

Cards

Border

#333333

Dividers

Text Primary

#FFFFFF

Headings

Text Secondary

#888888

Body text

Accent

#0070F3

Links, 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

Small4px
Medium8px
Large12px

Vercel 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 — $19

One-time payment · 20 extractions · No subscription

Updated: 2025-01-15