Vercel design system

Vercel's website (vercel.com) uses a light interface with #0068d6 as its primary color and Geist as the main typeface, with Geist Mono alongside it. designlang measured 15 font sizes from 6px to 48px, 13 spacing values, 9 corner radii.

Captured 21 May 2026Light UI3,117 elements read

Download tokens Read it yourself

Vercel colors

The brand roles and neutrals vercel.com renders, with how many elements use each one.

Brand colors

Primary#0068d64 uses
Secondary#52aeff4 uses
Accent#0070f33 uses

Neutrals

#1717173,031 uses
#ebebeb2,416 uses
#4d4d4d565 uses
#ffffff124 uses
#66666667 uses
#00000049 uses
#7d7d7d20 uses
#a8a8a813 uses
#8f8f8f9 uses
#ebf5ff2 uses

Backgrounds

#fafafa
#ffffff

Text colors

#17171717.18:1 on #fafafa
#0072f54.26:1 on #fafafa
#4d4d4d8.1:1 on #fafafa
#ffffff1.04:1 on #fafafa
#0068d65.09:1 on #fafafa
#52aeff2.27:1 on #fafafa
#e5484d3.75:1 on #fafafa
#ffb2241.73:1 on #fafafa

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 67% of them pass.

Text	Background	Ratio	Result
`#0072f5`	`#ffffff`	4.44:1	Fails AA
`#0068d6`	`#cce6ff`	4.13:1	Fails AA
`#4d4d4d`	`#ffffff`	8.45:1	AAA
`#4d4d4d`	`#fafafa`	8.1:1	AAA

Vercel fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

Geist: sans, most text (2,877 elements)
Geist Mono: mono, most text (240 elements)

Body text: 16px at weight 400, line height 24px.

Weights in use: 400, 500, 600, 700.

Type scale

Size	Weight	Line height	Tracking	Used on
48px	600	48px	-2.28px	h1, h3, span, div
40px	600	48px	-2.4px	h2
32px	400	48px	-1.28px	span, img, h3, p
24px	600	32px	-0.96px	h3, p, span, div
20px	400	36px	normal	p
18px	400	28px	normal	div, p, li, span
16px	400	24px	normal	html, head, style, meta
14px	400	14px	normal	button, span, svg, path
13px	500	20px	normal	div, ul, li, pre
12px	400	16px	normal	p, span, li, svg
9.5px	400	14.25px	normal	span
8px	600	8px	normal	span

Spacing and radii

Spacing scale

1px
24px
32px
36px
40px
44px
48px
85px
90px
96px
135px
144px
161px

Corner radii

2px
5px
8px
16px
32px
50px
64px
99px
pill

Pill-shaped controls are a large share of the rounded elements. 13 distinct box shadows.

Motion

The motion reads as springy.

Durations

xs: 90ms
sm: 160ms
md: 300ms

Easing

ease-in-out (38 uses): ease
custom (14 uses): cubic-bezier(0.4, 0, 0.2, 1)
ease-out (2 uses): cubic-bezier(0.14, 0.55, 0.3, 0.92)
spring (2 uses): cubic-bezier(0.31, 0.05, 0.43, 1.02)

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

78/100, grade C

Components found: buttons (37), cards (18), inputs (6), links (134), navigation (275), footer (10).

By category

Color Discipline	80/100
Typography Consistency	82/100
Spacing System	85/100
Shadow Consistency	78/100
Border Radius Consistency	80/100
Accessibility	67/100
CSS Tokenization	100/100

2 WCAG contrast failures
1267 !important rules — prefer specificity over overrides
12166 duplicate CSS declarations

Download the tokens

The files designlang wrote for vercel.com. Run it yourself for a fresh read: npx designlang vercel.com.

The core values as CSS variables

:root {
  --color-primary: #0068d6;
  --color-secondary: #52aeff;
  --color-accent: #0070f3;
  --color-background: #fafafa;
  --color-text: #171717;
  --color-neutral-1: #171717;
  --color-neutral-2: #ebebeb;
  --color-neutral-3: #4d4d4d;
  --color-neutral-4: #ffffff;
  --font-primary: "Geist", sans-serif;
  --font-secondary: "Geist Mono", monospace;
  --radius-sm: 2px;
  --radius-md: 5px;
  --radius-lg: 8px;
}

Read vercel.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Loom design system

Light UI, Charlie Text, #1868db

Notion design system

Light UI, NotionInter, #455dd3

Cal.com design system

Light UI, Inter, #0000ee

Webflow design system

Light UI, WF Visual Sans Variable, #146ef5

Quick answers

What font does Vercel use?

vercel.com sets most of its text in Geist (2,877 elements), with Geist Mono alongside it. designlang read this from the computed styles of the live page on 21 May 2026.

What are Vercel's brand colors?

The brand roles on vercel.com are primary #0068d6, secondary #52aeff and accent #0070f3, on a #fafafa background. The neutrals used most are #171717, #ebebeb and #4d4d4d.

How do I use the Vercel design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang vercel.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from vercel.com's public pages on 21 May 2026, so it shows what the site renders, not Vercel's internal source files. Vercel is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of vercel.com on 21 May 2026. Vercel is a trademark of its owner; designlang is not affiliated with it. More: the full Vercel brand kit, the token extraction guide and the markdown version of this page.