21
Colors
Spacing
xs
0.5rem
sm
1rem
md
1.5rem
lg
2.5rem
xl
4rem
gutter
1.5rem
margin
1rem
Rounded
none0px
sm4px
md8px
lg16px
xl24px
full9999px
Shadows
sm
0 1px 4px rgba(0, 0, 0, 0.06)
md
0 4px 20px rgba(147, 26, 129, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06)
lg
0 12px 40px rgba(147, 26, 129, 0.22), 0 2px 8px rgba(0, 0, 0, 0.10)
xl
12px 12px 50px rgba(0, 0, 0, 0.4)
Font
Figtree
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Source Sans 3
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplaySource Sans 3 · 57.6px · 900
Display headline
Headline LGSource Sans 3 · 35.2px · 700
The quick brown fox
Headline MDSource Sans 3 · 28px · 700
Design systems at scale
Headline SMSource Sans 3 · 22px · 600
Color, type, and spacing
Text
Body LGFigtree · 17px · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDFigtree · 14px · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMFigtree · 12px · 400
Supporting text, captions, and metadata appear at this size.
Label LGSource Sans 3 · 15.2px · 700
Button label · Primary action
Label MDFigtree · 14px · 500
Form label · Required field
Label SMSource Serif 4 · 11.52px · 700
Badge · Tag · Micro-copy