music.apple.com1
Colors
Spacing
xs
4px
sm
12px
md
16px
lg
24px
xl
40px
gutter
25px
margin
40px
Rounded
none0px
sm4px
md8px
lg12px
xl18px
full1000px
Shadows
sm
0 1px 3px 0 rgba(0, 0, 0, 0.08)
md
0 4px 8px 0 rgba(0, 0, 0, 0.10)
lg
0 8px 24px 0 rgba(0, 0, 0, 0.12)
xl
0 16px 40px 0 rgba(0, 0, 0, 0.16)
Font
-apple-system, BlinkMacSystemFont, SF Pro Text, SF Pro, Helvetica Neue, Helvetica, Arial, sans-serif
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
-apple-system, BlinkMacSystemFont, SF Pro Display, SF Pro, Helvetica Neue, Helvetica, Arial, sans-serif
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline Display-apple-system, BlinkMacSystemFont, SF Pro Display, SF Pro, Helvetica Neue, Helvetica, Arial, sans-serif · 96px · 600
Display headline
Headline LG-apple-system, BlinkMacSystemFont, SF Pro Display, SF Pro, Helvetica Neue, Helvetica, Arial, sans-serif · 64px · 600
The quick brown fox
Headline MD-apple-system, BlinkMacSystemFont, SF Pro Display, SF Pro, Helvetica Neue, Helvetica, Arial, sans-serif · 48px · 600
Design systems at scale
Headline SM-apple-system, BlinkMacSystemFont, SF Pro Text, SF Pro, Helvetica Neue, Helvetica, Arial, sans-serif · 34px · 700
Color, type, and spacing
Text
Body LG-apple-system, BlinkMacSystemFont, SF Pro Text, SF Pro, Helvetica Neue, Helvetica, Arial, sans-serif · 17px · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MD-apple-system, BlinkMacSystemFont, SF Pro Text, SF Pro, Helvetica Neue, Helvetica, Arial, sans-serif · 13px · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SM-apple-system, BlinkMacSystemFont, SF Pro Text, SF Pro, Helvetica Neue, Helvetica, Arial, sans-serif · 11px · 400
Supporting text, captions, and metadata appear at this size.
Label LG-apple-system, BlinkMacSystemFont, SF Pro Text, SF Pro, Helvetica Neue, Helvetica, Arial, sans-serif · 15px · 600
Button label · Primary action
Label MD-apple-system, BlinkMacSystemFont, SF Pro Text, SF Pro, Helvetica Neue, Helvetica, Arial, sans-serif · 13px · 600
Form label · Required field
Label SM-apple-system, BlinkMacSystemFont, SF Pro Text, SF Pro, Helvetica Neue, Helvetica, Arial, sans-serif · 11px · 600
Badge · Tag · Micro-copy