handshake.com0
Colors
Spacing
xs
0.25rem
sm
0.5rem
md
1rem
lg
1.5rem
xl
2rem
gutter
1.5rem
margin
1rem
Rounded
none0px
sm0.25rem
md0.375rem
lg0.5rem
xl0.75rem
full9999px
Shadows
sm
0 0 2px #18181b40
md
0 4px 8px #18181b0a, 0 0 2px #18181b40
lg
0 8px 48px #06060814, 0 4px 8px #18181b0a, 0 0 2px #18181b40
xl
0 8px 48px #18181b3d, 0 4px 8px #18181b29, 0 0 2px #ffffff85
Font
Shopify-Inter, Helvetica, Arial, sans-serif
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplayShopify-Inter, Helvetica, Arial, sans-serif · 6rem · 300
Display headline
Headline LGShopify-Inter, Helvetica, Arial, sans-serif · 3.5rem · 330
The quick brown fox
Headline MDShopify-Inter, Helvetica, Arial, sans-serif · 2.75rem · 330
Design systems at scale
Headline SMShopify-Inter, Helvetica, Arial, sans-serif · 2.125rem · 330
Color, type, and spacing
Text
Body LGShopify-Inter, Helvetica, Arial, sans-serif · 1.25rem · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDShopify-Inter, Helvetica, Arial, sans-serif · 1rem · 420
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMShopify-Inter, Helvetica, Arial, sans-serif · 0.875rem · 420
Supporting text, captions, and metadata appear at this size.
Label LGShopify-Inter, Helvetica, Arial, sans-serif · 1rem · 550
Button label · Primary action
Label MDShopify-Inter, Helvetica, Arial, sans-serif · 0.875rem · 550
Form label · Required field
Label SMShopify-Inter, Helvetica, Arial, sans-serif · 0.75rem · 550
Badge · Tag · Micro-copy