Design System
Analysis of Apple

A monochrome canvas, a single systemBlue, and the 980px pill button — Apple's design system reduced to its tokens and rebuilt as a living style guide.

01 — Foundations

Colour Palette

02 — Foundations

Typography

SF Pro is Apple's proprietary typeface; shown here in Inter, the nearest Google substitute. Hierarchy is built from size and tight tracking, not weight — a 17px body anchors a ladder that climbs to a 56px display.

03 — Components

Button Variants

button-primary
Solid systemBlue #0071e3 pill. The page's only filled colour — reserved for the single most important action per band.
button-dark
Near-black #1d1d1f with an 8px radius. Used for utility actions like the region "Continue" button.
button-secondary
Outlined blue pill — transparent fill, #0066cc text and border. Apple's standard secondary, always paired beside the filled one.
badge-pill
Sunken grey chip on #e8e8ed for filters and segmented controls.
link · inline
Learn more ›Tech specs ›
Chevron links in #0066cc — the "go deeper" signal under every product story.
04 — Components

Cards & Surfaces

Tiles sit on the grey band with an 18px radius and no shadow at rest, lifting gently on hover. Photography carries the colour; the card stays neutral.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

A 4/8-based rhythm, from 4px hairline gaps to 48px band padding.

07 — Foundations

Border Radius

Two ideas: a tight 5–18px set for panels and tiles, and the signature 980px pill for every CTA.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default. Apple is almost entirely flat — separation comes from the grey band, not a shadow.
Level 1 — a soft 0 4px 16px lift on tile and gallery hover.
Level 2 — the only heavy shadow, 3px 5px 30px at 22%, for Quick Look popovers and modals.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle column; tile rows stack; headlines step down (56→40px); nav collapses behind a menu toggle.
Tablet768–1023pxTwo-up tile grids; container gains side padding; hero type eases down.
Laptop1024–1279pxFull nav bar; 3–4-up product grids; centred ~980px text measure.
Desktop≥ 1280pxImagery bleeds to full width while text stays centred and capped; type at full display scale.

The colour and type rules never change across breakpoints — only column count and headline size flex. That invariance is the whole point of the system.

Pricing Tiers

Apple has no subscription table, but its "Which is right for you?" model chooser uses this exact three-up card pattern. Shown here with the iPhone lineup and Apple's monthly-financing framing.

iPhone 16e
$24/mo.
The essentials, A18 fast.
  • 6.1″ display
  • A18 chip
  • 48MP Fusion camera
  • Up to 26 hrs video
iPhone 16 Pro● Most popular
$41/mo.
The most advanced iPhone, in titanium.
  • 6.3″ ProMotion display
  • A18 Pro chip
  • Pro camera system
  • Titanium design
  • Camera Control
iPhone 16 Pro Max
$49/mo.
The biggest display, the longest battery.
  • 6.9″ ProMotion display
  • A18 Pro chip
  • 5x Telephoto
  • Largest battery ever

Data Table

The grid pattern Apple uses for order history and compare tables — a quiet grey header, hairline rows, and a pill status.

OrderProductDeliveryStatusWhen
W1289340MacBook Air 15″ M5Free deliveryShippedJun 27
W1289221iPhone 16 Pro · TitaniumPickup — Apple Fifth AveReadyJun 26
W1288907AirPods Pro 3Free deliveryProcessingJun 25
W1288654Apple Watch Series 10Free deliveryPreparingJun 24
W1288310iPad Air 13″ M3Free deliveryDeliveredJun 22
1–5 of 412
‹123›

Auth Forms

The Apple Account sign-in pattern — minimal fields, a blue pill submit, and a hairline divider down to the passkey option.

Sign in

Sign in to Apple Account

OR
Create account

Create your Apple Account

OR