Apple

version alpha

name Apple

description A photography-first interface that turns marketing into a museum gallery. Edge-to-edge product tiles alternate light and dark canvases, framed by SF Pro Display headlines with negative letter-spacing and a single Action Blue (#0066cc) interactive color. UI chrome recedes so the product can speak — no decorative gradients, no shadows on chrome, only the one signature drop-shadow under product imagery resting on a surface.

colors primary: "#0066cc" primary-focus: "#0071e3" primary-on-dark: "#2997ff" ink: "#1d1d1f" body: "#1d1d1f" body-on-dark: "#ffffff" body-muted: "#cccccc" ink-muted-80: "#333333" ink-muted-48: "#7a7a7a" divider-soft: "#f0f0f0" hairline: "#e0e0e0" canvas: "#ffffff" canvas-parchment: "#f5f5f7" surface-pearl: "#fafafc" surface-tile-1: "#272729" surface-tile-2: "#2a2a2c" surface-tile-3: "#252527" surface-black: "#000000" surface-chip-translucent: "#d2d2d7" on-primary: "#ffffff" on-dark: "#ffffff"

typography hero-display: fontFamily: "SF Pro Display, system-ui, -apple-system, sans-serif" fontSize: 56px fontWeight: 600 lineHeight: 1.07 letterSpacing: -0.28px display-lg: fontFamily: "SF Pro Display, system-ui, -apple-system, sans-serif" fontSize: 40px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0 display-md: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 34px fontWeight: 600 lineHeight: 1.47 letterSpacing: -0.374px lead: fontFamily: "SF Pro Display, system-ui, -apple-system, sans-serif" fontSize: 28px fontWeight: 400 lineHeight: 1.14 letterSpacing: 0.196px lead-airy: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 24px fontWeight: 300 lineHeight: 1.5 letterSpacing: 0 tagline: fontFamily: "SF Pro Display, system-ui, -apple-system, sans-serif" fontSize: 21px fontWeight: 600 lineHeight: 1.19 letterSpacing: 0.231px body-strong: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 17px fontWeight: 600 lineHeight: 1.24 letterSpacing: -0.374px body: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 17px fontWeight: 400 lineHeight: 1.47 letterSpacing: -0.374px dense-link: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 17px fontWeight: 400 lineHeight: 2.41 letterSpacing: 0 caption: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: -0.224px caption-strong: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1.29 letterSpacing: -0.224px button-large: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 300 lineHeight: 1.0 letterSpacing: 0 button-utility: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.29 letterSpacing: -0.224px fine-print: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.12px micro-legal: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 1.3 letterSpacing: -0.08px nav-link: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.12px

rounded none: 0px xs: 5px sm: 8px md: 11px lg: 18px pill: 9999px full: 9999px

spacing xxs: 4px xs: 8px sm: 12px md: 17px lg: 24px xl: 32px xxl: 48px section: 80px

components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 11px 22px button-primary-focus: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" button-primary-active: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" button-secondary-pill: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 11px 22px button-dark-utility: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.button-utility}" rounded: "{rounded.sm}" padding: 8px 15px button-pearl-capsule: backgroundColor: "{colors.surface-pearl}" textColor: "{colors.ink-muted-80}" typography: "{typography.caption}" rounded: "{rounded.md}" padding: 8px 14px button-store-hero: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-large}" rounded: "{rounded.pill}" padding: 14px 28px button-icon-circular: backgroundColor: "{colors.surface-chip-translucent}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 44px text-link: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.body}" text-link-on-dark: backgroundColor: transparent textColor: "{colors.primary-on-dark}" typography: "{typography.body}" global-nav: backgroundColor: "{colors.surface-black}" textColor: "{colors.on-dark}" typography: "{typography.nav-link}" height: 44px sub-nav-frosted: backgroundColor: "{colors.canvas-parchment}" textColor: "{colors.ink}" typography: "{typography.tagline}" height: 52px product-tile-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" rounded: "{rounded.none}" padding: 80px product-tile-parchment: backgroundColor: "{colors.canvas-parchment}" textColor: "{colors.ink}" typography: "{typography.display-lg}" rounded: "{rounded.none}" padding: 80px product-tile-dark: backgroundColor: "{colors.surface-tile-1}" textColor: "{colors.on-dark}" typography: "{typography.display-lg}" rounded: "{rounded.none}" padding: 80px product-tile-dark-2: backgroundColor: "{colors.surface-tile-2}" textColor: "{colors.on-dark}" rounded: "{rounded.none}" product-tile-dark-3: backgroundColor: "{colors.surface-tile-3}" textColor: "{colors.on-dark}" rounded: "{rounded.none}" store-utility-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.lg}" padding: 24px configurator-option-chip: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 12px 16px configurator-option-chip-selected: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.pill}" search-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 12px 20px height: 44px floating-sticky-bar: backgroundColor: "{colors.canvas-parchment}" textColor: "{colors.ink}" typography: "{typography.body}" height: 64px padding: 12px 32px environment-quote-card: backgroundColor: "{colors.surface-tile-1}" textColor: "{colors.on-dark}" typography: "{typography.display-lg}" rounded: "{rounded.none}" padding: 80px footer: backgroundColor: "{colors.canvas-parchment}" textColor: "{colors.ink-muted-80}" typography: "{typography.fine-print}" padding: 64px

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 utility button's fill. Chosen instead of pure black to keep the page f