Design System Reference
The tile is the brand.
Apple's web identity is not a color scheme — it is an information architecture. Edge-to-edge product tiles, a centered headline stack, one pair of blue links, and silence everywhere else. The structure does the talking; the accent color only ever says "act here."
View source ↗
Color
Three surfaces, one accent. White and light gray alternate to give the tile matrix its rhythm; pure black appears at most twice for contrast, never a middle gray. Action Blue is the only chromatic voice — on dark tiles it brightens to stay legible, but it never gains a sibling.
Surfaces
Action Blue — the single accent
Typography
Inter stands in for SF Pro: weight 600 maximum, negative tracking that tightens as size grows. Headlines are large but never bold-shouty — hierarchy comes from size and whitespace, not weight. Everything in a tile is centered; everything in reference sections is left-aligned.
| Role | Sample | Size / Tracking | Weight | Usage |
|---|
| Hero headline | iPhone 17 Pro | 56px / −0.028em | 600 | Hero tile title |
| Tile headline | MacBook Air | 44px / −0.028em | 600 | Tile titles |
| Tagline | All out Pro. | 21–25px / −0.015em | 400 | One line under title |
| Text link | Learn more › | 17px / −0.022em | 400 | The signature pair |
| Body | Designed in California. | 17px / −0.022em | 400 | Running copy |
| Fine print | From $1099 or $45.79/mo. | 12–14px / 0 | 400 | Pricing, legal |
Radius
Continuous, generous curves — tiles at 18px, device silhouettes much rounder, buttons always pill. Nothing sharp, nothing fussy.
Components
A deliberately tiny kit: the paired text links carry almost every action on the page; the blue pill appears only in the sub-nav and checkout moments. There are no outlined buttons, no ghost buttons, no icon zoos.
The Link Pair
Always a pair. Always blue. Always a chevron.
Buttons
Buy
Shop iPhone
One style, two sizes. Filled blue pill — nothing else exists.
Tile Anatomy
Product
One sentence. No more.
Voice & Tone
Apple copy is a headline discipline: fragments over sentences, product names as subjects, wordplay earned by restraint everywhere else.
Fragments
"All out Pro." "Thinstinct."
Two or three words that sound inevitable. Verbs optional, periods mandatory.
Product as Hero
"iPhone 17 Pro" — never "our new phone."
The product name leads every tile. The company stays out of the sentence.
Numbers, Quietly
"From $999" in fine print, never in the headline.
Specs whisper. Feelings shout. Price is a footnote to desire.