Vercel

Vercel

Frontend cloud platform

The deployment platform behind Next.js, presented in stark black-and-white with Geist as its house typeface.

vercel.com

Color palette

Accent

Primary#171717

Primary brand color — key actions and emphasis.

Mute#888888

Accent color used within the product's own UI.

Violet#7928ca

Accent color used within the product's own UI.

Violet Soft#d8ccf1

Accent color used within the product's own UI.

Violet Deep#4c2889

Accent color used within the product's own UI.

Cyan#50e3c2

Accent color used within the product's own UI.

Cyan Soft#aaffec

Accent color used within the product's own UI.

Cyan Deep#29bc9b

Accent color used within the product's own UI.

Highlight Magenta#eb367f

Accent color used within the product's own UI.

Gradient Develop Start#007cf0

Accent color used within the product's own UI.

Gradient Develop End#00dfd8

Accent color used within the product's own UI.

Gradient Preview Start#7928ca

Accent color used within the product's own UI.

Gradient Preview End#ff0080

Accent color used within the product's own UI.

Gradient Ship Start#ff4d4d

Accent color used within the product's own UI.

Gradient Ship End#f9cb28

Accent color used within the product's own UI.

Selection Bg#171717

Accent color used within the product's own UI.

Selection Fg#f2f2f2

Accent color used within the product's own UI.

Semantic

Success#0070f3

Success state.

Error#ee0000

Error and destructive state.

Error Soft#f7d4d6

Error and destructive state.

Error Deep#c50000

Error and destructive state.

Warning#f5a623

Warning state.

Warning Soft#ffefcf

Warning state.

Warning Deep#ab570a

Warning state.

Neutral

On Primary#ffffff

Text and icon color on a solid primary fill.

Ink#171717

Primary text color.

Body#4d4d4d

Secondary or muted text.

Hairline#ebebeb

Borders and dividers.

Hairline Strong#a1a1a1

Borders and dividers.

Canvas#ffffff

Page background.

Canvas Soft#fafafa

Page background.

Canvas Soft 2#f5f5f5

Page background.

Link#0070f3

Primary text color.

Link Deep#0761d1

Primary text color.

Link Bg Soft#d3e5ff

Primary text color.

Highlight Pink#ff0080

Primary text color.

Type scale

Display Xl
48px · 600 · 1
Display Lg
32px · 600 · 1.25
Display Md
24px · 600 · 1.33
Display Sm
20px · 600 · 1.4
Body Lg
18px · 400 · 1.56
Body Md
16px · 400 · 1.5
Body Md Strong
16px · 500 · 1.5
Button Lg
16px · 500 · 1.5
Body Sm
14px · 400 · 1.43
Body Sm Strong
14px · 500 · 1.43
Button Md
14px · 500 · 1.43
Code
13px · 400 · 1.54
Caption
12px · 400 · 1.33
Caption Mono
12px · 400 · 1.33

Fonts

PrimaryGeistWeights 400, 500, 600Fallback: Inter, system-ui, -apple-system, sans-serif
CodeGeist MonoWeights 400Fallback: ui-monospace, SFMono-Regular, Menlo, Monaco

Spacing & shape

Xxs
4px
Xs
8px
Sm
12px
Md
16px
Lg
24px
Xl
32px
2xl
40px
3xl
48px
4xl
64px
5xl
96px
6xl
128px
Section
192px
None
0px
Xs
4px
Sm
6px
Md
8px
Lg
12px
Xl
16px
Pill Sm
64px
Pill
100px
Full
9999px

Guidelines

  • Reserve Primary for primary actions and emphasis — it is the system's one accent color.
  • Keep type on the documented family set (Geist, Geist Mono).
  • Use one of the documented corner radii (0px, 4px, 6px, 8px, 12px, 16px, 64px, 100px, 9999px) rather than a one-off value.
  • Build spacing from the documented scale (4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 96px, 128px, 192px) instead of arbitrary padding.
  • Don't apply Primary as a full-page background or a large fill.
  • Don't introduce a second accent color alongside Primary.
  • Don't mix in an additional typeface beyond the ones documented here.