Apple MacBook Neo

# Apple MacBook Neo — Style Reference > cathedral of white space **Theme:** light · **Source:** https://www.apple.com/macbook-neo · **Analyzed:** 2026-08-25 Apple's product page is a cathedral: vast white naves of empty space where a single product image or a single sentence is the only altar. The system alternates pure white and whisper-gray (#f5f5f7) sections, sets nearly everything in one ink (#1d1d1f), and lets scale do the preaching — 96px semibold display statements collapse to 17px body with almost nothing in between used per view. Two SF Pro voices split by size (Display ≥21px, Text ≤17px) with Apple's obsessive per-size tracking: tight negative at display sizes, slightly positive at 21–28px, negative again in body. Color appears only as rhetoric: one word in a headline wears a gradient or accent hue ("privacy." in pink-violet), a feature kicker opens in lavender before the sentence continues in ink, and the lone blue (#0071e3 buttons, #0066cc links) marks every action. Media lives in enormous 28px-radius cards that bleed nearly full-width; buttons are compact pills (980px radius); a sticky product subnav with its own tiny pill CTA follows the scroll. Elevation barely exists — a half-pixel inset hairline is the strongest shadow on the page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | White | `#ffffff` | `--color-white` | Primary section canvas | | Cloud | `#f5f5f7` | `--color-cloud` | Alternate sections, footer, subnav wash | | Mist | `#e8e8ed` | `--color-mist` | Chips, segmented controls (often at 72% alpha) | | Ink | `#1d1d1f` | `--color-ink` | Headlines, dark buttons, dark section canvas | | Slate | `#333336` | `--color-slate` | Nav links, secondary UI text | | Gray | `#6e6e73` | `--color-gray` | Captions, muted labels | | Body 80 | `rgba(0,0,0,0.8)` | `--color-body` | Standard body copy | | Body 56 | `rgba(0,0,0,0.56)` | `--color-body-muted` | Continuation text after bold kickers | | Action | `#0071e3` | `--color-action` | Primary pill buttons | | Link | `#0066cc` | `--color-link` | Inline links, "Shop >" arrows | | Success | `#0a861a` | `--color-success` | "In stock" / availability | Accent hues (one word per headline, often as gradients): pink-magenta `#cc29bc`, violet `#882ff4`, lavender `#8668ff`, orange `#ed6300`, teal `#00a1b3`. ## Tokens — Typography **Display:** SF Pro Display — for 21px and up. **Text:** SF Pro Text — 19px and below. Fallback: `-apple-system, system-ui, Helvetica, sans-serif`. Weights: 400 (body/buttons), 600 (nearly all headings), 700 (rare display emphasis). | Step | Size / Weight / Line | Tracking | Face | |------|---------------------|----------|------| | display-xl | 96px · 600 · 1.04 | -0.015em | Display | | display | 80px · 700 · 1.05 | -0.015em | Display | | display-sm | 56px · 600 · 1.07 | -0.005em | Display | | heading | 48px · 600 · 1.08 | -0.003em | Display | | heading-sm | 40px · 600 · 1.2 | 0 | Display | | subheading | 32px · 600 · 1.13 | +0.004em | Display | | feature | 28px · 600 · 1.14 | +0.007em | Display | | feature-sm | 24px · 600 · 1.17 | +0.009em | Display | | title | 21px · 600 · 1.38 | +0.011em | Display | | body | 17px · 400 · 1.47 | -0.022em | Text | | body-tight | 17px · 400–600 · 1.24 | -0.022em | Text (nav, buttons) | | caption | 14px · 400 · 1.43 | -0.016em | Text | | legal | 12px · 400 · 1.33 | -0.01em | Text | ## Tokens — Spacing & Shape | Purpose | Value | |---------|-------| | Density | Monumental — one statement or one product per viewport | | Section padding | 120–200px vertical | | Content width | ~980–1120px text; media cards bleed to ~1440px | | Card padding | 40–56px | | Gap between cards | 20px | | Element | Radius | |---------|--------| | Nav hit-areas | `5px` | | Small chips / video controls | `10px` | | Mid cards | `18–22px` | | Media & feature cards | `28px` (the signature radius) | | Hero panels | `36px` | | Buttons | `980px` pill | | Icon buttons | `50%` | **Shadows** — essentially none: `inset 0 0 0.5px rgba(0,0,0,0.11)` hairline on glass chips. Separation is section-color alternation and space. ## Guidelines - Alternate section canvases white → cloud (#f5f5f7) → occasionally ink; never use borders to separate sections - Give one word per display headline a color or gradient — the accent word is the entire color budget of that section - Write feature copy as "Bold kicker. " in ink followed by the sentence continuing in 56%-black — one paragraph, two inks - Route every action through blue: #0071e3 filled pills for buys, #0066cc text links with a chevron for everything else - Use SF Pro Display above 20px and SF Pro Text below; respect the tracking flip (negative at display, positive at 21–28px) - Put all media in 28px-radius cards — photography never touches a sharp corner or the raw page edge - Keep a sticky product subnav (product name left, anchor links + mini Buy pill right) through the whole page - Let stat and comparison moments use huge Display numerals with the same restraint — figures are headlines **Don't** - Do not use more than one accent color per section — color words are rationed, one per headline - Do not use drop shadows for elevation — Apple separates with background changes and radius, not depth - Do not set headlines lighter than 600 or body heavier than 400 — the weight system is binary - Do not use full-bleed edge-to-edge photography — media always sits inside the 28px card - Do not underline links; the chevron (>) and blue do that work - Do not crowd viewports: one idea per screen, and the white space around it is the design