Untitled Design System

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

• Section vertical padding: {spacing.section} (80px) inside a product tile; tiles stack edge-to-edge with 0 gap (the color change provides the break).

• Card padding: {spacing.lg} (24px) inside utility grid cards.

• Button padding: 8–11px vertical, 15–22px horizontal.

• Universal rhythm constants: the 17px body line-height multiplier (~25px line) and 21px tagline size show up on every analyzed page.

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

• Gutters: 20–24px between cards in a utility grid.

### Whitespace Philosophy

Apple's whitespace is the product's pedestal. Every tile begins with at least 64px of air above its headline and 48–64px below. Product renders are never crowded; the nearest content to a product image is at least 40px away. The footer is the only area that breaks this — there, Apple goes deliberately dense to make the full information architecture visible at a glance.

### Border Radius Scale

| Token | Value | Use |

|---|---|---|

| {rounded.none} | 0px | Full-bleed product tiles (no corner rounding) |

| {rounded.xs} | 5px | Inline links when styled as subtle chips (rare) |

| {rounded.sm} | 8px | Dark utility buttons (Sign In, Bag), inline card imagery |

| {rounded.md} | 11px | White Pearl Button capsules |

| {rounded.lg} | 18px | Store utility cards, accessories grid cards |

| {rounded.pill} | 9999px | Primary blue pill CTAs, sub-nav buy button, configurator option chips, search input — the signature Apple pill |

| {rounded.full} | 9999px / 50% | Circular control chips floating over photography |

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

• Accessory grid: square 1:1 crops at {rounded.lg} (18px) radius, light neutral backgrounds, product centered with 20–40px internal padding.

• No rounded imagery in hero tiles — images are full-bleed rectangular. Rounding ({rounded.sm}, {rounded.lg}) appears only on inline card imagery.

• Lazy-loading via responsive srcset and sizes across all breakpoints; CDN-optimized WebP.

### Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Small phone | ≤ 419px | Single-column tiles; sub-nav collapses to category name + primary CTA only; hero typography drops to 28px |

| Phone | 420–640px | Single-column stack; product renders scale to 80% of tile width; hero h1 drops to 34px |

| Large phone | 641–735px | Tiles transition to tighter padding (48px vertical vs 80px); fine-print wraps |

| Tablet portrait | 736–833px | Global nav collapses to hamburger; sub-nav hides category chips, keeps primary CTA |

| Tablet landscape | 834–1023px | Global nav returns fully expanded; 3-column utility grids become 2-column |

| Small desktop | 1024–1068px | Product tiles use 2/3 width with margin gutters; hero h1 stays at 40px |

| Desktop | 1069–1440px | Full layout; 4–5 column store grids; 1440px content max |

| Wide desktop | ≥ 1441px | Content locks at 1440px, margins absorb extra width |

The structural breakpoints that matter for agents: 1440px (content lock), 1068px (small-desktop), 833px (tablet landscape switch), 734px (tablet portrait), 640px (phone), 480px (small phone).

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

• Global nav utility links are smaller (~32 × 80px) — they deliberately sit at a tighter target because they're precision desktop actions, and the mobile hamburger replaces them at ≤ 833px.

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

• Product tiles: stack from 2-column to 1-column at 834px; vertical padding tightens from 80px → 48px at small-phone.

• Utility grids (store, accessories): 5-col → 4-col (1440px) → 3-col (1068px) → 2-col (834px) → 1-col (640px).

• Hero typography: {typography.hero-display} (56px) → {typography.display-lg} (40px) at 1068px → 34px at 640px → 28px at 419px.

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

• Product renders maintain their 1:1 or 4:3 aspect ratios across breakpoints; only scale changes.

• Lazy-loading is default; the above-fold hero loads eagerly.

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

3. Use {token.refs} everywhere — never inline hex.

4. Never document hover. Default and Active/Pressed states only.

5. Display headlines stay SF Pro Display 600 with negative letter-spacing. Body stays SF Pro Text 400 at 17px. The boundary is unbreakable.

6. The single drop-shadow (rgba(0, 0, 0, 0.22) 3px 5px 30px) is reserved for product photography only.

7. When in doubt about emphasis: alternate surface (light → dark tile) before adding chrome.

• Form validation and error states were not surfaced on the analyzed pages; only the neutral search input is documented.

• The homepage's embedded video/player frame uses {colors.surface-black}; interior player controls are not documented (they're a platform widget, not a web-design token).

• Some component imagery is dynamic (rotating product hero) and its specific copy varies per surface — component specs name the structure, not the rotating content.

• Dark-mode counterparts for store and accessories utility cards were not surfaced on the analyzed pages; the system documented is the daytime/light-dominant variant Apple ships by default.

• Atmospheric photography (environment page mountain vista) is a content asset, not a design token; the documented {component.environment-quote-card} describes the structural surface only.

• The exact backdrop-filter blur radius on {component.sub-nav-frosted} and {component.floating-sticky-bar} is platform-dependent; production CSS uses saturate(180%) blur(20px) as a typical baseline but the value isn't formalized as a token.