shopify.com2
Colors
Spacing
xs
0.5rem
sm
1rem
md
1.5rem
lg
2rem
xl
2.5rem
gutter
1.5rem
margin
5.625rem
Rounded
none0px
sm0.375rem
md0.5rem
lg0.75rem
xl1rem
full9999px
Shadows
sm
0 1px 2px 0 rgba(0,0,0,0.4)
md
0 4px 12px 0 rgba(0,0,0,0.5)
lg
0 8px 24px 0 rgba(0,0,0,0.6)
xl
0 20px 40px 0 rgba(0,0,0,0.7)
Font
Shopify-Inter
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplayShopify-Inter · 6rem · 300
Display headline
Headline LGShopify-Inter · 4rem · 330
The quick brown fox
Headline MDShopify-Inter · 3.5rem · 330
Design systems at scale
Headline SMShopify-Inter · 2.75rem · 330
Color, type, and spacing
Text
Body LGShopify-Inter · 1.25rem · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDShopify-Inter · 1.125rem · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMShopify-Inter · 0.875rem · 420
Supporting text, captions, and metadata appear at this size.
Label LGShopify-Inter · 1.125rem · 550
Button label · Primary action
Label MDShopify-Inter · 1rem · 550
Form label · Required field
Label SMShopify-Inter · 0.875rem · 450
Badge · Tag · Micro-copy