Apple Design System

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.

...

Key Characteristics:

• Photography-first presentation; UI recedes so the product can speak.
• ...

> 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).
• ...

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.
• ...

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 feeling photographic rather than printed.
• Body ({colors.body} — #1d1d1f): Same hex as ink — Apple uses one near-black tone for all text on light surfaces.
• ...

Hairlines & Borders

• Divider Soft ({colors.divider-soft} — #f0f0f0): The "border" tone on secondary buttons — functions as a ring shadow rather than a hard line. In production, often applied as rgba(0, 0, 0, 0.04).
• Hairline ({colors.hairline} — #e0e0e0): The 1px hairline border on store utility cards and configurator chips.

Brand Gradient

Font Family

• Display: SF Pro Display, system-ui, -apple-system, sans-serif — Apple's proprietary display face, optimized for sizes ≥ 19px. Defines the voice of every headline.
• Body / UI: SF Pro Text, system-ui, -apple-system, sans-serif — the text-optimized variant used for body copy, captions, buttons, and links below 20px.
• ...

Hierarchy

Principles

• Negative letter-spacing at display sizes. Every headline at 17px and up carries a slight tracking tighten (-0.12 → -0.374px). This produces the iconic "Apple tight" headline cadence. Never used at 12px or below.
• Body copy at 17px, not 16px. Apple breaks the SaaS convention and runs paragraph text at 17px. The extra pixel gives the page an unmistakable "reading, not scanning" pace.
• ...

Note on Font Substitutes

• Use system-ui, -apple-system, BlinkMacSystemFont as the first stack entry — on macOS/iOS/Safari this resolves to the real SF Pro.
• For non-Apple platforms, Inter (Google Fonts, variable) is the closest open-source equivalent. Inter at weight 600 with font-feature-settings: "ss03" approximates SF Pro's rounded "a" character.
• ...

Spacing System

• Base unit: 8px. Sub-base values (2, 4, 5, 6, 7) are used for tight typographic adjustments; structural layout snaps to 8/12/16/20/24.
• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 17px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 80px.
• ...

Grid & Container

• Max content width: ~980px on text-heavy sections (environment), ~1440px on product grids (store, accessories), full-bleed for product tiles (homepage).
• Column patterns: 3 to 5 column utility card grid on store/accessories; 2-column side-by-side tiles on homepage occasional sections; single-column centered stack on product tile heroes.
• ...

Whitespace Philosophy

Decorative Depth

• Atmospheric imagery on the environment page (photographic vista) supplies mood; no CSS gradient involved.
• Edge-to-edge tile alternation creates rhythm without borders or shadows — the color change itself is the divider.
• ...

Border Radius Scale

Photography Geometry

• Hero imagery: full-bleed, 21:9 or taller on the homepage; 16:9 on environment and shop pages. Product renders are photographic-realistic, often shot on a tinted surface that becomes the tile background.
• Product renders: PNG/WebP with transparency; rest on a surface tile and pick up the system shadow.
• ...

Top Navigation

global-nav — Persistent, ultra-thin black nav bar pinned to the top of every page. Background {colors.surface-black}, height 44px, text {colors.on-dark} in {typography.nav-link} (12px / 400 / -0.12px tracking). Links are quiet, spaced ~20px apart, running edge-to-edge across the top. Right-aligned cluster: Search, Bag icons — always visible. On mobile, collapses to hamburger at ~834px and the Apple logo centers.

sub-nav-frosted — Surface-specific nav that sticks below the global nav. Background {colors.canvas-parchment} at 80% opacity with backdrop-filter blur, creating a frosted-glass effect. Height 52px. Content on left: product category name ("iPhone", "Store", "Accessories") in {typography.tagline} (21px / 600). Content right: inline nav links in {typography.button-utility} (14px), ending in a persistent {component.button-primary} ("Buy") or a utility link.

Buttons

button-primary — The signature Apple action. Background {colors.primary} (Action Blue #0066cc), text {colors.on-primary} in {typography.body} (SF Pro Text 17px / 400), rounded {rounded.pill} (full pill — capsule-shaped), padding 11px × 22px. The full-pill radius IS the brand action signal.

• Active state: {component.button-primary-active} — transform: scale(0.95) (the system-wide micro-interaction).
• ...

button-dark-utility — Global nav actions (Sign In, Bag, language selector). Background {colors.ink} (#1d1d1f), text {colors.on-dark} in {typography.button-utility} (14px / 400 / -0.224px tracking), rounded {rounded.sm} (8px), padding 8px × 15px. Active state shrinks via transform: scale(0.95).

button-pearl-capsule — Product-card secondary button. Background {colors.surface-pearl} (#fafafc), text {colors.ink-muted-80} in {typography.caption} (14px), 3px solid {colors.divider-soft} border (functions as a soft ring rather than a visible line), rounded {rounded.md} (11px), padding 8px × 14px.

button-store-hero — A larger primary CTA used on store hero surfaces. Same Action Blue + Paper White as {component.button-primary}, but with {typography.button-large} (18px / 300 — note the rare weight 300) and slightly more padding (14px × 28px). Used sparingly on the store landing.

button-icon-circular — Floats over photography. 44 × 44px, background {colors.surface-chip-translucent} at ~64% alpha, icon in {colors.ink}, rounded {rounded.full}. Used for carousel controls, close buttons, and in-image controls (product image thumbnails on the iPhone buy page).

text-link — Inline body links in {colors.primary} (Action Blue). Underlined or non-underlined per context.

text-link-on-dark — Inline body links on dark tiles in {colors.primary-on-dark} (Sky Link Blue #2997ff) — Action Blue would disappear against {colors.surface-tile-1}.

Cards & Containers

product-tile-light — Full-bleed light tile. Background {colors.canvas} (white), text {colors.ink}, rounded {rounded.none} (0 — tiles touch edges), vertical padding {spacing.section} (80px). Centered stack: product name in {typography.display-lg} (40px / 600) → one-line tagline in {typography.lead} (28px / 400) → two {component.button-primary} CTAs ("Learn more" / "Buy") → product render resting on the surface with the system shadow.

product-tile-parchment — Same as {component.product-tile-light} but on {colors.canvas-parchment} (#f5f5f7). Used to break two consecutive white tiles.

product-tile-dark — Full-bleed dark tile. Background {colors.surface-tile-1} (#272729), text {colors.on-dark}, rounded {rounded.none}, vertical padding {spacing.section} (80px). Same content stack as the light tile but with {component.text-link-on-dark} for inline copy and {component.button-primary} (Action Blue still works on the dark surface). Used on the homepage product grid as the alternating dark band.

product-tile-dark-2 — Variant on {colors.surface-tile-2} (#2a2a2c). Used where a dark tile sits directly above or below {component.product-tile-dark} to create the faintest separation through micro-step lightness change.

product-tile-dark-3 — Variant on {colors.surface-tile-3} (#252527). Used at the bottom of the stack and in embedded video/player frames.

store-utility-card — Used in store grid and accessories grid. Background {colors.canvas} (white), 1px solid {colors.hairline} border, rounded {rounded.lg} (18px), padding {spacing.lg} (24px). Top: product image (1:1 crop with {rounded.sm} (8px) inner image radius). Below: product name in {typography.body-strong} (17px / 600), price in {typography.body} (17px / 400), and a {component.text-link} ("Buy" or "Learn more"). No shadow by default; product render itself carries the system product-shadow.

configurator-option-chip — Pill-shaped tappable cell used in the iPhone 17 Pro buy page. Background {colors.canvas}, text {colors.ink} in {typography.caption}, rounded {rounded.pill}, padding 12px × 16px. Contains a small product thumbnail + label + price delta. Arranged in a grid of 4–5 options per row.

configurator-option-chip-selected — Selected state. Border upgrades to 2px solid {colors.primary-focus}. Same shape, same content.

environment-quote-card — A photographic-canvas hero specific to the environment page. Dark photographic backdrop (mountain vista at dawn) with {colors.surface-tile-1} as the fallback color, centered white-text headline in {typography.display-lg} (40px), small green "Apple 2030" pictographic logo above the headline, single {component.button-primary} below. Padding {spacing.section} (80px).

floating-sticky-bar — Floats at the bottom of the viewport on the iPhone 17 Pro buy page during scroll. Background {colors.canvas-parchment} at 80% opacity with backdrop-filter: blur(N), height 64px, padding 12px × 32px. Left: running price total in {typography.body}. Right: {component.button-primary} ("Add to Bag").

Inputs & Forms

search-input — The accessories search input. Background {colors.canvas}, text {colors.ink} in {typography.body} (17px), 1px solid rgba(0, 0, 0, 0.08) border, rounded {rounded.pill} (full pill — search is also pill-shaped, matching the CTA grammar), padding 12px × 20px, height 44px. Leading icon: search glyph at 14px, muted tint.

Error and validation states were not surfaced in the analyzed pages.

Footer

footer — Background {colors.canvas-parchment} (#f5f5f7), text {colors.ink-muted-80}. Link columns in {typography.dense-link} (17px / 400 / 2.41 line-height — the relaxed leading is what makes the dense columns scannable). Column headings in {typography.caption-strong} (14px / 600). Legal row at the very bottom in {typography.fine-print} (12px / 400) with {colors.ink-muted-48} text. Vertical padding 64px.

Do

• Use {colors.primary} (Action Blue #0066cc) for every interactive element — links, pill CTAs, focus signals — and nothing else. The single accent is non-negotiable.
• Set headlines in {typography.hero-display} or {typography.display-lg} with negative letter-spacing (-0.28 → -0.374px) to get the signature "Apple tight" cadence.
• Run body copy at {typography.body} (17px / 400 / 1.47 / -0.374px) — not 16px. The extra pixel defines the brand's reading pace.
• Alternate {component.product-tile-light} (or parchment) and {component.product-tile-dark} for full-bleed section rhythm. The color change IS the divider.
• Reserve {rounded.pill} for the primary blue CTA and any other element that should read as an "action" (configurator chips, search input, sticky bar CTA).
• Apply the single product-shadow (rgba(0, 0, 0, 0.22) 3px 5px 30px) only to product renders resting on a surface — never on cards, buttons, or text.
• Use transform: scale(0.95) as the active/press state on every button — it's the system-wide micro-interaction.
• Keep the global nav {colors.surface-black} (true black) — it's the only place pure black appears on most pages.

Don't

• Don't introduce a second accent color; every "click me" signal is {colors.primary} (Action Blue).
• Don't add shadows to cards, buttons, or text — shadow is reserved for product imagery.
• Don't use gradients as decorative backgrounds; atmosphere comes from photography.
• Don't set body copy at weight 500 — Apple's ladder is 300 / 400 / 600 / 700, with 500 deliberately absent. Body is always 400; strong inline is 600; display is 600.
• Don't round full-bleed tiles — tiles are rectangular and edge-to-edge; the color change is the divider.
• Don't tighten line-height below 1.47 for body copy — the editorial leading is part of the brand.
• Don't mix radii grammars — use {rounded.sm} for compact utility, {rounded.lg} for utility cards, {rounded.pill} for pills, and nothing in between (except the rare {rounded.md} Pearl Button).
• Don't use {colors.primary-on-dark} (Sky Link Blue) on light surfaces — it's the dark-tile-only variant. Action Blue is for light surfaces.

Breakpoints

Touch Targets

• Minimum 44 × 44px. {component.button-primary} lands at ~44 × 100px (with the full-pill radius making the visible hit area more generous than the label suggests).
• {component.button-icon-circular} is exactly 44 × 44px.
• ...

Collapsing Strategy

• Global nav: full horizontal link row on desktop → collapses to Apple logo + hamburger + bag icon at 834px and below.
• Sub-nav: category name + inline links + primary CTA → category name + primary CTA only at mobile; inline links move into a hamburger tray.
• ...

Image Behavior

• All product imagery uses responsive srcset with breakpoint-matched crops.
• Hero photography may switch art direction at mobile (e.g., the environment page's vista crops to a taller aspect ratio on mobile, framing the subject differently).
• ...

1. Focus on ONE component at a time. Reference its YAML key directly ({component.product-tile-dark}, {component.search-input}). 2. Variants of an existing component (-active, -focus, -2, -3) live as separate entries in components:.

• ...

The parsed design tokens extracted from the core stylesheet of this design system: