Apple
Apple sets large SF Pro Display headlines in a heavy weight on a light bone white canvas. Cobalt (#0071e3) is reserved for actions, on fully rounded pill buttons, while the rest of the page stays with graphite text and neutral surfaces. The most common corner radius is 980px, with 999px and 50% on smaller elements.
apple.com ↗Colors
Cobalt
#0071e3
Primary actions and links
Soft Cobalt
#2997ff
Secondary accent and highlights
Bone White
#ffffff
Page canvas
Graphite
#1d1d1f
Headlines and body copy
Void
#000000
Surface or divider
Deep Bone White
#f5f5f7
Surface or divider
Deep Cobalt
#0066cc
Supporting colour
Bone White 2
#f4f8fb
Surface or divider
Cobalt 2
#24568e
Supporting colour
Type scale
Buttons
Style reference measured from the public page at apple.com on 2026-10-12 for design education. Apple and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.
# Apple — Style Reference > Apple sets large SF Pro Display headlines in a heavy weight on a light bone white canvas. Cobalt (#0071e3) is reserved for actions, on fully rounded pill buttons, while the rest of the page stays with graphite text and neutral surfaces. The most common corner radius is 980px, with 999px and 50% on smaller elements. **Theme:** light · **Source:** https://www.apple.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cobalt | `#0071e3` | `--color-accent` | Primary actions and links | | Soft Cobalt | `#2997ff` | `--color-secondary` | Secondary accent and highlights | | Bone White | `#ffffff` | `--color-canvas` | Page canvas | | Graphite | `#1d1d1f` | `--color-ink` | Headlines and body copy | | Void | `#000000` | `--color-surface-1` | Surface or divider | | Deep Bone White | `#f5f5f7` | `--color-surface-2` | Surface or divider | | Deep Cobalt | `#0066cc` | `--color-surface-3` | Supporting colour | | Bone White 2 | `#f4f8fb` | `--color-surface-4` | Surface or divider | | Cobalt 2 | `#24568e` | `--color-surface-5` | Supporting colour | ## Typography | Role | Family | Size | Weight | Line height | Tracking | |------|--------|------|--------|-------------|----------| | Heading | SF Pro Display | 56px | 600 | 1.07 | -0.005em | | Subheading | SF Pro Display | 40px | 600 | 1.10 | 0 | | Body | SF Pro Display | 28px | 400 | 1.14 | 0.007em | | Nav | SF Pro Text | 17px | 600 | 1.24 | -0.022em | Font families on the page: SF Pro Text, SF Pro Display. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence. ## Shape - Corner radius, most to least used: 980px, 999px, 50% - Primary button: background `#0071e3`, text `#ffffff`, radius 980px, padding 11px 21px, 17px / 400
