Design Tokens
Apple's complete design token system — 21 colors, 16 typography sizes, 7 radii, 8 spacing levels, 4 elevation levels, and 24 components.
Color Palette
Action Blue
#0066cc
Focus Blue
#0071e3
Sky Link Blue
#2997ff
Ink
#1d1d1f
Parchment
#f5f5f7
Canvas
#ffffff
Dark Tile 1
#272729
Pure Black
#000000
Action Blue (#0066cc) is the only interactive color. Zero decorative gradients. Zero secondary brand colors.
Typography Scale
10pxMicro Legal400 · -0.08px
12pxNav Link / Fine Print400 · -0.12px
14pxCaption / Button Utility400 · -0.224px
17pxBody / Dense Link400 · -0.374px
21pxTagline600 · 0.231px
24pxLead Airy300 · 0
28pxLead400 · 0.196px
40pxDisplay LG600 · 0
56pxHero Display600 · -0.28px
17px body (not 16px) · Weight 600 for headlines, not 700 · Weight 500 deliberately absent · Weight 300 is rare and intentional
Spacing Scale
4px / xxs
8px / xs
12px / sm
17px / md
24px / lg
32px / xl
48px / xxl
80px / section
Base unit: 8px · Section vertical padding: 80px
Border Radius
none (0px)Full-bleed tiles
xs (5px)Inline chips (rare)
sm (8px)Dark utility buttons
md (11px)Pearl button capsules
lg (18px)Utility/store cards
pill (9999px)All CTAs · chips · search
The pill (9999px) is the signature Apple shape — on every primary CTA, search, and chip
Elevation & Depth
Flat
No shadow, no border
Use: Full-bleed tiles, global nav, footer
Soft hairline
1px rgba(0,0,0,0.08)
Use: Utility cards, sub-nav separator
Backdrop blur
backdrop-filter: blur(N) on Parchment 80%
Use: Sub-nav, floating sticky bar
Product shadow
rgba(0,0,0,0.22) 3px 5px 30px
Use: Product renders on a surface (only one)
"Apple uses exactly one drop-shadow, and it is applied to photographic product imagery — never to cards, never to buttons, never to text."
Generated from getdesign@latest add apple · 8 colors · 9 type sizes · 6 radii · 8 spacings