Skip to content
Back to extractor

Overview

Apple's design system is defined by typographic precision, restrained neutral palettes, and a strong spatial hierarchy that consistently directs attention to product imagery and key calls-to-action. The system uses San Francisco typefaces exclusively, with carefully tuned letter-spacing and line-height values per size and context. Subtle translucency (via backdrop-filter: saturate(180%) blur(20px)), thin keylines, and generous padding reinforce a premium, uncluttered aesthetic.

Signature traits: SF Pro type system with context-aware optical sizing, near-invisible borders using alpha-channel grays, frosted-glass navigation via backdrop-filter blur, pill-shaped CTA buttons, strict 12-column grid at 980px max-width, dark/light theme parity via CSS custom properties.

Colors

| Role | Token | Hex | Usage | |------|-------|-----|-------| | Background | --color-background | #FFFFFF | Page backgrounds | | Surface | --color-surface | #F5F5F7 | Footer, card, panel backgrounds | | Surface Secondary | --color-surface-secondary | #FAFAFC | Opened nav, elevated surfaces | | Text Primary | --color-text-primary | #1D1D1F | Headings, body copy | | Text Secondary | --color-text-secondary | #6E6E73 | Captions, placeholders, nav sub-labels | | Text Secondary Alt | --color-text-secondary-alt | #424245 | Mid-weight labels | | Border | --color-border | #D2D2D7 | Dividers, outlines (16% black alpha) | | Accent | --color-accent | #0071E3 | CTAs, focus rings, links | | Link | --color-link | #0066CC | Body text links | | Nav Primary | --color-nav-primary | rgba(0,0,0,0.8) | Global nav links | | Nav Hover | --color-nav-hover | #000000 | Nav link hover state | | Dark Background | --color-background-dark | #000000 | Dark theme page background | | Dark Surface | --color-surface-dark | #1D1D1F | Dark theme cards/panels | | Dark Text Primary | --color-text-primary-dark | #F5F5F7 | Dark theme headings | | Dark Accent Link | --color-accent-dark | #2997FF | Dark theme links and CTAs |

Typography

| Role | Family | Size | Weight | Line Height | Letter Spacing | Usage | |------|--------|------|--------|-------------|----------------|-------| | Display | SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | 28px | 600 | 1.1428571429 | 0.007em | Hero headlines, large flyout items | | Heading | SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | 21px | 600 | 1.1428571429 | 0.011em | Section titles, local nav title | | Subheading | SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | 24px | 600 | 1.1666666667 | 0.009em | Search input, elevated submenu items | | Body | SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | 17px | 400 | 1.4705882353 | -0.022em | Paragraph text, main content | | Body Small | SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | 14px | 400 | 1.2857742857 | -0.016em | Buttons, buystrip info, small UI text | | Caption | SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | 12px | 400 | 1.3333733333 | -0.01em | Labels, footer text, nav links (desktop) | | Caption Bold | SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | 12px | 600 | 1.3333733333 | -0.01em | Submenu list items, footer directory titles | | Nav Link (mobile) | SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | 28px | 600 | 1.1428571429 | 0.007em | Mobile nav expanded links | | Mono | SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | 12px | 400 | 1.3333733333 | -0.01em | Code, data display |

Layout

| Token | Value | Context | |-------|-------|---------| | Spacing XS | 4px | Icon margins, tight inline gaps | | Spacing SM | 8px | Button padding (reduced), list item gaps | | Spacing MD | 16px | Component internal padding (mobile) | | Spacing LG | 22px | Content container horizontal padding (desktop) | | Spacing XL | 44px | Nav bar height, section vertical rhythm | | Spacing 2XL | 88px | Flyout top spacing, major section separators | | Nav Height (desktop) | 44px | Global navigation bar | | Nav Height (mobile) | 48px | Global navigation bar on small screens | | Max Width (content) | 1024px | Global nav content container | | Max Width (main) | 980px | Footer and page content container | | Grid Columns | 12 | CSS grid system | | Grid Gutter Inner | 24px | Column gap in CSS grid | | Grid Gutter Outer | 24px | Padding on grid container | | Breakpoint Small | max-width: 734px | Mobile layout | | Breakpoint Medium | max-width: 1068px | Tablet layout | | Breakpoint Large | min-width: 1069px | Desktop layout | | Breakpoint XLarge | min-width: 1441px | Wide desktop layout |

Responsive strategy: Three primary breakpoints at 734px (small/mobile), 1068px (medium/tablet), and 1069px+ (large/desktop), with an additional 1441px+ extra-large breakpoint. Navigation collapses to a hamburger menu at 833px. Font sizes, spacing, and layout columns adjust at each breakpoint. The global nav switches from horizontal links to a full-screen drawer below 833px, with dedicated mobile typography (28px/600 weight display headings).

Elevation & Depth

| Level | CSS Value | Usage | |-------|-----------|-------| | Scrim (blur) | backdrop-filter: saturate(180%) blur(20px) | Navigation bar when stuck/scrolled, frosted glass overlays | | Curtain (overlay) | background: rgba(232,232,237,0.4); backdrop-filter: blur(20px) | Page curtain behind open flyout menus | | Nav opened | background: #FAFAFC | Fully opened mobile navigation background | | Dark curtain | background: rgba(0,0,0,0.4) | Dark-theme page curtain behind open menus |

