apple.com

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: apple.com
description: "Light product system built on #ffffff with #0071e3 as the primary CTA accent. Type anchored in SF Pro Display at 56px / weight 600. Extracted automatically from https://apple.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  apple.com is built on a pure-white canvas (rgb(255, 255, 255)).
  The system uses rgb(0, 113, 227) as the high-saturation accent for primary actions.
  Moderately rounded CTAs (11px) — modern SaaS standard, neither sharp nor pill alongside SF Pro Display as the primary typeface.
  SF Pro Display is paired with SF Pro Icons for secondary roles.
  A restrained elevation system (1 distinct shadow) — shadows reserved for the few elements that must lift off the page.
  Motion is a first-class concern — 31 keyframe animations plus transition-driven interactions.

colors:
  background: "#ffffff"
  surface-1: "rgba(255, 255, 255, 0.92)"
  surface-2: "rgba(255, 255, 255, 0.8)"
  ink: "#1d1d1f"
  ink-muted: "rgba(29, 29, 31, 0.65)"
  ink-subtle: "#424245"
  primary: "#0071e3"
  on-primary: "#ffffff"
  primary-hover: "#2997ff"
  hairline: "rgba(255, 255, 255, 0.08)"
  primary-focus: "#0071e3"

typography:
  display-xl:
    fontFamily: "SF Pro Display, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.07
    letterSpacing: -0.28px
  display-md:
    fontFamily: "SF Pro Display, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0
  body:
    fontFamily: "SF Pro Text, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.08px
  body-sm:
    fontFamily: "SF Pro Display, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.17
    letterSpacing: 0.216px
  caption-sm:
    fontFamily: "SF Pro Text, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.08px
  button:
    fontFamily: "SF Pro Text, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1
    letterSpacing: 0

rounded:
  none: 0px
  xs: 5px
  sm: 8px
  md: 11px
  lg: 980px
  xl: 999px

spacing:
  xxs: 2px
  xs: 8px
  sm: 10px
  md: 12px
  lg: 24px
  xl: 28px
  xxl: 63px

components:
  button-dark--solid:
    backgroundColor: "#161617"
    textColor: "{colors.hairline}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 0px 14px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.hairline}"
    typography: "{typography.caption-sm}"
    rounded: "{rounded.none}"
    padding: 0px 8px
  button-ghost-2:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 2px 0px
  card-standard-card:
    backgroundColor: "#000000"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 56px 0px 0px
  tab-ghost-tab:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    padding: 0px 16px
  tab-ghost-tab-2:
    backgroundColor: "transparent"
    textColor: "#0066cc"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 8px

extracted_at: "2026-06-11T04:59:42.320Z"
completeness: 79
scoreVersion: "v2"

---

# Design System — apple.com
> Extracted automatically by Prism from https://apple.com
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: moderate  |  **Motion**: expressive  |  **Weight**: medium  |  **Aesthetic**: soft-rounded

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (SF Pro Text) | "Endless entertainment." |
| Color assertion | dual-accent | #0071e3 |
| Whitespace | moderate | section rhythm 53px |
| Interaction | expressive | 31 keyframes, 23 transitions |
| Radius language | soft-pill | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · soft-pill · expressive-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(255, 255, 255)` is the page background. Every component composits against this.
> - **Accent**: `rgb(0, 113, 227)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 53px between major bands. Card padding: 24px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

apple.com uses a pure-white canvas (`#ffffff`), letting typography, color and imagery carry the visual weight. 

Headlines are set in **SF Pro Display**, a sans-serif display face (the dominant type signature, e.g. "Endless entertainment." at 56px). Body text is set in **SF Pro Text**. Headlines use weight 600 for confident, assertive presence — the brand wants to be heard. Negative letter-spacing at display sizes (-0.374px at 34px) compresses headlines into engineered blocks, dense and precise. 

Body text reads in Near-Black (`#1d1d1f`) — softened from pure black, a small but deliberate detail that lowers reading friction. **M Tricolor Blue** (`#0071e3`) is the single high-saturation color in the system — it earns its presence only on interactive elements, making CTAs and links the unmistakable focal points against the otherwise neutral palette. Elevation comes from a small, deliberate set of shadows (1 distinct), each a multi-layer stack — several blurred layers at varying offsets — used sparingly rather than across the whole UI. 
Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: Pure White (`#ffffff`)
- Primary typeface: Apple Legacy Chevron
- Primary text: Near-Black (`#1d1d1f`)
- Accent: M Tricolor Blue (`#0071e3`)
- Display: 34px weight 600, letter-spacing -0.374px
- Shadow system: 1 distinct elevation levels
- Custom fonts loaded: Apple Legacy Chevron, SF Pro Display, SF Pro Display 100, SF Pro Display 200, SF Pro Display 300, SF Pro Display 500, SF Pro Display 600, SF Pro Display 700, SF Pro Display 800, SF Pro Display 900, SF Pro Text, SF Pro Text 100, SF Pro Text 200, SF Pro Text 300, SF Pro Text 500, SF Pro Text 600, SF Pro Text 700, SF Pro Text 800, SF Pro Text 900

## 2. Color Palette & Roles

### Background & Surface
- **Pure White** (`#ffffff`): Page background (primary)
- **Off-White** (`#f5f5f7`): Surface / elevated background
- **Whitesmoke** (`#e8e8ed`): Surface / elevated background
- **Off-White** (`#f4f8fb`): Surface / elevated background

### Text & Content
- **Near-Black** (`#1d1d1f`): Primary body text
- **Pure Black** (`#000000`): Secondary text
- **Near-Black** (`#161617`): Secondary text
- **Near Black** (`#271810`): Secondary text
- **Near Black** (`#371410`): Secondary text

### Accent & Interactive
- **Ring Blue** (`#2997ff`): Interactive / accent
- **M Tricolor Blue** (`#0071e3`): Interactive / accent
- **M Tricolor Blue** (`#0066cc`): Interactive / accent
- **#a4618d** (`#a4618d`): Interactive / accent
- **Sage** (`#9fc6f4`): Interactive / accent
- **#ea33c0** (`#ea33c0`): Interactive / accent
- **#3397d4** (`#3397d4`): Interactive / accent

### Border & Divider
- **Translucent Silver (64%)** (`rgba(210, 210, 215, 0.64)`): Borders / dividers

