sparkmailapp.com1
Colors
Spacing
xs
4px
sm
8px
md
16px
lg
24px
xl
48px
gutter
24px
margin
24px
Rounded
none0px
sm4px
md6px
lg12px
xl24px
full9999px
Shadows
sm
5px 5px 5px 0px rgba(128, 130, 135, 0.1)
md
0 4px 12px 0 rgba(0, 0, 0, 0.08)
lg
0 8px 24px 0 rgba(0, 0, 0, 0.10)
Font
-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Sofia-Pro
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplaySofia-Pro · 100px · 800
Display headline
Headline LGSofia-Pro · 48px · 800
The quick brown fox
Headline MDSofia-Pro · 32px · 700
Design systems at scale
Headline SMSofia-Pro · 1.75rem · 700
Color, type, and spacing
Text
Body LG-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif · 18px · 600
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MD-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif · 16px · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SM-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif · 0.875rem · 400
Supporting text, captions, and metadata appear at this size.
Label LG-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif · 16px · 600
Button label · Primary action
Label MD-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif · 14px · 600
Form label · Required field
Label SM-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif · 12px · 400
Badge · Tag · Micro-copy