# Apple — Marketing Site Design Spec

> Source: apple.com (live DOM, computed styles), 2026-07-18 (desktop 1512px).
> Coverage: home / marketing tiles. No logged-in surface captured (`app n/a — site only` for marketing purposes; store account not captured). Responsive: breakpoints from tokens only; mobile rendering not verified.

## 1. Visual Theme & Atmosphere

The reference minimal consumer brand: near-white canvas, near-black `#1d1d1f` ink, and a page built entirely from full-bleed product tiles that alternate white and light-gray `#f5f5f7`, separated by thin white gutters. Each tile is centered and follows the same rhythm — product name in SF Pro Display at 600, a one-line sub-headline at a light 400, then a pair of blue pill CTAs, over enormous product photography that is the actual content. Chrome is deliberately almost invisible: a thin translucent global nav in 12px type. Colour is reserved for the blue action pills and whatever the photography brings. The discipline is in the typographic hierarchy and the whitespace, not decoration. Feels: precise, premium, calm, product-first.

## 2. Color Palette & Roles

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#ffffff` | Page and tile background |
| gray-tile | `#f5f5f7` | Alternating tile background, footer |
| gray-tile-2 | `#fafafc` | Subtle inset surface |
| black | `#000000` | Dark product tiles |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#1d1d1f` | Headlines, primary text |
| gray | `#6e6e73` | Secondary text, captions, legal |
| dark-gray | `#333336` | Nav/menu text |
| white | `#ffffff` | Text on dark tiles |

### Accent (blue action colour)
| Token | Hex | Role / usage |
|---|---|---|
| blue-cta | `#0071e3` | Filled pill button |
| blue-link | `#0066cc` | Inline links on light |
| blue-on-dark | `#2997ff` | Links/CTAs on dark tiles |

### Borders
| Token | Hex | Role / usage |
|---|---|---|
| border | `#d2d2d6` | Control/hairline borders |
| border-2 | `#e8e8ed` | Subtle dividers |

Rule: the palette is white / `#f5f5f7` / `#1d1d1f` plus exactly one blue, which changes value by context (`#0071e3` filled, `#0066cc` on light, `#2997ff` on dark). All other colour comes from photography.

## 3. Typography Rules

- Display: `"SF Pro Display", -apple-system, "Helvetica Neue", Helvetica, sans-serif` — tile headlines.
- UI / Body: `"SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, sans-serif`.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Tile headline (large) | 56 / 60 | 600 | tight negative |
| Tile headline (small) | 40 / 44 | 600 | normal |
| Sub-headline | 28 / 32 | 400 | +0.196px |
| Body | 17 / 25 | 400 | normal |
| Nav link | 12 / 16 | 400 | -0.12px |
| Caption / legal | 12 / 16 | 400 | -0.12px, `#6e6e73` |

Patterns: hierarchy comes from a big weight jump — headline at 600, everything under it at 400. Sub-headlines are large (28px) and light, which is the signature contrast. Nav type is deliberately tiny (12px).

## 4. Component Stylings

### Buttons (pill pair — the signature CTA)
- **Filled blue pill**: bg `#0071e3`, text `#ffffff`, radius `980px` (full pill), h ~`44px`, SF Pro Text 17px 400. ("Learn more" / "Shop".)
- **Outlined blue pill**: transparent bg, 1px `#0071e3` border, text `#0071e3`, same radius/height. ("Buy".)
- The two always appear side by side, centered under the sub-headline.
- **Text link with chevron**: `#0066cc`, 17px, with a trailing `>`.

### Nav
- Thin translucent global bar (~48px): Apple glyph left, product links (Store / Mac / iPad / iPhone / Watch / Vision / AirPods / TV & Home / Entertainment / Accessories / Support) at 12px `#333336`, search and bag icons right.

### Cards / tiles — the signature layout
- Full-bleed tiles alternating `#ffffff` and `#f5f5f7`, separated by thin white gutters; content centered: headline, sub-headline, CTA pill pair, then large product photography filling the lower half. Half-width tiles pair into a 2-up grid.

