Apple iPhone

# Apple iPhone — Style Reference
> Apple iPhone sets oversized SF Pro Display headlines in a heavy weight with tight tracking 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 28px, with 50% and 20px on smaller elements.

**Theme:** light · **Source:** https://www.apple.com/iphone/ (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 |
| Deep Cobalt | `#0066cc` | `--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 |
| Bone White 2 | `#fafafc` | `--color-surface-3` | Surface or divider |
| Soft Graphite | `#333336` | `--color-surface-4` | Supporting colour |
| Ember | `#b64400` | `--color-surface-5` | Supporting colour |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | SF Pro Display | 80px | 600 | 1.05 | -0.015em |
| Heading | SF Pro Display | 56px | 600 | 1.07 | -0.005em |
| Subheading | SF Pro Text | 20px | 600 | 1.47 | -0.019em |
| Body | SF Pro Text | 14px | 400 | 1.43 | -0.016em |
| 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: 28px, 50%, 20px, 980px, 36px
- Primary button: background `#0071e3`, text `#ffffff`, radius 980px, padding 11px 21px, 17px / 400