New

## iPhone 17 Pro

All out Pro. Titanium body, A19 Pro chip, and the best camera system on iPhone.

From $1099 or $45.79/mo. for 24 mo.

Learn more › Buy ›
9:41

## MacBook Air

Sky blue. Speed of M4. Impossibly thin, all-day battery.

From $999

Learn more › Buy ›

## Apple Watch

Thinstinct. The thinnest, brightest Apple Watch ever.

Learn more › Buy ›
9:41

## AirPods Pro 3

The world's best in-ear Active Noise Cancellation.

Learn more › Buy ›

## iPad Pro

Unbelievably thin. Incredibly powerful. M5 inside.

Learn more › Buy ›

## Apple Intelligence

AI for the rest of us. Built in, private by design.

Learn more › Watch the film ›
Hello

## One subscription away.

Entertainment, fitness, and storage — services that feel like part of the hardware.

tv+

Original films and series. Only on Apple TV+.

Try it free ›
Music

Over 100 million songs, lossless and live.

Listen now ›
Arcade

200+ games. No ads. No in-app purchases.

Play now ›
iCloud+

Private, secure storage for everything you make.

Upgrade ›
Fitness+

Workouts for every level, on every screen.

Start today ›
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
Canvas White
#FFFFFF
Tile Gray
#F5F5F7
Tile Black
#000000
Hairline
#D2D2D7
Wallpaper
blue → violet
Action Blue — the single accent
Action Blue
#0066CC
Button Blue
#0071E3
Aa
Blue on Dark
#2997FF
Ink
#1D1D1F
Ink Muted
#6E6E73

### 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.

Card
12px
Tile
18px
Device
30–46px
Button
pill
Ring
50%

### 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

Learn more › Buy ›
Learn more › Buy ›
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.
Learn more › Buy ›

### 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.
View source ↗