Vercel: Build and deploy the best web experiences with the AI Cloud

DesignScan preview · https://vercel.com · 2026-06-13

Colors

primary#171717
on-primary#ffffff
primary-hover#383838
background#fafafa
text#4d4d4d
accent-1#666666
accent-2#8f8f8f
on-accent-2#111111
error#ee0000
warning#f5a623

Typography

headline-lg32px · 600 · lh 1.25
The quick brown fox jumps
headline-sm24px · 600 · lh 1.25
The quick brown fox jumps
body-lg16px · 400 · lh 1.5
The quick brown fox jumps
body14px · 400 · lh 1.5
The quick brown fox jumps
label12px · 400 · lh 1.5
The quick brown fox jumps

Spacing

xs4px
sm8px
md12px
lg16px
xl24px
2xl32px
3xl40px

Radius

xs2px
sm4px
md6px

Layout

sm401px
md601px
lg641px
xl769px
2xl961px
3xl1200px
containermax-width 1080px

Elevation

sm
md
lg

Components

button-primary · :hover #383838
surface · input · body-text

Body text on the surface color — this is what reading copy looks like.

link
Inline link example →
badge Badge
feedback messages
error · Something went wrong — please try again.
warning · Heads up — this action can't be undone.