The reference minimal consumer brand: a page built entirely from full-bleed tiles alternating white and #f5f5f7, each centered on one rhythm — SF Pro Display 600 headline, a large light 28px sub-headline, then a filled-blue and outlined-blue pill pair — over enormous product photography, with near-invisible 12px nav chrome and exactly one blue accent that shifts value by context.
Browse Apple in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: apple.com (live DOM, computed styles), 2026-07-18 (desktop 1512px). Coverage: home / marketing tiles. No logged-in surface captured (app n/a — site only for marketing purposes; store account not captured). Responsive: breakpoints from tokens only; mobile rendering not verified.
The reference minimal consumer brand: near-white canvas, near-black #1d1d1f ink, and a page built entirely from full-bleed product tiles that alternate white and light-gray #f5f5f7, separated by thin white gutters. Each tile is centered and follows the same rhythm — product name in SF Pro Display at 600, a one-line sub-headline at a light 400, then a pair of blue pill CTAs, over enormous product photography that is the actual content. Chrome is deliberately almost invisible: a thin translucent global nav in 12px type. Colour is reserved for the blue action pills and whatever the photography brings. The discipline is in the typographic hierarchy and the whitespace, not decoration. Feels: precise, premium, calm, product-first.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | Page and tile background |
| gray-tile | #f5f5f7 | Alternating tile background, footer |
| gray-tile-2 | #fafafc | Subtle inset surface |
| black | #000000 | Dark product tiles |
| Token | Hex | Role / usage |
|---|---|---|
| ink | #1d1d1f | Headlines, primary text |
| gray | #6e6e73 | Secondary text, captions, legal |
| dark-gray | #333336 | Nav/menu text |
| white | #ffffff | Text on dark tiles |
| Token | Hex | Role / usage |
|---|---|---|
| blue-cta | #0071e3 | Filled pill button |
| blue-link | #0066cc | Inline links on light |
| blue-on-dark | #2997ff | Links/CTAs on dark tiles |
| Token | Hex | Role / usage |
|---|---|---|
| border | #d2d2d6 | Control/hairline borders |
| border-2 | #e8e8ed | Subtle dividers |
Rule: the palette is white / #f5f5f7 / #1d1d1f plus exactly one blue, which changes value by context (#0071e3 filled, #0066cc on light, #2997ff on dark). All other colour comes from photography.
"SF Pro Display", -apple-system, "Helvetica Neue", Helvetica, sans-serif — tile headlines."SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, sans-serif.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Tile headline (large) | 56 / 60 | 600 | tight negative |
| Tile headline (small) | 40 / 44 | 600 | normal |
| Sub-headline | 28 / 32 | 400 | +0.196px |
| Body | 17 / 25 | 400 | normal |
| Nav link | 12 / 16 | 400 | -0.12px |
| Caption / legal | 12 / 16 | 400 | -0.12px, #6e6e73 |
Patterns: hierarchy comes from a big weight jump — headline at 600, everything under it at 400. Sub-headlines are large (28px) and light, which is the signature contrast. Nav type is deliberately tiny (12px).
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.