vercel.com0
Colors
Spacing
xs
4px
sm
8px
md
12px
lg
24px
xl
40px
gutter
16px
margin
24px
Rounded
none0px
sm3px
md6px
lg0.75rem
xl1.5rem
full9999px
Shadows
sm
rgb(235, 235, 235) 0px 0px 0px 1px
md
0 3px 3px rgba(0, 0, 0, 0.12)
lg
0 4px 4px rgba(0, 0, 0, 0.15)
Font
GeistSans
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplayGeistSans · 64px · 400
Display headline
Headline LGGeistSans · 48px · 400
The quick brown fox
Headline MDGeistSans · 36px · 400
Design systems at scale
Headline SMGeistSans · 24px · 450
Color, type, and spacing
Text
Body LGGeistSans · 18px · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDGeistSans · 16px · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMGeistSans · 14px · 400
Supporting text, captions, and metadata appear at this size.
Label LGGeistSans · 16px · 500
Button label · Primary action
Label MDGeistSans · 14px · 500
Form label · Required field
Label SMGeistSans · 12px · 500
Badge · Tag · Micro-copy