Color Palette
Background Colors
Light Gray
rgba(210,210,215,0.64)
Border Colors
No border colors defined in the Apple design system token set.
Typography
Base Font · SF Pro Text
SF Pro Text
The quick brown fox jumps over the lazy dog.
Regular · 400
Semibold · 600
Display Font · SF Pro Display
SF Pro Display
Designed for clarity at every size across Apple platforms.
Regular · 400
Semibold · 600
iPhone
Display Hero · 80px · Semibold · line-height: 84px · letter-spacing: −1.2px
The ultimate iPhone.
Heading XL · 37px · Semibold · letter-spacing: −0.374px
Designed to the last detail.
Heading Large · 28px · Semibold · line-height: 32px · letter-spacing: −0.224px
Camera · Battery · Performance
Heading Medium · 24px · Semibold · line-height: 28px · letter-spacing: −0.12px
Buy directly from Apple, or find a retailer near you.
Body Large · 21.6px · Regular · line-height: 29.25px
Apple Intelligence is designed to protect your privacy at every step.
Body Default · 17px · Regular · line-height: 25px
NEW · MOST POPULAR · AVAILABLE NOW
Caption / Label · 12px · Semibold · line-height: 16px · letter-spacing: 0.216px
Letter Spacing
Apple Store
--letter-spacing-tight
−1.2px · display text, large headings
Mac · iPad · iPhone
--letter-spacing-normal
−0.374px · standard body headings
Apple Intelligence
--letter-spacing-wide
−0.224px · secondary headings
NEW ARRIVAL
--letter-spacing-ls-7
+0.216px · uppercase labels
Spacing
Spacing Scale
42 tokens — 1px → 90px
Borders
Border Radii
Bottom Curved
0 0 18px 18px
Border Width
--border-width-hairline
1px · ×18 usages
The single border width used throughout the Apple system. Applied universally — product cards, inputs, list separators, table rows — via --border-width-hairline: 1px.
Shadows / Elevation
Shadow Tokens
1 token
--shadow-sm
×61 usages
rgba(0,0,0,0.08) 2px 4px 12px 0px · product cards, modals, dropdowns, popovers
Z-Index
| Layer | Value | Usage |
|---|
| --z-1 | -1 | Background decorations, canvas layers beneath content |
| --z-2 | 1 | Base content layer, default stacking context |
| --z-3 | 2 | Slightly elevated content, interactive hover states |
| --z-4 | 10 | Sticky headers, navigation bars, tab bars |
| --z-5 | 9998 | Full-screen overlays, search overlays, drawers |
| --z-6 | 9999 | Top-most layer — modals, toasts, emergency banners |
Breakpoints
📐
No breakpoints defined — Apple's responsive layout relies on intrinsic sizing and flexible grid systems rather than named CSS breakpoint tokens.
Opacity
Opacity Tokens
1 token — 0.8
--opacity-80
80% · ×1 usage
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| --color-dark-gray | --color-black | 1.25:1 | Fail |
| --color-dark-gray | --color-white | 16.83:1 | AAA |
| --color-dark-gray | --color-light-gray | 11.16:1 | AAA |
| --color-dark-gray | --color-light-gray-2 | 13.78:1 | AAA |
| --color-dark-gray | --color-white-2 | 15.46:1 | AAA |
| --color-dark-gray-2 | --color-black | 1.67:1 | Fail |
| --color-dark-gray-2 | --color-white | 12.59:1 | AAA |
| --color-dark-gray-2 | --color-light-gray | 8.35:1 | AAA |
| --color-dark-gray-2 | --color-light-gray-2 | 10.31:1 | AAA |
| --color-dark-gray-2 | --color-white-2 | 11.57:1 | AAA |
| --color-mid-gray | --color-black | 4.14:1 | AA Large |
| --color-mid-gray | --color-white | 5.07:1 | AA |
| --color-mid-gray | --color-light-gray | 3.36:1 | AA Large |
| --color-mid-gray | --color-light-gray-2 | 4.15:1 | AA Large |
| --color-mid-gray | --color-white-2 | 4.66:1 | AA |
| --color-orange | --color-black | 3.82:1 | AA Large |
| --color-orange | --color-white | 5.5:1 | AA |
| --color-orange | --color-light-gray | 3.65:1 | AA Large |
| --color-orange | --color-light-gray-2 | 4.51:1 | AA |
| --color-orange | --color-white-2 | 5.05:1 | AA |
| --color-blue | --color-black | 5.23:1 | AA |
| --color-blue | --color-white | 4.02:1 | AA Large |
| --color-blue | --color-light-gray | 2.66:1 | Fail |
| --color-blue | --color-light-gray-2 | 3.29:1 | AA Large |
| --color-blue | --color-white-2 | 3.69:1 | AA Large |
CSS Variables Reference
Pure Black--color-black#000000
Pure White--color-white#FFFFFF
Light Gray--color-light-grayrgba(210,210,215,0.64)
Light Gray 2--color-light-gray-2#E8E8ED
Off White--color-white-2#F5F5F7
Snow--color-white-3#FAFAFC
Light Blue--color-light-blue#ADD8FF
Mauve Gray--color-dark-gray-4#635B61
Label Primary--color-dark-gray#1D1D1F
Label Secondary--color-dark-gray-2#333336
Label Tertiary--color-mid-gray#6E6E73
Orange--color-orange#B64400
Blue / Link--color-blue#007AFF
Dark Gray 3--color-dark-gray-3#424245
Blue Deep--color-blue-2#0066CC
Dark Green--color-dark-green#008009
Purple--color-purple#AC39FF
Orange 2--color-orange-2#FF791B
Mid Gray 2--color-mid-gray-2#86868B
Orange 3--color-orange-3#F8AB5E
Purple 2--color-purple-2#A176C8
Blue 3--color-blue-3#759BEB
Green--color-green#70DB96
Blue 4--color-blue-4#0079D0
Purple 3--color-purple-3#9E52D8
Red 2--color-red-2#DA365C
Orange 4--color-orange-4#D04901
SF Pro Text--font-family-base
SF Pro Display--font-family-2
8.4px--font-size-2xs2xs
10px--font-size-xsxs
12px--font-size-smsm
14px--font-size-basebase
17px--font-size-3xl3xl
24px--font-size-24px24px
28px--font-size-28px28px
37px--font-size-37px37px
80px--font-size-80pxdisplay
Regular--font-weight-regular400
Semibold--font-weight-semibold600
1px--border-width-hairline×18
Elevation--shadow-sm×61
Background--z-1-1
Base--z-21
Elevated--z-32
Navigation--z-410
Overlay--z-59998
Modal / Top--z-69999
Instant--duration-instant0.02s
Fast--duration-fast0.04s
Normal--duration-normal0.06s
Slow--duration-slow0.08s
Slower--duration-slower0.1s
Duration 12--duration-duration-120.24s
Duration 15--duration-duration-150.32s
Duration 16--duration-duration-160.5s
Duration 17--duration-duration-170.7s
Linear--easing-linearlinear
Ease In--easing-ease-inease-in
Opacity 80--opacity-800.8