Apple

Overview

Apple's web presence is a masterclass in reverent product photography framed by near-invisible UI. Every page is a stack of edge-to-edge product "tiles" — alternating light and dark canvases, each centered on a hero headline, a one-line tagline, two tiny blue pill CTAs, and an impossibly crisp product render. Nothing competes with the product. Typography is confident but quiet; color is either pure white, an off-white parchment, or a near-black tile; interactive elements are a single, quiet blue.

Density is unusually low even by contemporary SaaS standards. Each tile occupies roughly one viewport, and there is no decorative chrome — no borders, no gradients, no decorative frames, no shadows on headlines. Elevation appears only when a product image rests on a surface (a single soft rgba(0, 0, 0, 0.22) 3px 5px 30px drop for visual weight). The result is a catalog that feels more like a museum gallery: the wall disappears and the artifact takes over.

Store and shop surfaces retain the same chassis but switch modes. The product configurator (iPhone 17 Pro, accessories grid) introduces a tight grid of white utility cards at {rounded.lg} (18px) radius with a thin border, paired with a persistent thin sub-nav strip. The environment page leans darker and more editorial. Across all five surfaces the typographic system, spacing rhythm, and the single blue accent are consistent — this is one design language expressed at different volumes.

Key Characteristics: - Photography-first presentation; UI recedes so the product can speak. - Alternating full-bleed tile sections: white/parchment ↔ near-black, with the color change itself acting as the section divider. - Single blue accent ({colors.primary} — #0066cc) carries every interactive element. No second brand color exists. - Two button grammars: tiny blue pill CTAs ({rounded.pill}) and compact utility rects ({rounded.sm}). - SF Pro Display + SF Pro Text — negative letter-spacing at display sizes for the signature "Apple tight" headline feel. - Whisper-soft elevation used only when a product image needs to breathe — exactly one drop-shadow in the entire system. - Tight two-row nav: slim {component.global-nav} + product-specific {component.sub-nav-frosted} with persistent right-aligned primary CTA. - Section rhythm across multiple pages: light hero → dark product tile → light utility tile → dark tile → parchment footer — a predictable pulse.

Colors

Source pages analyzed: homepage, environment, store, iPhone 17 Pro buy page, accessories index. The color system is identical across all five surfaces; only the surface-mode mix differs.

Brand & Accent

• Action Blue ({colors.primary} — #0066cc): The single brand-level interactive color. All text links, all blue pill CTAs ("Learn more", "Buy"), and the focus ring root. This is Apple's quiet but universal "click me" signal. Press state shifts to a slightly darker variant via the active scale transform rather than a hex change.
• Focus Blue ({colors.primary-focus} — #0071e3): A marginally brighter sibling of Action Blue, reserved for the keyboard focus ring on buttons (outline: 2px solid).
• Sky Link Blue ({colors.primary-on-dark} — #2997ff): A brighter blue used on dark surfaces for in-copy links and inline callouts, where Action Blue would disappear against the tile background.

Surface

• Pure White ({colors.canvas} — #ffffff): The dominant canvas. Content, utility cards, store tiles, configurator grids.
• Parchment ({colors.canvas-parchment} — #f5f5f7): The signature Apple off-white. Used for alternating light tiles, footer region, and the default page canvas in store utility sections. Just different enough from white to create rhythm.
• Pearl Button ({colors.surface-pearl} — #fafafc): A near-white used as the fill for secondary "ghost" buttons — lighter than the parchment canvas so the button still reads as a button against {colors.canvas-parchment}.
• Near-Black Tile 1 ({colors.surface-tile-1} — #272729): The primary dark-tile surface on the homepage product grid.
• Near-Black Tile 2 ({colors.surface-tile-2} — #2a2a2c): A micro-step lighter — used where a dark tile sits directly above or below Tile 1 to create the faintest separation.
• Near-Black Tile 3 ({colors.surface-tile-3} — #252527): A micro-step darker — used at the bottom of the stack and in embedded video/player frames.
• Pure Black ({colors.surface-black} — #000000): Reserved for true void — video player backgrounds, edge-to-edge photographic overlays, the global nav bar background.
• Translucent Chip Gray ({colors.surface-chip-translucent} — #d2d2d7): The base hex of the translucent gray chip used over photography for circular control buttons. In production, applied at ~64% alpha as rgba(210, 210, 215, 0.64).

Text

• Near-Black Ink ({colors.ink} — #1d1d1f): The voice of every headline, every body paragraph, and the dark utilit