Design teardown
Apple
A full-bleed product homepage of black and pale gray panels, centered photography, and very short centered lines. Actions are pill-shaped, blue or outlined, under a frosted 44px bar.
apple.com
Design character
Full-bleed product stage
The page is a vertical stack of edge-to-edge product panels, then a two-column grid, then a horizontal poster row. Copy is centered and extremely short: a large name, one supporting line, sometimes a quieter availability note, then two actions. The tone is spare and declarative. Legal text at the bottom is the only long writing, set small and gray. Motion is limited to a frosted bar, a blurred search sheet, and a sliding poster row.
Typography
Two families share the page. SF Pro Display carries headlines and the search field. SF Pro Text carries the bar, buttons, captions, and footer. Display type is semibold with tight leading; interface type is regular, with a slightly negative tracking on body and bar text.
Color system
The stage is white, panels alternate near-black and pale gray, and type is near-black or near-white. A single blue is used for filled actions, text links, and outlines. Depth comes from photography and blur, not from tinted shadows.
Spacing and geometry
An 8px step shows up in bar padding, small pills, and the 8px service-tile radius. Product panels are separated by about 12px, with 16px vertical padding on the top notice.
Layout
The page is fluid to the viewport. Full-width panels come first, then a two-up grid, then a horizontal poster gallery, then a multi-column footer. Product copy is centered; lists and legal text are left-aligned.
Motion
The page itself does not animate on scroll. Motion is reserved for the bar, menus, search, and the poster row.
UI fingerprint
- Pill actions Every action is a fully rounded pill, filled blue or drawn as a blue outline, never a rectangle.
- Frosted bar A 44px bar stays fixed, translucent #f5f5f7, blurred 20px, with 12px regular links.
- Twelve-pixel gutters Square panels sit on white with about a 12px gap, so the grid reads as separate photographs.
- Two families, one blue Display type for titles, text type for interface, and #0071e3 as the only action color.