### Inputs
- Country/region selector renders as a rounded field with a chevron; a black pill "Continue" button. Focus ring not captured.

## 5. Layout Principles

- The page is a vertical stack of full-bleed tiles; no persistent max-width container for tile backgrounds, but tile *content* is centered and constrained (~980px).
- Tile rhythm: headline → sub-headline → CTA pair → photography.
- 2-up grid for secondary products; thin white gutters between tiles.
- Whitespace is generous and symmetric; everything is center-aligned.

## 6. Depth & Elevation

- Radii: `980px` pill buttons, `18px` cards/tiles, `12px` smaller surfaces.
- Elevation: essentially flat — depth comes from the alternating white / `#f5f5f7` tiles and from the photography itself, not shadows. Hairlines `#d2d2d6` / `#e8e8ed`.

## 7. Motion

- Restrained: hover on blue links/pills (slight darken and underline on text links); tiles may reveal on scroll and some products use scroll-driven video. No bouncy motion. Ease default cubic-bezier.

## 8. Backgrounds, Effects & WebGL

- Flat solid tile backgrounds (white, `#f5f5f7`, black). The visual richness is entirely photographic — large, high-fidelity, often cut-out product and lifestyle imagery.
- The global nav uses a translucent backdrop blur. No gradients, grain or WebGL captured on the home tiles.

## 9. Do's and Don'ts

### Do
- Build the page as full-bleed tiles alternating `#ffffff` and `#f5f5f7` with thin white gutters.
- Center every tile: headline (SF Pro Display 600) → sub-headline (28px 400) → CTA pill pair → photography.
- Use exactly one blue, switching value by context: `#0071e3` filled, `#0066cc` on light, `#2997ff` on dark.
- Make buttons full pills (`980px`) and always pair a filled blue with an outlined blue.
- Keep nav type tiny (12px) and the chrome nearly invisible.
- Let large product photography do the visual work.

### Don't
- Don't add a second accent colour; only blue is allowed as an action colour.
- Don't use drop shadows for depth — alternating tile backgrounds do that job.
- Don't left-align tile content; the layout is centered.
- Don't set sub-headlines bold — the 600/400 contrast is the hierarchy.
- Don't square off the CTAs; they are full pills.

## 10. Responsive Behavior

- Tiles collapse from 2-up to stacked; type scales down; the nav collapses to a hamburger with the bag. Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Tile gray `#f5f5f7` · Ink `#1d1d1f` · Muted `#6e6e73` · Border `#d2d2d6` · Blue `#0071e3` (filled) / `#0066cc` (link) / `#2997ff` (on dark)
- Fonts: SF Pro Display 600 (headlines) / SF Pro Text 400 (body, nav 12px) · Headline 56/40px · Sub 28px · Body 17px · Radius 980px pill / 18px tile · Button height 44px
- Focus: not captured · Hover: slight darken on blue pills, underline on text links

<apple_design_language>
Use the Apple design language: a precise, product-first consumer brand where the page is a vertical stack of full-bleed tiles alternating white #ffffff and light-gray #f5f5f7, separated by thin white gutters. Every tile is centered and follows one rhythm — a headline in SF Pro Display at weight 600 (56px large, 40px small), a large light sub-headline at 28px/400 (that 600-vs-400 jump IS the hierarchy), a pair of full-pill CTAs, then enormous product photography that supplies all the visual richness. Ink is near-black #1d1d1f with #6e6e73 for secondary and captions; chrome is nearly invisible, with a thin translucent nav in tiny 12px #333336 SF Pro Text. Exactly one accent exists — blue — shifting value by context: #0071e3 for the filled pill, #0066cc for links on light, #2997ff on dark tiles; the CTA pattern is always a filled blue pill beside an outlined blue pill (radius 980px, ~44px tall, 17px/400). Surfaces are flat with no shadows — depth comes from the alternating tile backgrounds — with #d2d2d6 hairlines and 18px tile radii. Feels: precise, premium, calm, product-first. Avoid: a second accent colour, drop shadows, left-aligned tile content, bold sub-headlines, or squared-off CTAs.
</apple_design_language>