packages/shared-skills/skills/frontend/references/design/apple.md
Apple's web language is a precision editorial system that alternates between gallery-like calm and retail-density information blocks. The visual tone stays restrained: broad neutral canvases, quiet chrome, and product imagery given almost all of the expressive weight. The interface is engineered to disappear so hardware, materials, and finish options become the narrative foreground.
Across the five analyzed pages, the rhythm is consistent but not monolithic. Marketing surfaces (homepage and Environment) use cinematic black-and-light chaptering, while commerce surfaces (Store and Shop flows) introduce tighter spacing, more utility controls, and denser card stacks without breaking the core brand grammar. The result is one system with two gears: showcase mode and transaction mode.
Typography is the stabilizer. SF Pro Display carries hero and merchandising hierarchy with compact line heights and controlled tracking, while SF Pro Text handles product metadata, navigation, filters, and dense selection UI. The typography stays understated, but the scale range is wide enough to support both billboard hero messaging and micro utility labels.
Key Characteristics:
#000000) alternating with pale neutral fields (#f5f5f7)#0071e3, #0066cc, #2997ff)18px to 980px and circular controls)Source Pages:
https://www.apple.com/,https://www.apple.com/environment/,https://www.apple.com/store,https://www.apple.com/shop/buy-iphone/iphone-17-pro,https://www.apple.com/shop/accessories/all
#000000): Immersive hero canvases, high-drama product chapters, deep UI anchors.#f5f5f7): Main light surface for feature bands, comparison blocks, and editorial transitions.#1d1d1f): Primary text and dark-fill control color on light canvases.#0071e3): Primary action fill and focus-signaling brand accent.#0066cc): Inline link color optimized for long-form readability.#2997ff): Bright link treatment on darker scenes where stronger contrast is required.#ffffff): Retail/product-list backgrounds and dense transactional sections.#272729): Dark card and media-control context layer.#262629): Slightly deeper dark utility layer for control groupings.#28282b): Elevated dark supporting surfaces.#2a2a2c): Darkest elevated step used for separation in richer dark scenes.#6e6e73): Body secondary copy, helper descriptions, tertiary metadata.#d2d2d7): Dividers, subtle outlines, and muted utility containment.#86868b): Stronger field outlines in product-configuration and filter contexts.#424245): Dark-neutral text/surface crossover in store contexts.#0071e3): Shared focus and selected-state signal across marketing and commerce contexts.SF Pro Display, fallbacks SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serifSF Pro Text, fallbacks SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|
| Hero Display XL | 80px | 600 | 1.00-1.05 | -1.2px | Environment/store hero scale |
| Hero Display L | 56px | 600 | 1.07 | -0.28px | Homepage hero moments |
| Section Display | 48px | 500-600 | 1.08 | -0.144px | Major chapter headings |
| Product Heading | 40px | 600 | 1.10 | normal | Product and campaign section titles |
| Feature Display | 38px | 600 | 1.21 | 0.152px | Device and merchandising callouts |
| Promo Display | 32px | 300-600 | 1.09-1.13 | 0.128px to 0.352px | Module-level sub-heroes |
| Card/Product Title | 28px | 600 | 1.14 | 0.196px | Tile-level naming and key copy |
| Utility Heading | 24px | 600 | 1.17 | 0.216px / -0.2px | Configurator and grouped content headers |
| Link/Action Heading | 21px | 600 | 1.14-1.38 | 0.231px | Larger promotional links |
| Subhead | 19px | 600 | 1.21 | 0.228px | Compact section intros |
| Body Primary | 17px | 400 | 1.47 | -0.374px | Standard body and retail descriptions |
| Body Emphasis | 17px | 600 | 1.24 | -0.374px | Emphasized labels and key values |
| Control Label | 14px | 400-600 | 1.29-1.47 | -0.224px | Buttons, helper labels, compact nav text |
| Micro UI | 12px | 400-600 | 1.00-1.33 | -0.12px | Fine print, micro labels |
| Legal/Meta | 10px | 400 | 1.30-1.47 | -0.08px | Dense metadata and legal support text |
Inter for text-heavy implementation and SF Pro Display-like metrics approximated with Inter Tight for headings.#0071e3 background, #ffffff text, 8px radius, compact horizontal padding (commonly 8px 15px). Used for decisive purchase/progression actions.#1d1d1f background, #ffffff text, 8px radius. Used when light surfaces need a restrained high-contrast primary.18px-56px radii and extreme pill links at 980px. Establishes Apple’s soft but precise call-to-action silhouette.#fafafc or translucent white) with subtle gray borders (#d2d2d7 / #86868b) for dense configuration contexts.#f5f5f7 or white fields with minimal framing and image-first composition.#272729 to #2a2a2c) used for overlays, media controls, and dark-context modules.28px-36px) for featured content lanes.#1d1d1f), border-led containment (#86868b).8px, but the system supports dense micro-steps for precision alignment.2, 4, 6, 7, 8, 9, 10, 12, 14, 17, 20 px.8px unit scaffolding with 14-20px utility intervals for component padding and list spacing.| Level | Treatment | Use |
|---|---|---|
| Level 0 | Flat neutral surfaces (#ffffff, #f5f5f7, #000000) | Main narrative and product stages |
| Level 1 | Subtle border containment (#d2d2d7, #86868b) | Filters, input fields, utility cards |
| Level 2 | Soft shadow (rgba(0,0,0,0.08) to rgba(0,0,0,0.22) where present) | Highlighted cards and elevated merchandise modules |
| Level 3 | Dark-surface stepping (#272729 -> #2a2a2c) | Overlays, media controls, dark utility clusters |
| Accessibility | Blue focus signal (#0071e3) | Keyboard and selection emphasis |
Depth is intentionally restrained. Apple favors tonal contrast, surface stepping, and compositional hierarchy over heavy shadow stacks.
#000000, #f5f5f7, #ffffff) as the structural foundation.| Name | Width | Key Changes |
|---|---|---|
| Small Mobile | 374px and below | Tightened retail controls, single-column product stacks |
| Mobile | 375px-640px | One-column modules, compact action rows, condensed selectors |
| Tablet | 641px-833px | Expanded cards and mixed 1-2 column transitions |
| Tablet Wide | 834px-1023px | More stable multi-column merchandising, larger text blocks |
| Desktop | 1024px-1240px | Full retail layouts and product comparison structures |
| Desktop Wide | 1241px-1440px | Marketing hero expansion and broader section spacing |
| Large Desktop | 1441px+ | Maximum chapter breathing room and wide editorial composition |
#0071e3)#0066cc)#000000)#f5f5f7)#1d1d1f)#6e6e73)#d2d2d7)#86868b)#000000) with SF Pro Display semibold headline (48-56px), concise supporting copy, and two capsule CTAs using #0071e3 and #1d1d1f."#ffffff) with 18px rounded cards, #86868b border fields, SF Pro Text 17px body copy, and compact option selectors."#f5f5f7 and white surfaces, with image-first cards, restrained shadows, and 14-17px SF Pro Text metadata."#000000, #f5f5f7, #ffffff) before tuning accents.