Shapes

| Token | Value | Applied To | |-------|-------|-----------| | none | 0px | Table borders, raw input fields, flush elements | | sm | 5px | Reduced button block border-radius | | md | 8px | Standard button block border-radius | | lg | 12px | Super button block border-radius | | pill | 980px | Standard pill buttons (primary CTA) | | full | 9999px | Fully circular badges, tags, toggle controls |

Components

Global Navigation (#globalnav): Fixed 44px bar (48px mobile), uses CSS custom properties for color theming across light/dark modes. Desktop shows horizontal links at 12px/400 weight; mobile collapses to a full-screen overlay with 28px/600 display links. Flyout submenus animate with staggered item delays using --r-globalnav-flyout-item-number custom properties. Backdrop filter blur (saturate(180%) blur(20px)) activates in scrim mode.

Local Navigation (#ac-localnav): Secondary sticky nav at 52px height (48px mobile), supports collapsible hamburger mode at configurable breakpoints (small-, medium-, or large-ac-ln-collapsible). Current page link marked with a 1px underline keyline. Background transitions from transparent to frosted glass (rgba(250,250,252,0.8)) on scroll-stick.

Buttons (.button): Pill-shaped by default (border-radius: 980px), primary blue (#0071E3), with three size variants — reduced (12px), default (14px), elevated (17px), and super (17px with larger padding). Block variant uses border-radius: 8px. All buttons use white-space: nowrap and share consistent hover/active state via CSS custom properties.

Footer (#ac-globalfooter): Multi-section footer with directory columns (25% flex-basis each), collapsible accordion on mobile. Legal links use a pipe separator via ::after pseudo-elements. Background rgb(245,245,247) light / rgb(29,29,31) dark.

Buystrip (.ac-gf-buystrip): Centered icon+title+CTA column layout, up to 4 columns at 25% flex-basis, collapsing to 50% at 1023px and 100% at 480px. Icon height fixed at 56px with SVG background-image per item type.

Focus Rings: Consistent outline: 2px solid #0071E3 with outline-offset: 1px (or 3px for container-level focus), applied globally via :focus-visible. Data attributes [data-focus-method=mouse] and [data-focus-method=touch] suppress outlines for pointer interactions.

Grid: 12-column CSS Grid (display: grid; grid-template-columns: repeat(12, minmax(0,1fr))) with 24px column and row gaps. Responsive span classes follow {breakpoint}-span-{n} naming. Legacy flexbox .row/.column system also present with percentage-based widths.

Do's and Don'ts

| Do ✓ | Don't ✗ | |------|---------| | Use SF Pro Text for body copy and SF Pro Display for headings ≥ 20px | Don't substitute system-ui or generic sans-serif — the SF Pro optical sizing is intentional | | Apply backdrop-filter: saturate(180%) blur(20px) for frosted nav/overlay surfaces | Don't use opaque solid backgrounds for navigation bars where translucency is expected | | Use #0071E3 for primary CTAs and focus rings consistently | Don't use arbitrary blue values — the accent blue is a precise brand token | | Pair negative letter-spacing (–0.022em) with 17px body text | Don't apply default/zero letter-spacing to body-sized SF Pro Text — it reads too loose | | Use pill radius (980px) for primary action buttons | Don't apply rectangular or sharp-cornered radius to CTA buttons | | Use CSS custom properties for light/dark color switching | Don't hardcode colors without a corresponding dark-mode override | | Maintain 44px minimum touch target height for all interactive nav elements | Don't shrink nav items below 44px on desktop or 48px on mobile |

Agent Prompt Guide

You are working within the Apple design system. Key constraints:

  • —Colors: background #FFFFFF, surface #F5F5F7, text-primary #1D1D1F, text-secondary #6E6E73, border rgba(0,0,0,0.16), accent #0071E3, link #0066CC
  • —Dark mode: background #000000, surface #1D1D1F, text-primary #F5F5F7, accent #2997FF — always pair light/dark via CSS custom properties
  • —Typography: SF Pro Display for headings/display (≥20px, weight 600), SF Pro Text for body/UI (≤17px, weight 400/600), never substitute generic fonts
  • —Body text: 17px / line-height 1.4705 / letter-spacing -0.022em
  • —Caption text: 12px / line-height 1.3334 / letter-spacing -0.01em
  • —Spacing scale: 4px (xs), 8px (sm), 16px (md), 22px (lg), 44px (xl), 88px (2xl) — use only these values
  • —Border radius: 980px for pill buttons, 8px for block buttons, 12px for large cards, 5px for small UI elements
  • —Navigation height: 44px desktop / 48px mobile — never deviate
  • —Max content width: 980px (pages), 1024px (nav) — always center with auto margins
  • —Buttons: pill-shaped primary #0071E3, always white text, hover #0076DF, active #006EDB
  • —Focus rings: outline 2px solid #0071E3, offset 1px (interactive) or 3px (containers)
  • —Frosted glass: backdrop-filter saturate(180%) blur(20px) with rgba(250,250,252,0.8) background
  • —Never use colors, fonts, spacing, or radius values outside this design system