### Full Extracted Palette
**21 colors rendered on the page** + **14** more declared in design tokens (CSS custom properties — not necessarily painted). (17 categorized above + 18 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#86868b` — Slate Grey
- `#6e6e73` — Slate Grey
- `#de9444` — #de9444
- `#333336` — Charcoal
- `#fafafc` — Off-White *(token)*
- `#af1e2d` — #af1e2d *(token)*
- `#00d959` — #00d959 *(token)*
- `#fff9f4` — Cream *(token)*
- `#e30000` — Red *(token)*
- `#f5fff6` — Off-White *(token)*
- `#b64400` — #b64400 *(token)*
- `#f56300` — Bright Orange *(token)*
- `#424245` — Charcoal *(token)*
- `#03a10e` — #03a10e *(token)*
- `#008009` — #008009 *(token)*
- `#ffe045` — #ffe045 *(token)*
- `#fff2f4` — Warm Cream *(token)*
- `#fffef2` — Cream *(token)*

### CSS Custom Properties (Design Tokens)

**Spacing Token**
- `--media-gallery-dotnav-gap`: `12px`
- `--media-gallery-bottom-content-padding-right`: `48px`
- `--media-gallery-section-padding-bottom`: `12px`
- `--media-gallery-bottom-content-padding-bottom`: `40px`

**Font Size Token**
- `--sk-footnote-font-size`: `0.6em`
- `--sk-footnote-reduced-font-size`: `.45em`
- `--r-globalnav-font-size`: `17px`

**Motion Token**
- `--media-gallery-slide-duration`: `800ms`
- `--media-gallery-bottom-copy-duration`: `600ms`
- `--r-globalnav-flyout-link-opacity-duration`: `.5s`

**Secondary Color**
- `--r-globalnav-color-secondary`: `#E8E8ED`

**Other tokens**
- `--r-localnav-text-zoom-factor`: `1`
- `--sk-body-text-color`: `rgb(29, 29, 31)`
- `--sk-body-font-stack`: `text`
- `--sk-focus-color`: `#0071e3`
- `--sk-body-link-color`: `rgb(0, 102, 204)`
- `--sk-focus-color-alt`: `rgb(0, 0, 0)`
- `--sk-headline-text-color`: `rgb(29, 29, 31)`
- `--sk-body-background-color`: `rgb(255, 255, 255)`

## 3. Typography Rules

### Font Families
- **Primary**: `SF Pro Text`
- **Secondary**: `Apple Legacy Chevron`
- **Font 3**: `Apple Icons 100`
- **Font 4**: `Apple Icons 200`
- **Font 5**: `Apple Icons 300`

### Custom Fonts Loaded
- **Apple Legacy Chevron** weight 100 (normal)
- **Apple Icons 100** weight normal (normal)
- **Apple Legacy Chevron** weight 200 (normal)
- **Apple Icons 200** weight normal (normal)
- **Apple Legacy Chevron** weight 300 (normal)
- **Apple Icons 300** weight normal (normal)
- **Apple Legacy Chevron** weight 400 (normal)
- **Apple Icons 400** weight normal (normal)
- **Apple Legacy Chevron** weight 500 (normal)
- **Apple Icons 500** weight normal (normal)
- **Apple Legacy Chevron** weight 600 (normal)
- **Apple Icons 600** weight normal (normal)
- **Apple Legacy Chevron** weight 700 (normal)
- **Apple Icons 700** weight normal (normal)
- **Apple Legacy Chevron** weight 800 (normal)
- **Apple Icons 800** weight normal (normal)
- **Apple Legacy Chevron** weight 900 (normal)
- **Apple Icons 900** weight normal (normal)
- **SF Pro Display** weight 100 (normal)
- **SF Pro Display 100** weight normal (normal)
- **SF Pro Display** weight 200 (normal)
- **SF Pro Display 200** weight normal (normal)
- **SF Pro Display** weight 300 (normal)
- **SF Pro Display 300** weight normal (normal)
- **SF Pro Display** weight 400 (italic)
- **SF Pro Display** weight 500 (normal)
- **SF Pro Display 500** weight normal (normal)
- **SF Pro Display** weight 600 (normal)
- **SF Pro Display 600** weight normal (normal)
- **SF Pro Display** weight 700 (normal)
- **SF Pro Display 700** weight normal (normal)
- **SF Pro Display** weight 800 (normal)
- **SF Pro Display 800** weight normal (normal)
- **SF Pro Display** weight 900 (normal)
- **SF Pro Display 900** weight normal (normal)
- **SF Pro Text** weight 100 (normal)
- **SF Pro Text 100** weight normal (normal)
- **SF Pro Text** weight 200 (normal)
- **SF Pro Text 200** weight normal (normal)
- **SF Pro Text** weight 300 (normal)
- **SF Pro Text 300** weight normal (normal)
- **SF Pro Text** weight 400 (italic)
- **SF Pro Text** weight 500 (normal)
- **SF Pro Text 500** weight normal (normal)
- **SF Pro Text** weight 600 (normal)
- **SF Pro Text 600** weight normal (normal)
- **SF Pro Text** weight 700 (normal)
- **SF Pro Text 700** weight normal (normal)
- **SF Pro Text** weight 800 (normal)
- **SF Pro Text 800** weight normal (normal)
- **SF Pro Text** weight 900 (normal)
- **SF Pro Text 900** weight normal (normal)
- **SF Pro Icons** weight 100 (normal)
- **SF Pro Icons 100** weight normal (normal)
- **SF Pro Icons** weight 200 (normal)
- **SF Pro Icons 200** weight normal (normal)
- **SF Pro Icons** weight 300 (normal)
- **SF Pro Icons 300** weight normal (normal)
- **SF Pro Icons** weight 500 (normal)
- **SF Pro Icons 500** weight normal (normal)
- **SF Pro Icons** weight 600 (normal)
- **SF Pro Icons 600** weight normal (normal)
- **SF Pro Icons** weight 700 (normal)
- **SF Pro Icons 700** weight normal (normal)
- **SF Pro Icons** weight 800 (normal)
- **SF Pro Icons 800** weight normal (normal)
- **SF Pro Icons** weight 900 (normal)
- **SF Pro Icons 900** weight normal (normal)
- **SF Pro Icons** weight 400 (normal)
- **Apple Legacy Icons** weight 100 (normal)
- **Apple Legacy Icons** weight 200 (normal)
- **Apple Legacy Icons** weight 300 (normal)
- **Apple Legacy Icons** weight 400 (normal)
- **Apple Legacy Icons** weight 500 (normal)
- **Apple Legacy Icons** weight 600 (normal)
- **Apple Legacy Icons** weight 700 (normal)
- **Apple Legacy Icons** weight 800 (normal)
- **Apple Legacy Icons** weight 900 (normal)
- **Apple Legacy Icons 100** weight normal (normal)
- **Apple Legacy Icons 200** weight normal (normal)
- **Apple Legacy Icons 300** weight normal (normal)
- **Apple Legacy Icons 400** weight normal (normal)
- **Apple Legacy Icons 500** weight normal (normal)
- **Apple Legacy Icons 600** weight normal (normal)
- **Apple Legacy Icons 700** weight normal (normal)
- **Apple Legacy Icons 800** weight normal (normal)
- **Apple Legacy Icons 900** weight normal (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | SF Pro Display | 56px | 600 | 1.07 | -0.28px | Main headline (h2) |
| Sub-heading | SF Pro Display | 40px | 600 | 1.1 | normal | Third-level heading (h3) |
| Link Large | SF Pro Display | 24px | 600 | 1.17 | 0.216px | Link (24px) — Decoration: none |
| Button Large | SF Pro Text | 18px | 300 | 1 | normal | Button label (18px) |
| Card Title | SF Pro Text | 17px | 400 | 1.47 | -0.374px | Card headings |
| Link Large | SF Pro Text | 17px | 600 | 1.24 | -0.374px | Link (17px) — Decoration: none |
| Button | SF Pro Text | 14px | 400 | 1.29 | -0.224px | Button label (14px) |
| Button Small | SF Pro Text | 12px | 400 | 1 | -0.12px | Button label (12px) |
| Link Small | SF Pro Text | 12px | 600 | 1.33 | -0.12px | Link (12px) — Decoration: none |
| Tiny / Micro | SF Pro Text | 10px | 400 | 1.3 | -0.08px | small text (10px) |

### Full Font Size Scale

Sizes detected in the design (descending): `56px`, `44px`, `40px`, `34px`, `28px`, `25.50px`, `24px`, `21px`, `19px`, `18px`, `17px`, `14px`, `13.33px`, `12px`, `10px`

> 7 size(s) detected outside the sampled hierarchy (44px, 34px, 28px, 25.5px, 21px, 19px, 13.3333px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

### OpenType & Variable Font Features

The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback:

- **case-sensitive forms** (`case`) — punctuation height adjusted for uppercase contexts

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "case", "numr";
}
```

## 4. Component Stylings

### Buttons

**Dark / Solid**
- Background: `#161617`
- Text: `rgba(255, 255, 255, 0.92)` `{colors.hairline}`
- Padding: 0px 14px
- Radius: 11px
- Border: 3px solid rgba(255, 255, 255, 0.08)
- Font: 17px weight 400
- Use: Solid dark CTA
- Hover: backgroundColor: `#ffffff`
- Focus: outline: `rgb(0, 113, 227) solid 2px`

**Ghost**
- Background: `transparent`
- Text: `rgba(255, 255, 255, 0.8)` `{colors.hairline}`
- Padding: 0px 8px
- Radius: 0px
- Font: 12px weight 400
- Use: Subtle action, toolbar, nav button
- Hover: backgroundColor: `#ffffff`
- Focus: outline: `rgb(0, 113, 227) solid 2px`

**Ghost**
- Background: `transparent`
- Text: `#1d1d1f` `{colors.ink-muted}`
- Padding: 2px 0px
- Radius: 0px
- Font: 17px weight 400
- Use: Subtle action, toolbar, nav button
- Hover: backgroundColor: `#ffffff`
- Focus: outline: `rgb(0, 113, 227) solid 2px`

**Pill**
- Background: `#0071e3` `{colors.primary-focus}`
- Text: `#ffffff` `{colors.hairline}`
- Padding: 11px 21px
- Radius: 980px
- Border: 1px solid rgba(0, 0, 0, 0)
- Font: 17px weight 400
- Use: Status pills, tags, chips
- Hover: backgroundColor: `#ffffff`
- Focus: outline: `rgb(0, 113, 227) solid 2px`

**Pill**
- Background: `transparent`
- Text: `#2997ff` `{colors.primary-hover}`
- Padding: 11px 21px
- Radius: 980px
- Border: 1px solid rgb(41, 151, 255)
- Font: 17px weight 400
- Use: Status pills, tags, chips
- Hover: backgroundColor: `#ffffff`
- Focus: outline: `rgb(0, 113, 227) solid 2px`

### Cards & Containers

**Standard Card**
- Background: `#000000`
- Padding: 56px 0px 0px
- Radius: 0px
- Use: Content containers, listing items

### Tabs

**Ghost Tab**
- Background: `transparent`
- Text: `#1d1d1f` `{colors.ink-muted}`
- Padding: 0px 16px
- Radius: 999px
- Font: 17px weight 400
- Use: Navigation tabs, filter tabs

**Ghost Tab**
- Background: `transparent`
- Text: `#0066cc`
- Padding: 8px
- Radius: 0px
- Font: 17px weight 400
- Use: Navigation tabs, filter tabs


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Button**:
  - **hover:** bg #f5f5f7 → #ffffff
- **Link**:
  - **hover:** text rgba(255, 255, 255, 0.8) → rgba(255, 255, 255, 0.804), border changes

*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgb(245, 245, 247)"
      fg: "rgb(0, 0, 0)"
      border: "1px solid rgba(0, 0, 0, 0)"
    hover:
      bg: "rgb(255, 255, 255)"
      fg: "inherit"
    focus:
      bg: "transparent"
      fg: "inherit"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgba(255, 255, 255, 0.8)"
    hover:
      bg: "transparent"
      fg: "rgba(255, 255, 255, 0.804)"
  card:
    default:
      bg: "rgb(0, 0, 0)"
      fg: "rgb(29, 29, 31)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgba(255, 255, 255, 0.8)"
  tab:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 102, 204)"
  badge:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgba(0, 0, 0, 0.72)"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **3 shape(s)** in this system: `Dark / Solid`, `Ghost`, `Pill`
- **DO NOT introduce new buttons variants** without justification

### Cards & Containers
- **1 shape(s)** in this system: `Standard Card`
- **DO NOT introduce new cards & containers variants** without justification

### Tabs
- **1 shape(s)** in this system: `Ghost Tab`
- **DO NOT introduce new tabs variants** without justification

## 5. Layout Principles

### Layout Type
**hero + sections**

### Grid
Single column, centered content

### Max Width
2560px

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 8px |
| sm | 10px |
| md | 12px |
| base | 17px |
| lg | 24px |
| xl | 28px |
| 2xl | 53px |
| 3xl | 63px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 5px | Tiny corners (badges, micro elements) |
| Sm | 8px | Buttons, inputs, small elements |
| Md | 11px | Cards, containers |
| Lg | 980px | Large rounded elements, pill segments |
| Xl | 999px | Category strips, featured containers |
| Full | 999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `11px` |
| Cards & Containers | `0px` |
| Tabs | `999px` |
| Page Body | `0px` |
| Navigation | `0px` |

**Shape Personality**: Sharp + Pill Contrast — Angular precision with pill-shaped accents (status badges, tags). Creates strong visual hierarchy.

**Full Radius Spectrum**: 0px, 5px, 8px, 11px, 980px, 999px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~57px internal vertical padding (up to 60px) — **standard**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `63px` | Top/bottom of full-bleed hero sections |
| **section** | `28px` | Between major bands (color change, content shift) |
| **subsection** | `24px` | Within a section, between content groups |
| **card** | `12px` | Card padding, list-item spacing |
| **compact** | `10px` | Form fields, tight clusters, badge padding |
| **micro** | `8px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**4/8 structural patterns detected.**

### Hero Pattern

- **Composition:** centered — Centered composition — heading + subheading + CTAs stacked vertically, content centered horizontally. Common for SaaS marketing pages.
- **Viewport coverage:** 573px tall (not full-viewport)
- **Heading:** "Father’s Day" — 56px center-aligned
- **Subheading:** "June 21 is coming up. Find the perfect gift."
- **CTAs:** 1 (primary: "Shop")
- **Clone instruction:** Reproduce the **centered** layout. Use the heading font-size token at the documented size. Pair the centered text with the hero’s decorative visual (gradient / SVG / hero image — see §9b), not bare text.

### Navigation Pattern

- **Position:** fixed (stays visible during scroll)
- **Layout:** logo-left-links-left — Logo and links both on the left (CTAs typically right)
- **Height:** 44px
- **Logo:** ✓ present
- **Nav links:** 13 primary items
- **CTAs in nav:** 0 (no buttons — links only)
- **Search:** ✓ search input visible in nav
- **Clone instruction:** Build a fixed logo left links left navigation. Link-only — no button styling needed.

### Card Grid Pattern

- **Card count:** 3 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1440×728px (aspect 1.98:1)
- **Gap:** 12px between cards
- **Content:** ✓ image + CTA
- **Image position:** top
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~1.98:1 aspect ratio. Each card has an image at the top.

### Footer Pattern

- **Columns:** 5
- **Links:** 75 total
- **Height:** 1626px
- **Includes:** ✗ no newsletter | ✗ no social |  ✓ copyright
- **Clone instruction:** Build a 5-column footer with ~15 links per column, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` | Cards, elevated surfaces |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Dominant Easing Curves

| Curve | Semantic Name |
|-------|---------------|
| `cubic-bezier(0.4,0,0.6,1)` | Custom Ease — Balanced |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--media-gallery-slide-duration` | `800ms` | Cinematic |
| `--media-gallery-bottom-copy-duration` | `600ms` | Slow |
| `--r-globalnav-flyout-link-opacity-duration` | `.5s` | Slow |

### Copy-Paste Transition Snippets

**Background**
```css
transition: background-color 0.24s cubic-bezier(0.4, 0, 0.6, 1);
```

**Background**
```css
transition: background-color 0.24s cubic-bezier(0.4, 0, 0.6, 1), border-color 0.24s cubic-bezier(0.4, 0, 0.6, 1);
```

**Color / Background**
```css
transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
```

**Background**
```css
transition: background 0.24s cubic-bezier(0.4, 0, 0.6, 1);
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `globalnav-chevron-slide-in-hover` | Fade + Move | opacity, transform | Panel / drawer enter |
| `globalnav-chevron-hover-off` | Fade + Move | opacity, transform | UI transition |
| `globalnav-flyout-slide-forward-next` | Fade + Move | opacity, transform | UI transition |
| `globalnav-flyout-slide-forward-previous` | Fade + Move | opacity, transform | UI transition |
| `globalnav-flyout-slide-back-previous` | Fade + Move | opacity, transform | UI transition |
| `globalnav-flyout-slide-back-next` | Fade + Move | opacity, transform | UI transition |
| `globalnav-scrim-height-change` | Custom | height | UI transition |
| `globalnav-fade-in` | Fade | opacity | Element entrance |
| `globalnav-search-fade` | Fade + Move | opacity, transform | UI transition |
| `globalnav-search-fade-and-slide` | Fade + Move | opacity, transform | UI transition |
| `globalnav-search-fade-and-slide-to-close` | Fade + Move | opacity, transform | UI transition |
| `globalnav-search-slide-top-to-bottom` | Slide | transform | UI transition |
| `globalnav-search-slide-bottom-to-top` | Slide | transform | UI transition |
| `globalnav-search-input-intro` | Fade + Move | opacity, transform | UI transition |
| `globalnav-search-input-outro` | Fade + Move | opacity, transform | UI transition |
| `segment-out` | Custom | top | UI transition |
| `progress-indicator-animating` | Fade | opacity | UI transition |
| `dotnav-shift-start-1` | Custom | translate | UI transition |
| `dotnav-shift-end-1` | Custom | translate | UI transition |
| `dotnav-shift-start-expand` | Custom | translate | UI transition |

> *7 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.*

### Motion Fingerprint

- **Speed Character**: Balanced Pacing (median duration: `180ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 27 unique animations (31 total including variants)

> This design moves with balanced pacing timing using custom cubic-bezier curves, creating a UI that feels natural and fluid.

## 8. Do's and Don'ts

### Do
- Use Near-Black (`#1d1d1f`) for text — not pure black, it's warmer and more readable
- Use SF Pro Text as the primary typeface — it defines the brand personality
- Keep font weights between 400-600 — the system uses a narrow weight range for subtle hierarchy
- Use negative letter-spacing (-0.374px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
- Use M Tricolor Blue (`#0071e3`) as the primary accent — it's the brand's signature interactive color
- Use 980px border-radius on primary buttons — the brand uses generously-rounded CTAs
- Keep navigation fixed to the top — the design uses a persistent navigation pattern
- Maintain nav height at 44px — consistent vertical space for the navigation bar
- Transition button background to Pure White (`#ffffff`) on hover — this is the extracted interactive state
- Use a single primary CTA in the hero — the design intentionally avoids choice paralysis
- Make the navigation fixed — it stays visible during scroll, signaling content depth
- Include a search input directly in the nav — discoverability is a primary UX value here
- Each card includes a top image — imagery is part of the card identity, not optional
- Build a content-dense footer (5 columns, ~75 links) — this site treats the footer as a sitemap, not an afterthought

### Don't
- Don't use pure black (`#000000`) for text — the near-black adds warmth
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't use weight 700 (bold) or above — 600 is the maximum weight in this system
- Don't increase letter-spacing on headings — the type is designed to run tight at scale
- Don't invent new shadow values — use only the extracted shadow levels
- Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't use sharp-cornered or pill buttons — 980px is the CTA border-radius standard
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't use opacity or brightness filter for button hover — the design uses an explicit background color change
- Don't put a CTA button in the nav — this design uses links only at the top


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(255, 255, 255)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(255, 255, 255)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(0, 113, 227)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(0, 113, 227)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 480px | Single column, compact spacing |
| Mobile Large | 640px | Expanded mobile layout |
| Mobile Large | 734px | Expanded mobile layout |
| Tablet | 776px | Multi-column grids begin |
| Tablet | 1023px | Multi-column grids begin |
| Large Desktop | 1440px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| nav | height | `44px` | `48px` |
| hero | height | `2208px` | `1574px` |
| button | width | `349px` | `252.016px` |
| main | padding | `114px 0px 0px` | `183px 0px 0px` |
| sidebar | width | `1440px` | `390px` |

### Collapsing Strategy
- Container padding: 114px 0px 0px → 183px 0px 0px on mobile
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 0px 14px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Hero CTAs:** 1 on desktop → 50 on mobile.
- **Navigation collapses to hamburger** — 13 links visible on desktop, 2 on mobile (the rest hide behind a menu toggle).
- **Footer columns collapse:** 5 columns (desktop) → 2 columns (mobile).


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Animated SVG** — path/line-draw animations.
- **Glassmorphism** — 2 frosted/blur layer(s) (e.g. `saturate(1.8) blur(20px)`).
- **Clip-path shapes** — 8 non-rectangular cut(s).
- **CSS-variable animations** (5) — animated custom properties.

> **Motion fingerprint**: SVG animations, glassmorphism (2 layers), non-rectangular shapes (10)

## 9b. Visual Tone & Photography

**Tone:** Photography-driven

The site is dominated by photography (JPG/WebP). Photos carry the brand voice as much as the typography. Use authentic, brand-appropriate imagery — generic stock will degrade quality.

**Canonical Brand Image (OG):**
- https://www.apple.com/ac/structured-data/images/open_graph_logo.png?202604211141
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 4.35:1 (ultra-wide cinematic)
- Rendered size: 3008×692px
- Alt text: "Dot, squiggle, spiral, and star shapes in different hues of blue, green, and purple burst and spread across from behind "
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 21 (78%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 3 (11%)
- Ultra-wide (>2.3): 3 (11%)

**Media Format Mix:**
- JPG: 26 (typically photographic content)
- PNG: 1 (logos, transparent UI elements, mockups)

**Average rendered image size:** 942×434px
**Above-fold image count:** 1 / 27

**Decorative Patterns Detected:**
- 8 radial gradients — circular color blooms used for spotlight/glow effects
- **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic

**Clone instruction for decorative work:** This is a gradient-rich design — invest in multi-stop CSS gradients (3+ color stops), not solid backgrounds.

**Imagery Guidance for clones:**
- Source authentic photography (or licensed stock that matches the brand mood) — placeholders will visibly degrade the clone.
- Match the dominant aspect ratio (see above) so card grids and hero compositions hold.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Pure White (`#ffffff`)
- Primary text: Near-Black (`#1d1d1f`)
- Accent: M Tricolor Blue (`#0071e3`)
- Border: Translucent Pure White (8%) (`rgba(255, 255, 255, 0.08)`)
- Font: SF Pro Text
- Body: 17px weight 400

### Example Component Prompts
- "Create a hero section on Pure White background (#ffffff). Headline at 34px SF Pro Text weight 600, line-height 1.47, letter-spacing -0.374px, color #1d1d1f."
- "Create the primary CTA button: `#0071e3` background, `#ffffff` text, 980px border-radius, 11px 21px padding, 600 weight, SF Pro Text font."
- "Build navigation: fixed on `#ffffff`. SF Pro Text 17px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Pure White (`#ffffff`) — every component is composited against this exact base.
2. **Typography**: All type in SF Pro Text, weight range 400–600. Never exceed 600 — heavier weights break the brand's tonal restraint.
3. **Accent**: M Tricolor Blue (`#0071e3`) is the sole interactive color. On hover → Ring Blue (`#2997ff`). Use CSS transitions, not opacity/brightness filters.
4. **Focus**: Render focus rings in M Tricolor Blue (`#0071e3`) — never hide focus outlines. The ring color is distinct from the accent to avoid ambiguity.
5. **Motion**: All transitions use `cubic-bezier(0.4,0,0.6,1)`. Timing: 500ms for micro-interactions, 600ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
6. **Shape**: CTAs at `11px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
7. **Spacing**: Use the `--ca-space-*` token scale (8px–28px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
8. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-hairline: #ffffff;
  --ca-ink-muted: #1d1d1f;
  --ca-ink-subtle: #424245;
  --ca-primary-focus: #0071e3;
  --ca-primary-hover: #2997ff;
}

/* Typography */
:root {
  --ca-font-primary: "SF Pro Display", system-ui, sans-serif;
  --ca-text-display: 56px;
  --ca-text-body: 10px;
  --ca-text-small: 24px;
  --ca-text-button: 18px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 8px;
  --ca-space-sm: 10px;
  --ca-space-md: 12px;
  --ca-space-base: 17px;
  --ca-space-lg: 24px;
  --ca-space-xl: 28px;
  --ca-space-2xl: 53px;
  --ca-space-3xl: 63px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 5px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 11px;
  --ca-radius-lg: 980px;
  --ca-radius-xl: 999px;
  --ca-radius-full: 999px;
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: hero
    tag: main
    classes: ["main"]
    height: 5067px
    width: full-bleed
    layout: block
    children: 3
    vertical-padding: ~57px (generous)
    padding: "114px 0px 0px"
  - section: testimonials
    tag: section
    classes: ["section", "section-hero"]
    height: 2208px
    width: full-bleed
    layout: grid: 1-col gap=12px
    children: 3
    vertical-padding: ~60px (generous)
  - section: testimonials
    tag: div
    classes: ["tile-wrapper", "theme-dark"]
    height: 800px
    width: full-bleed
    layout: flex-column justify=center
    children: 3
    bg: "rgb(0, 0, 0)"
    vertical-padding: ~28px
    padding: "56px 0px 0px"
  - section: feature-section
    tag: div
    classes: ["tile-copy-wrapper"]
    height: 159px
    width: 680px
    layout: block
    children: 3
  - section: navigation
    tag: div
    classes: ["globalnav-searchresults-container"]
    height: 160px
    width: 980px
    layout: block
    children: 2
  - section: unknown
    tag: div
    classes: ["tile-image-wrapper"]
    height: 491px
    width: full-bleed
    layout: block
    children: 2
  - section: unknown
    tag: div
    classes: ["inline-media-wrapper", "loaded", "ended"]
    height: 487px
    width: full-bleed
    layout: block
    children: 2
  - section: feature-section
    tag: div
    classes: ["tile-wrapper"]
    height: 692px
    width: full-bleed
    layout: flex-row justify=center
    children: 3
    bg: "rgb(245, 245, 247)"
    vertical-padding: ~60px (generous)
    padding: "56px 0px 63px"
  - section: unknown
    tag: div
    classes: ["tile-image-wrapper"]
    height: 692px
    width: full-bleed
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["tile-copy-wrapper"]
    height: 98px
    width: 498px
    layout: block
    children: 2
  - section: feature-section
    tag: div
    classes: ["tile-wrapper"]
    height: 692px
    width: full-bleed
    layout: flex-row justify=center
    children: 3
    bg: "rgb(245, 245, 247)"
    vertical-padding: ~60px (generous)
    padding: "56px 0px 63px"
  - section: unknown
    tag: div
    classes: ["tile-image-wrapper"]
    height: 692px
    width: full-bleed
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["tile-copy-wrapper"]
    height: 98px
    width: 417px
    layout: block
    children: 2
  - section: pricing
    tag: section
    classes: ["section", "section-promo"]
    height: 1764px
    width: full-bleed
    layout: grid: 2-col gap=12px
    children: 6
    vertical-padding: ~57px (generous)
    padding: "0px 12px"
  - section: unknown
    tag: div
    classes: ["tile-wrapper"]
    height: 580px
    width: 702px
    layout: flex-row justify=center
    children: 3
    bg: "rgb(245, 245, 247)"
    vertical-padding: ~57px (generous)
    padding: "53px 0px 60px"
  - section: unknown
    tag: div
    classes: ["tile-image-wrapper"]
    height: 580px
    width: 702px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["tile-wrapper", "theme-dark"]
    height: 580px
    width: 702px
    layout: flex-row justify=center
    children: 3
    bg: "rgb(0, 0, 0)"
    vertical-padding: ~57px (generous)
    padding: "53px 0px 60px"
  - section: unknown
    tag: div
    classes: ["tile-image-wrapper"]
    height: 580px
    width: 702px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["tile-wrapper"]
    height: 580px
    width: 702px
    layout: flex-row justify=center
    children: 3
    bg: "rgb(245, 245, 247)"
    vertical-padding: ~57px (generous)
    padding: "53px 0px 60px"
  - section: unknown
    tag: div
    classes: ["tile-image-wrapper"]
    height: 580px
    width: 702px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["tile-wrapper"]
    height: 580px
    width: 702px
    layout: flex-row justify=center
    children: 3
    bg: "rgb(245, 245, 247)"
    vertical-padding: ~57px (generous)
    padding: "53px 0px 60px"
  - section: unknown
    tag: div
    classes: ["tile-image-wrapper"]
    height: 580px
    width: 702px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["tile-wrapper"]
    height: 580px
    width: 702px
    layout: flex-row justify=center
    children: 3
    bg: "rgb(245, 245, 247)"
    vertical-padding: ~57px (generous)
    padding: "53px 0px 60px"
  - section: unknown
    tag: div
    classes: ["tile-image-wrapper"]
    height: 580px
    width: 702px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["tile-wrapper"]
    height: 580px
    width: 702px
    layout: flex-row justify=center
    children: 3
    bg: "rgb(245, 245, 247)"
    vertical-padding: ~57px (generous)
    padding: "53px 0px 60px"
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "WWDC 26"
    - "Father’s Day"
    - "Endless entertainment."
  sub-headings:
    - "iPhone"
    - "Child Safety"
    - "iPad Air"
    - "Shop and Learn"
  ctas:
    - "France"
    - "Continuer"
    - "Explore the previews"
    - "Watch the keynote"
    - "Learn more"
  navigation:
    - "Apple"
    - "Store"
    - "Mac"
    - "iPad"
    - "iPhone"
    - "Watch"
    - "Vision"
    - "AirPods"
    - "TV & Home"
    - "Entertainment"
  footer-links:
    - "Apple"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  logo:
    count: 3
    avg-ratio: 2.78
    common-aspect: "~16:6 banner"
  hero:
    count: 8
    avg-ratio: 2.72
    common-aspect: "~16:6 banner"
    sample-alts:
      - "Dot, squiggle, spiral, and star shapes in different hues of "
      - "Mac and iPad, screens showing college coursework across vari"
      - "iPhone 17 Pro, back exterior, deep blue color, Pro Fusion ca"
  product:
    count: 3
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  France
</button>
```
_Source pattern detected: padding `0px 14px` · radius `11px` · weight `400`_

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `56px 0px 0px` · radius `0px` · shadow `none`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 18 · **pricing** 6 · **other** 36

**Projects / case studies detected** (clustered by URL + featured image):

*Us* — medium confidence, 12 items:

| Title | Featured image | Link |
|---|---|---|
| Store | — | https://www.apple.com/us/shop/goto/store |
| Accessories | — | https://www.apple.com/us/shop/goto/buy_accessories |
| Search | — | https://www.apple.com/us/search |
| 0 + | — | https://www.apple.com/us/shop/goto/bag |
| Stream now ThrillerFear takes hold. | `1960x1044sr.jpg` (ar 1.88) | https://tv.apple.com/us/show/cape-fear/umc.cmc.377zdzwefgtzkvykexeca9qrc?l=en-US?itscg=10000&itsct=atv-apl_hp-stream_now--220622 |
| Stream now ThrillerA soccer mom falls down a | `1960x1044sr.jpg` (ar 1.88) | https://tv.apple.com/us/show/maximum-pleasure-guaranteed/umc.cmc.10k6tes7rmc2ti0ho1ozgwezc?l=en-US?itscg=10000&itsct=atv-apl_hp-stream_now--220622 |
| F1 on Apple TV Every Grand Prix™, live and o | `1960x1044sr.jpg` (ar 1.88) | https://tv.apple.com/us/room/formula-1/uts.room.formula-1?itscg=10000&itsct=atv-apl_hp-stream_now--220622 |
| Stream now ComedyEveryone’s got a side hustl | `1960x1044sr.jpg` (ar 1.88) | https://tv.apple.com/us/show/margos-got-money-troubles/umc.cmc.6wgw0u6vuwydp6obbzzccup3w?l=en-US?itscg=10000&itsct=atv-apl_hp-stream_now--220622 |

**Signals:** 32/60 links carry a featured image · device mockups detected: tablet ×3, phone ×2, laptop ×9 · dominant link roles: inline-link (24), navigation (18), content-card (18).


---
## Extraction Completeness: 79/100 (B)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 24 | 25 | 17 named colors |
| Typography | 20 | 20 | 10 roles defined |
| Components | 12 | 20 | 3 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 6 | 10 | 121 vars |
| Responsive Breakpoints | 5 | 5 | 6 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (Apple Icons 100, Apple Icons 200, Apple Icons 300)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 121 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 10 typography roles inferred |
| §4 Components | Medium | 3 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 27 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 6 breakpoints detected |
| §9b Photography | High | 27 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

9 font file(s) captured (1368KB total). When running `prism add`, fonts are saved to `extractions/apple.com/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'Apple Legacy Chevron';
  /* src: url('/fonts/Apple-Legacy-Chevron.woff2') format('woff'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Icons 100';
  /* src: url('/fonts/Apple-Icons-100.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Chevron';
  /* src: url('/fonts/Apple-Legacy-Chevron.woff2') format('woff'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Icons 200';
  /* src: url('/fonts/Apple-Icons-200.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Chevron';
  /* src: url('/fonts/Apple-Legacy-Chevron.woff2') format('woff'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Icons 300';
  /* src: url('/fonts/Apple-Icons-300.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Chevron';
  /* src: url('/fonts/Apple-Legacy-Chevron.woff2') format('woff'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Icons 400';
  /* src: url('/fonts/Apple-Icons-400.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Chevron';
  /* src: url('/fonts/Apple-Legacy-Chevron.woff2') format('woff'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Icons 500';
  /* src: url('/fonts/Apple-Icons-500.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Chevron';
  /* src: url('/fonts/Apple-Legacy-Chevron.woff2') format('woff'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Icons 600';
  /* src: url('/fonts/Apple-Icons-600.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Chevron';
  /* src: url('/fonts/Apple-Legacy-Chevron.woff2') format('woff'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Icons 700';
  /* src: url('/fonts/Apple-Icons-700.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Chevron';
  /* src: url('/fonts/Apple-Legacy-Chevron.woff2') format('woff'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Icons 800';
  /* src: url('/fonts/Apple-Icons-800.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Chevron';
  /* src: url('/fonts/Apple-Legacy-Chevron.woff2') format('woff'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Icons 900';
  /* src: url('/fonts/Apple-Icons-900.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons';
  /* src: url('/fonts/Apple-Legacy-Icons.woff2') format('woff'); */
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons 100';
  /* src: url('/fonts/Apple-Legacy-Icons-100.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons';
  /* src: url('/fonts/Apple-Legacy-Icons.woff2') format('woff'); */
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons 200';
  /* src: url('/fonts/Apple-Legacy-Icons-200.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons';
  /* src: url('/fonts/Apple-Legacy-Icons.woff2') format('woff'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons 300';
  /* src: url('/fonts/Apple-Legacy-Icons-300.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons';
  /* src: url('/fonts/Apple-Legacy-Icons.woff2') format('woff'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons 400';
  /* src: url('/fonts/Apple-Legacy-Icons-400.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons';
  /* src: url('/fonts/Apple-Legacy-Icons.woff2') format('woff'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons 500';
  /* src: url('/fonts/Apple-Legacy-Icons-500.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons';
  /* src: url('/fonts/Apple-Legacy-Icons.woff2') format('woff'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons 600';
  /* src: url('/fonts/Apple-Legacy-Icons-600.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons';
  /* src: url('/fonts/Apple-Legacy-Icons.woff2') format('woff'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons 700';
  /* src: url('/fonts/Apple-Legacy-Icons-700.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons';
  /* src: url('/fonts/Apple-Legacy-Icons.woff2') format('woff'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons 800';
  /* src: url('/fonts/Apple-Legacy-Icons-800.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons';
  /* src: url('/fonts/Apple-Legacy-Icons.woff2') format('woff'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Apple Legacy Icons 900';
  /* src: url('/fonts/Apple-Legacy-Icons-900.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

**31 @keyframes found** — these are the real animation definitions:

```
@keyframes inline-media-spin { ... }
@keyframes dotnav-shift-start-1 { ... }
@keyframes dotnav-shift-end-1 { ... }
@keyframes dotnav-shift-start-2 { ... }
@keyframes dotnav-shift-end-2 { ... }
@keyframes dotnav-shift-start-3 { ... }
@keyframes dotnav-shift-end-3 { ... }
@keyframes dotnav-shift-start-expand { ... }
@keyframes dotnav-shift-end-expand { ... }
@keyframes dotnav-become-visible { ... }
@keyframes dotnav-become-invisible { ... }
@keyframes dotnav-timed-animation { ... }
@keyframes dotnav-timed-dot-expand { ... }
@keyframes dotnav-timed-dot-shrink { ... }
@keyframes globalnav-chevron-slide-in-hover { ... }
@keyframes globalnav-chevron-hover-off { ... }
@keyframes globalnav-flyout-slide-forward-next { ... }
@keyframes globalnav-flyout-slide-forward-previous { ... }
@keyframes globalnav-flyout-slide-back-previous { ... }
@keyframes globalnav-flyout-slide-back-next { ... }
@keyframes globalnav-scrim-height-change { ... }
@keyframes globalnav-fade-in { ... }
@keyframes globalnav-search-fade { ... }
@keyframes globalnav-search-fade-and-slide { ... }
@keyframes globalnav-search-fade-and-slide-to-close { ... }
@keyframes globalnav-search-slide-top-to-bottom { ... }
@keyframes globalnav-search-slide-bottom-to-top { ... }
@keyframes globalnav-search-input-intro { ... }
@keyframes globalnav-search-input-outro { ... }
@keyframes segment-out { ... }
@keyframes progress-indicator-animating { ... }
```

<details><summary>Full keyframes CSS (31 animations)</summary>

```css
@keyframes inline-media-spin{0%{transform:rotate(0)}
@keyframes dotnav-shift-start-1{0%{translate:calc(8px*var(--sk-dotnav-logical-factor))}100%{translate:0px}}
@keyframes dotnav-shift-end-1{0%{translate:calc(-8px*var(--sk-dotnav-logical-factor))}100%{translate:0px}}
@keyframes dotnav-shift-start-2{0%{translate:calc(16px*var(--sk-dotnav-logical-factor))}100%{translate:0px}}
@keyframes dotnav-shift-end-2{0%{translate:calc(-16px*var(--sk-dotnav-logical-factor))}100%{translate:0px}}
@keyframes dotnav-shift-start-3{0%{translate:calc(24px*var(--sk-dotnav-logical-factor))}100%{translate:0px}}
@keyframes dotnav-shift-end-3{0%{translate:calc(-24px*var(--sk-dotnav-logical-factor))}100%{translate:0px}}
@keyframes dotnav-shift-start-expand{0%{translate:calc(-24px*var(--sk-dotnav-logical-factor))}19%{translate:calc(-24px*var(--sk-dotnav-logical-factor))}100%{translate:0}}
@keyframes dotnav-shift-end-expand{0%{translate:calc(20px*var(--sk-dotnav-logical-factor))}19%{translate:calc(20px*var(--sk-dotnav-logical-factor))}100%{translate:0}}
@keyframes dotnav-become-visible{0%{opacity:0;scale:0}100%{opacity:1;scale:1}}
@keyframes dotnav-become-invisible{0%{opacity:1}100%{opacity:0}}
@keyframes dotnav-timed-animation{0%{width:var(--sk-dotnav-size)}100%{width:calc(100% - var(--sk-dotnav-margin-inline)*2)}}
@keyframes dotnav-timed-dot-expand{0%{left:calc(50% - var(--sk-dotnav-size)/2);width:8px}100%{left:calc(50% - 16px);width:32px}}
@keyframes dotnav-timed-dot-shrink{0%{left:calc(50% - 16px);width:32px}100%{left:calc(50% - var(--sk-dotnav-size)/2);width:8px}}
@keyframes globalnav-chevron-slide-in-hover{0%{opacity:0;transform:translate(-4px)}
@keyframes globalnav-chevron-hover-off{0%{opacity:1;transform:scale(1)}
@keyframes globalnav-flyout-slide-forward-next{0%{opacity:0;transform:translate(8px)}
@keyframes globalnav-flyout-slide-forward-previous{0%{opacity:1;transform:translate(0)}
@keyframes globalnav-flyout-slide-back-previous{0%{opacity:1;transform:translate(0)}
@keyframes globalnav-flyout-slide-back-next{0%{opacity:0;transform:translate(-8px)}
@keyframes globalnav-scrim-height-change{0%{height:var(--r-globalnav-previous-flyout-height)}
@keyframes globalnav-fade-in{0%{opacity:0}
@keyframes globalnav-search-fade{0%{opacity:0;transform:translateY(0)}
@keyframes globalnav-search-fade-and-slide{0%{opacity:0;transform:translateY(calc(var(--r-globalnav-search-shift-vertical) * -1))}
@keyframes globalnav-search-fade-and-slide-to-close{0%{opacity:0;transform:translateY(calc(var(--r-globalnav-search-shift-vertical) * -1))}
@keyframes globalnav-search-slide-top-to-bottom{0%{transform:translateY(calc(var(--r-globalnav-suggested-links-height) * -1))}
@keyframes globalnav-search-slide-bottom-to-top{0%{transform:translateY(var(--r-globalnav-suggested-links-height))}
@keyframes globalnav-search-input-intro{0%{opacity:0;transform:translateY(var(--r-globalnav-search-input-vertical-shift))}
@keyframes globalnav-search-input-outro{0%{opacity:1;transform:translateY(0)}
@keyframes segment-out{0%{top:0px}
@keyframes progress-indicator-animating{0%{opacity:1}12.5%{opacity:.9}25%{opacity:.7}37.5%{opacity:.6}50%{opacity:.4}62.5%{opacity:.3}75%{opacity:.2}87.5%{opacity:.13}}
```
</details>

### Brand Gradient Palette

**1 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: radial-gradient(100% 33% at left bottom, rgba(0, 0, 0, 0.5);

```

### Hover State CSS (Intercepted)

**8 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
[data-component-list~=InlineMedia] .inline-media-wrapper.loading .play-pause-button:hover:after,[data-component-list~=InlineMedia] .inline-media-wrapper.loading .play-pause-button:active:after{background-color:transparent}

[data-component-list~=InlineMedia] .inline-media-ui.theme-dark .play-pause-button:hover{background-color:#49494cb9}

[data-component-list~=InlineMedia] .inline-media-ui.theme-dark .play-pause-button:hover:after{background-color:#fff}

[data-component-list~=InlineMedia] .play-pause-button:hover{background-color:#dfdfe3b2}

[data-component-list~=InlineMedia] .play-pause-button:hover:after{background-color:#000000a3}

.button:hover{background:var(--sk-button-background-hover, var(--sk-button-background));color:var(--sk-button-color-hover, var(--sk-button-color));text-decoration:none;border-color:transparent}

.tile-link:hover{text-decoration:none}
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 2154 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**17 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`419px` · `480px` · `640px` · `641px` · `734px` · `735px` · `736px` · `776px` · `833px` · `834px` · `1023px` · `1044px` · `1068px` · `1069px` … (+3 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `12px`×918 · `17px`×791 · `24px`×214 · `14px`×61 · `21px`×59 · `40px`×45 · `44px`×22 · `25.5px`×13

**Radius scale** (× = paint count): `980px`×62 · `999px`×37 · `8px`×10 · `5px`×5 · `13px`×4 · `11px`×1 · `50%`×1

**Weights** (× = paint count): `400`×1385 · `600`×735 · `700`×24 · `300`×9

**Layout gaps** (× = paint count): `normal 14px`×3 · `normal 0px`×3 · `12px`×2 · `normal 17px`×2 · `11px 17px`×1

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.22) 3px 5px 30px 0px
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { font-size:17px; font-weight:400; font-family:SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif }
body { background-color:var(--sk-body-background-color, rgb(255, 255, 255)); color:var(--sk-body-text-color, rgb(29, 29, 31)) }
body { font-size:17px; font-weight:400; font-family:"SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; background-color:var(--sk-body-background-color, rgb(255, 255, 255)); color:var(--sk-body-text-color, rgb(29, 29, 31)) }
nav { font-size:17px }
@media (min-width: 834px) nav { background:var(--globalnav-background) }
h2 { font-size:12px; font-weight:400; font-family:SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif }
h2 { color:var(--r-globalnav-submenu-header-color) }
button { font-family:"SF Pro Text","Myriad Set Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","SF Pro Icons","Apple Legacy Icons","Helvetica Neue","Helvetica","Arial",sans-serif }
button { font-size:18px; font-weight:300; color:rgba(0,0,0,.8); transition:color 320ms cubic-bezier(0.4, 0, 0.6, 1) }
button { color:rgba(255,255,255,.8) }
a { color:var(--sk-body-link-color, rgb(0, 102, 204)) }
a { font-size:14px; font-weight:400; font-family:"SF Pro Text", "Myriad Set Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Icons", "Apple Legacy Icons", "Helvetica Neue", Helvetica, Arial, sans-serif; color:var(--sk-button-color) }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://apple.com | 2026-06-11T04:59:42.353Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*