name: apple-design
version: alpha
description: >
  Apple.com is a precision editorial system: pure-white (#FFFFFF) and soft-grey
  (#F5F5F7) marketing bands alternating with full-bleed black (#000000) hero
  stages, set in San Francisco (SF Pro) with markedly negative tracking so large
  headlines read tight and engineered. Ink is near-black #1D1D1F, never pure
  black; secondary copy is the signature cool grey #86868B. The one accent is
  Apple blue — #0071E3 for fill buttons, #0066CC for inline links on light, and
  #2997FF for links on dark surfaces — applied only to actions, never decoration.
  The control vocabulary is a single shape: the fully-rounded 980px pill, in
  filled (primary) and outline (secondary "Buy") variants. The signature move is
  the centered, copy-first product band — oversized headline, one-line subhead,
  blue pill pair — over a silent product image, with type/buttons adapting to
  light or dark backgrounds.
colors:
  # Brand accent
  primary: '#0071E3'           # filled button / focus ring
  link: '#0066CC'             # inline text link on light surfaces
  link-on-dark: '#2997FF'     # link / outline button on black surfaces
  on-primary: '#FFFFFF'
  # Surface
  surface: '#FFFFFF'
  surface-secondary: '#F5F5F7'  # alternating marketing bands, footer
  surface-dark: '#000000'       # hero stages, entertainment tiles
  surface-nav: '#FAFAFC'        # opened global-nav (light)
  surface-nav-dark: '#161617'   # opened global-nav (dark)
  # Text
  on-surface: '#1D1D1F'         # primary ink (warm near-black)
  on-surface-secondary: '#86868B' # subheads, captions, footnotes
  on-dark: '#F5F5F7'            # primary text on black stages
  on-dark-secondary: '#E8E8ED'
  # Hairlines
  hairline: '#D2D2D7'           # footer accordions, dividers
  # Semantic
  focus: '#0071E3'
  error: '#E30000'
  success: '#008009'
typography:
  display:
    fontFamily: '"SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 56px            # product band headlines ("iPhone 17 Pro", "Endless entertainment.")
    fontWeight: 600
    lineHeight: 60px
    letterSpacing: -0.005em
  headline-lg:
    fontFamily: '"SF Pro Display", "SF Pro Text", sans-serif'
    fontSize: 40px            # section titles ("Apple for College", "MacBook Air")
    fontWeight: 600
    lineHeight: 44px
    letterSpacing: -0.01em
  headline-md:
    fontFamily: '"SF Pro Display", "SF Pro Text", sans-serif'
    fontSize: 34px            # observed h1
    fontWeight: 600
    lineHeight: 50px
    letterSpacing: -0.374px
  subhead:
    fontFamily: '"SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 21px            # one-line product taglines ("All out Pro.", "Magichromatic.")
    fontWeight: 400
    lineHeight: 25px
    letterSpacing: 0.011em
  body-lg:
    fontFamily: '"SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 17px            # observed body / nav / button label
    fontWeight: 400
    lineHeight: 25px
    letterSpacing: -0.374px
  body-md:
    fontFamily: '"SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 14px            # footer links
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: -0.224px
  caption:
    fontFamily: '"SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 12px            # legal footnotes, eyebrow ("h2" metadata)
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: -0.12px
rounded:
  sm: 8px        # nav search field, small chips
  md: 12px       # cards, media tiles
  lg: 18px       # large content tiles
  pill: 980px    # all buttons (filled + outline)
spacing:
  # base unit = 8px; clean editorial scale
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 40px
  xxl: 64px
  xxxl: 80px
components:
  button-primary:
    background: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-lg}'
    rounded: '{rounded.pill}'
    padding: '11px 21px'
  button-secondary:           # the outline "Buy" on light surfaces
    background: 'transparent'
    textColor: '{colors.link}'
    border: '1px solid {colors.link}'
    typography: '{typography.body-lg}'
    rounded: '{rounded.pill}'
    padding: '11px 21px'
  button-secondary-on-dark:   # outline "Buy" on black stages
    background: 'transparent'
    textColor: '{colors.link-on-dark}'
    border: '1px solid {colors.link-on-dark}'
    typography: '{typography.body-lg}'
    rounded: '{rounded.pill}'
    padding: '11px 21px'
  link-inline:
    textColor: '{colors.link}'
    decoration: 'none, underline on hover'
    chevron: 'optional leading-blue ›'
  global-nav:
    height: '44px'
    background: '{colors.surface-nav}'
    backdropFilter: 'saturate(180%) blur(20px)'
    textColor: '{colors.on-surface}'
    iconColor: '{colors.on-surface}'
  product-band:
    background: '{colors.surface} | {colors.surface-secondary} | {colors.surface-dark}'
    headline: '{typography.display}'
    subhead: '{typography.subhead}'
    actions: '[{components.button-primary}, {components.button-secondary}]'
    align: center
  media-tile:
    background: '{colors.surface-dark}'
    rounded: '{rounded.md}'
    labelColor: '{colors.on-dark}'
  footer:
    background: '{colors.surface-secondary}'
    accordionRule: '1px solid {colors.hairline}'
    textColor: '{colors.on-surface}'
    metaColor: '{colors.on-surface-secondary}'
motion:
  easing-standard: 'cubic-bezier(0.28, 0.11, 0.32, 1)'  # Apple's signature ease
  duration-fast: 200ms
  duration-standard: 400ms
  scroll: 'scroll-driven reveals + sticky pinned product sequences'
icons:
  library: sf-symbols          # SF Symbols (custom); use Lucide/Feather as OSS substitute
  style: outline
  stroke: ~1.5px-2px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  colorRule: 'inherit on-surface ink; chevrons/affordances take {colors.link}'

Apple

Design spec — version alpha. Surfaces studied via Playwright: apple.com homepage (logged-out, US locale) — :root custom properties + computed-style probes of body, headings, nav, links, and buttons. Brand lore supplemented from the known Apple HIG / marketing system.

Overview

Apple.com is a precision editorial system, not a conventional dashboard. The page is a vertical stack of full-width bands that alternate between three canvases: pure white {colors.surface} #FFFFFF, soft grey {colors.surface-secondary} #F5F5F7, and full-bleed black {colors.surface-dark} #000000 for hero product stages. Each marketing band is copy-first and centered: an oversized headline, a single-line subhead, and a pair of blue pill actions ("Learn more" filled / "Buy" outline), set over a silent product image. Type and button colors flip automatically to suit the band's brightness.

The typeface is San Francisco (SF Pro Display for large type, SF Pro Text for body), carried at 400 and 600 with deliberately negative tracking (observed -0.374px on body, tighter on display) — this is what gives Apple's headlines their tight, machined feel. Ink is near-black #1D1D1F (never pure black on light), with the cool grey {colors.on-surface-secondary} #86868B doing all secondary/legal work. The lone accent is Apple blue, used in three context-specific shades: {colors.primary} #0071E3 for filled buttons and the focus ring, {colors.link} #0066CC for inline links on light, and {colors.link-on-dark} #2997FF on black stages. The control vocabulary is a single shape — the 980px pill — and depth is essentially flat: no drop shadows on cards, separation achieved purely through the white/grey band rhythm.

Colors

Accent. Apple blue is the only chromatic color and it means "action." {colors.primary} #0071E3 fills primary buttons ("Add to calendar", "Learn more") and is the --sk-focus-color. Inline text links on light surfaces use the slightly deeper {colors.link} #0066CC; on black stages, links and outline buttons brighten to {colors.link-on-dark} #2997FF for contrast. Discipline rule: blue is reserved for interactive elements — never headlines, never decorative fills.

Surfaces. Three canvases drive the whole page: {colors.surface} #FFFFFF, {colors.surface-secondary} #F5F5F7 (alternating bands + footer), and {colors.surface-dark} #000000 (hero stages, entertainment tiles). The global nav is its own near-white {colors.surface-nav} #FAFAFC (or #161617 in dark contexts) behind a saturated blur.

Text. Primary ink {colors.on-surface} #1D1D1F; secondary/eyebrow/legal {colors.on-surface-secondary} #86868B. On black stages, text inverts to {colors.on-dark} #F5F5F7 and {colors.on-dark-secondary} #E8E8ED.

Hairlines & semantic. Footer accordion rules and dividers use {colors.hairline} #D2D2D7. Errors {colors.error} #E30000, success {colors.success} #008009 — used sparingly in store/checkout flows.

Typography

Family: SF Pro Display / SF Pro Text → "Helvetica Neue", Helvetica, Arial, sans-serif. Closest open-source substitute: Inter (with font-feature-settings for tight tracking) or the literal SF Pro webfont Apple self-hosts. Weight strategy is binary in practice — 400 for body/subheads, 600 for all headlines. The defining trait is negative letter-spacing that scales with size: subtle on body (-0.374px), pronounced on display type, so large headlines read engineered rather than airy.

Token	Size	Weight	Line-height	Tracking	Usage
display	56px	600	60px	-0.005em	Product band headlines, "Endless entertainment."
headline-lg	40px	600	44px	-0.01em	Section titles ("Apple for College")
headline-md	34px	600	50px	-0.374px	h1
subhead	21px	400	25px	+0.011em	One-line taglines ("All out Pro.")
body-lg	17px	400	25px	-0.374px	Body, nav, button label
body-md	14px	400	18px	-0.224px	Footer links
caption	12px	400	16px	-0.12px	Legal footnotes, eyebrows

Layout

Base unit 8px; editorial scale 4 / 8 / 12 / 16 / 24 / 40 / 64 / 80. Content sits in a max width of ~980–1024px (the same number as the pill radius — Apple's grid module), centered with generous side gutters. The page primitive is the full-width band: some run edge-to-edge (black heroes), others present two-up half-width tiles (e.g. "Apple for College" + "MacBook Air"). A persistent 44px sticky global nav with backdrop blur tops everything. Whitespace is the layout — bands are tall and breathe, with the centered copy block floating in the upper third over the product image.

Elevation & Depth

Essentially flat. Cards and media tiles carry no drop shadow; separation comes from the alternating white/grey/black band rhythm and from generous spacing, not elevation. The only "raised" surfaces are the blurred sticky nav and transient flyout menus / search overlay (subtle ambient shadow + saturate-blur backdrop). Apple pointedly avoids material-style shadow ladders.

Shapes

Radius vocabulary: {rounded.sm} 8px (nav search field, chips), {rounded.md} 12px (cards, media tiles), {rounded.lg} 18px (large content tiles), and the defining {rounded.pill} 980px for every button. The geometry is calm and consistent — one corner radius per element class, fully-round only for buttons. Nothing is sharp; nothing is exaggerated.

Components

• button-primary — solid #0071E3 fill, white 17px label, 980px pill, 11px 21px padding ("Add to calendar", "Learn more").
• button-secondary — transparent with a 1px blue outline and blue label ("Buy"); #0066CC on light, #2997FF on dark.
• link-inline — blue text, no underline at rest (underline on hover); often paired with a leading blue chevron ›.
• global-nav — 44px tall, near-white #FAFAFC with saturate(180%) blur(20px) backdrop, ink Apple logo + text links + search + bag icons.
• product-band — centered headline + subhead + action pair over a product image; background is white, grey, or black and the type/buttons adapt accordingly.
• media-tile — black rounded tile for services (Music, Fitness+, Arcade) with white wordmark and a pill "Watch/Play/Listen now"; arranged in a horizontal carousel with dot pagination.
• footer — grey #F5F5F7, hairline-ruled accordion groups, ink headings, grey legal text.

Motion

Transitions ride Apple's signature ease cubic-bezier(0.28, 0.11, 0.32, 1) at 200–400ms — smooth, slightly eased-out, never bouncy. The hero experiences are scroll-driven: pinned/sticky product sequences where imagery scrubs and copy cross-fades as you scroll, plus quiet fade/scale reveals on band entry. Pointedly absent: no spring bounce, no playful overshoot, no decorative looping — motion is cinematic and controlled, matching the product photography.

Iconography

Apple uses SF Symbols — a custom, weight-matched outline set that aligns optically with SF Pro text. Open-source substitute: Lucide or Feather at ~1.5–2px stroke. Sizes step 16 / 20 / 24px. Icons inherit ink {colors.on-surface}; interactive affordances (chevrons, "learn more" arrows) take Apple blue.

Do's and Don'ts

• Do build pages as a vertical rhythm of white / #F5F5F7 / black bands; let whitespace and band contrast create structure.
• Do keep one centered copy block per band: 600-weight headline, 400 one-line subhead, a filled + outline pill pair.
• Do apply negative letter-spacing to large type so headlines read tight and engineered.
• Do swap link/button blue by context: #0071E3 fill, #0066CC link on light, #2997FF on dark.
• Do keep ink at #1D1D1F on light and #F5F5F7 on black — never pure #000/#FFF text.
• Don't add drop shadows or borders to cards — separation is via band color, not elevation.
• Don't use blue for anything non-interactive, or introduce a second accent hue.
• Don't use any button shape other than the 980px pill.
• Don't add bouncy/spring motion — keep transitions smooth, eased, and cinematic.
• Don't crowd a band — Apple's density is deliberately low; let the product image breathe.

Known Gaps

• Core tokens (#1D1D1F, #86868B, #FFFFFF, #F5F5F7, #0071E3, #2997FF, #0066CC, SF Pro stack, 980px pill, 44px nav, negative tracking, 11px 21px button padding) were read directly from computed styles / :root. The exact display/headline-lg sizes, hairline #D2D2D7, and semantic error/success hexes are interpolated from the broader Apple system and should be treated as authoritative-but-verify.
• Logged-in surfaces (Store checkout, Account, configurators) and dark-mode product pages were not deeply probed; tokens above describe the homepage marketing experience.