ryzesuperfoods.com5
Colors
Spacing
xs
4px
sm
8px
md
16px
lg
32px
xl
64px
gutter
16px
margin
40px
Rounded
none0px
sm2px
md8px
lg16px
xl24px
full999px
Shadows
sm
0px 1px 2px rgba(77, 28, 26, 0.06)
md
0px 4px 8px rgba(77, 28, 26, 0.08), 0px 1px 2px rgba(77, 28, 26, 0.04)
lg
0px 8px 24px rgba(77, 28, 26, 0.10), 0px 2px 4px rgba(77, 28, 26, 0.06)
xl
0px 20px 40px rgba(77, 28, 26, 0.12), 0px 4px 8px rgba(77, 28, 26, 0.06)
Font
Sofia Pro
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplaySofia Pro · 48px · 700
Display headline
Headline LGSofia Pro · 40px · 700
The quick brown fox
Headline MDSofia Pro · 32px · 600
Design systems at scale
Headline SMSofia Pro · 24px · 600
Color, type, and spacing
Text
Body LGSofia Pro · 20px · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDSofia Pro · 16px · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMSofia Pro · 14px · 400
Supporting text, captions, and metadata appear at this size.
Label LGSofia Pro · 18px · 600
Button label · Primary action
Label MDSofia Pro · 14px · 600
Form label · Required field
Label SMSofia Pro · 12px · 500
Badge · Tag · Micro-copy