vanityterrace.com1
Colors
Spacing
xs
0.44rem
sm
0.67rem
md
1rem
lg
1.5rem
xl
2.25rem
gutter
24px
margin
16px
Rounded
none0px
sm3px
md4px
lg6px
xl8px
full9999px
Shadows
sm
6px 6px 9px rgba(0, 0, 0, 0.2)
md
12px 12px 50px rgba(0, 0, 0, 0.4)
lg
6px 6px 0px rgba(0, 0, 0, 0.2)
xl
6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0)
Font
Encode Sans
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplayEncode Sans · 70px · 700
Display headline
Headline LGEncode Sans · 50px · 700
The quick brown fox
Headline MDEncode Sans · 36px · 600
Design systems at scale
Headline SMEncode Sans · 24px · 600
Color, type, and spacing
Text
Body LGEncode Sans · 24px · 500
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDEncode Sans · 20px · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMEncode Sans · 16px · 400
Supporting text, captions, and metadata appear at this size.
Label LGEncode Sans · 18px · 600
Button label · Primary action
Label MDEncode Sans · 16px · 600
Form label · Required field
Label SMEncode Sans · 13px · 500
Badge · Tag · Micro-copy