charliehealth.com0
Colors
Spacing
xs
4px
sm
8px
md
12px
lg
20px
xl
24px
gutter
20px
margin
24px
Rounded
none0px
sm4px
md8px
lg12px
xl16px
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
12px 12px 50px rgba(0, 0, 0, 0.4)
Font
Sharp Earth
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Feijoa
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplayFeijoa · 64px · 500
Display headline
Headline LGFeijoa · 56px · 500
The quick brown fox
Headline MDFeijoa · 48px · 500
Design systems at scale
Headline SMFeijoa · 36px · 500
Color, type, and spacing
Text
Body LGSharp Earth · 18px · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDSharp Earth · 16px · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMSharp Earth · 14px · 400
Supporting text, captions, and metadata appear at this size.
Label LGSharp Earth · 16px · 500
Button label · Primary action
Label MDSharp Earth · 14px · 500
Form label · Required field
Label SMSharp Earth · 12px · 500
Badge · Tag · Micro-copy