Apple

---
version: alpha
name: "Apple.com Light"
description: "Apple's storefront design system is built on a tightly controlled typographic hierarchy using the proprietary SF Pro typeface family across Display and Text optical sizes. The palette is near-monochrome. deep near-black (#1d1d1f) on near-white (#f5f5f7, #fafafc) surfaces. punctuated by a single Apple Blue (#0071e3) for primary CTAs. Buttons use a fully-rounded 980px border-radius pill shape. Navigation is a fixed 44px-tall global bar with transparent background, transitioning to a frosted overlay on open. Spacing follows an 8-based rhythm with 11px and 22px as dominant micro-spacing values. The overall aesthetic is flat with no decorative shadows. depth is conveyed through surface color differentiation and product imagery."
colors:
  surface-white: "#ffffff"
  apple-blue: "#0071e3"
  nav-open-background: "#fafafc"
  surface-light: "#f5f5f7"
  link-blue: "#0066cc"
  muted-gray: "#6e6e73"
  nav-secondary: "#333336"
  near-black: "#1d1d1f"
  pure-black: "#000000"
  divider-gray: "#e8e8ed"
typography:
  hero-display:
    fontFamily: "SF Pro Display"
    fontSize: "56px"
    fontWeight: "600"
    lineHeight: "60px"
    letterSpacing: "-0.28px"
  section-headline-large:
    fontFamily: "SF Pro Display"
    fontSize: "40px"
    fontWeight: "600"
    lineHeight: "44px"
  section-headline-medium:
    fontFamily: "SF Pro Display"
    fontSize: "28px"
    fontWeight: "400"
    lineHeight: "32px"
    letterSpacing: "0.196px"
  card-headline:
    fontFamily: "SF Pro Display"
    fontSize: "24px"
    fontWeight: "600"
    lineHeight: "28px"
    letterSpacing: "0.216px"
  body-default:
    fontFamily: "SF Pro Text"
    fontSize: "17px"
    fontWeight: "400"
    lineHeight: "25px"
    letterSpacing: "-0.374px"
  body-semibold:
    fontFamily: "SF Pro Text"
    fontSize: "17px"
    fontWeight: "600"
    lineHeight: "21px"
    letterSpacing: "-0.374px"
  large-display-text:
    fontFamily: "SF Pro Text"
    fontSize: "44px"
    fontWeight: "400"
    lineHeight: "44px"
    letterSpacing: "-0.12px"
  caption-semibold:
    fontFamily: "SF Pro Text"
    fontSize: "12px"
    fontWeight: "600"
    lineHeight: "16px"
    letterSpacing: "-0.12px"
  caption-regular:
    fontFamily: "SF Pro Text"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "16px"
    letterSpacing: "-0.12px"
  small-body:
    fontFamily: "SF Pro Text"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "18px"
    letterSpacing: "-0.224px"
rounded:
  radius-pill: "980px"
  radius-full: "999px"
  radius-dropdown: "11px"
  radius-card: "8px"
  radius-small: "5px"
spacing:
  spacing-2: "2px"
  spacing-4: "4px"
  spacing-6: "6px"
  spacing-7: "7px"
  spacing-8: "8px"
  spacing-9: "9px"
  spacing-10: "10px"
  spacing-11: "11px"
  spacing-12: "12px"
  spacing-15: "15px"
  spacing-19: "19px"
  spacing-20: "20px"
  spacing-21: "21px"
  spacing-22: "22px"
  spacing-40: "40px"
  spacing-44: "44px"
---

## Overview

Apple's storefront design system is built on a tightly controlled typographic hierarchy using the proprietary SF Pro typeface family across Display and Text optical sizes. The palette is near-monochrome. deep near-black (#1d1d1f) on near-white (#f5f5f7, #fafafc) surfaces. punctuated by a single Apple Blue (#0071e3) for primary CTAs. Buttons use a fully-rounded 980px border-radius pill shape. Navigation is a fixed 44px-tall global bar with transparent background, transitioning to a frosted overlay on open. Spacing follows an 8-based rhythm with 11px and 22px as dominant micro-spacing values. The overall aesthetic is flat with no decorative shadows. depth is conveyed through surface color differentiation and product imagery.

**Signature traits:**
- Dual typeface system: Pairs SF Pro Display and SF Pro Text across the type hierarchy.
- Soft, rounded geometry: Generous corner rounding up to 999px.
- Layered elevation: Depth comes from 1 validated shadow token.

## Colors

The palette uses 10 validated color tokens across 1 theme profile. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **content-text** maps to `near-black`: Role "text" is grounded by usage context "Primary body text, headings, and icon fills across all zones".
- **action-text** maps to `pure-black`: Role "text" is grounded by usage context "Global nav link color, hover states, badge backgrounds".
- **action-background** maps to `apple-blue`: Role "background" is grounded by usage context "Primary CTA button background (Shop, Buy), focus ring color".
- **surface-background** maps to `surface-light`: Role "background" is grounded by usage context "Footer background, search hover states, section fills".

### Primary Brand
- **Surface White** (#ffffff): Button text color, primary page background. Role: primary. {authored: rgb(255, 255, 255), space: rgb, alpha: 0.8}

### Text Scale
- **Link Blue** (#0066cc): Inline text links, footer shop links, block links. Role: text. {authored: rgb(0, 102, 204), space: rgb}
- **Muted Gray** (#6e6e73): Submenu headers, search icon fills, placeholder text. Role: text. {authored: rgb(110, 110, 115), space: rgb}
- **Nav Secondary** (#333336): Secondary nav text, search input values, search list items. Role: text. {authored: rgb(51, 51, 54), space: rgb}
- **Near Black** (#1d1d1f): Primary body text, headings, and icon fills across all zones. Role: text. {authored: rgb(29, 29, 31), space: rgb}
- **Pure Black** (#000000): Global nav link color, hover states, badge backgrounds. Role: text. {authored: rgb(0, 0, 0), space: rgb, alpha: 0.04}

### Interactive
- **Divider Gray** (#e8e8ed): Locale switcher curtain, neutral fill, dotnav scrim. Role: border. {authored: rgba(232, 232, 237, 0.4), space: rgb, alpha: 0.4}

### Surface & Shadows
- **Apple Blue** (#0071e3): Primary CTA button background (Shop, Buy), focus ring color. Role: background. {authored: rgb(0, 113, 227), space: rgb}
- **Nav Open Background** (#fafafc): Global nav background when flyout is open, global message segment. Role: background. {authored: rgb(250, 250, 252), space: rgb}
- **Surface Light** (#f5f5f7): Footer background, search hover states, section fills. Role: background. {authored: rgb(245, 245, 247), space: rgb}

## Typography

Typography uses SF Pro Display, SF Pro Text across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes SF Pro Display and SF Pro Text for visual contrast. Weight range spans semi-bold, regular. Sizes range from 12px to 56px.

### Font Roles
- **Headline Font**: SF Pro Text
- **Body Font**: SF Pro Text

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Hero section headline (tile-headline probe: 56px) | SF Pro Display | 56px | 600 | 60px | -0.28px | SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Large section headings and product category titles | SF Pro Display | 40px | 600 | 44px | normal | SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Mid-level section headings | SF Pro Display | 28px | 400 | 32px | 0.196px | SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Product card and tile headlines | SF Pro Display | 24px | 600 | 28px | 0.216px | SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Primary body copy, nav links, CTA button labels | SF Pro Text | 17px | 400 | 25px | -0.374px | SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Emphasized body text, strong labels | SF Pro Text | 17px | 600 | 21px | -0.374px | SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Oversized promotional text or price display | SF Pro Text | 44px | 400 | 44px | -0.12px | SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Labels, badges, nav sub-items, fine print emphasis | SF Pro Text | 12px | 600 | 16px | -0.12px | SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Fine print, footnotes, secondary captions | SF Pro Text | 12px | 400 | 16px | -0.12px | SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Tertiary body text, legal copy, supplemental info | SF Pro Text | 14px | 400 | 18px | -0.224px | SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |

## Layout

Responsive system uses 4 breakpoint tier(s): mobile, tablet, desktop, wide.

This system uses a 8px base grid with scale values 2, 4, 6, 7, 8, 9, 10, 11, 12, 15, 19, 20, 21, 22, 40, 44, 48, 84, 88, 128.

### Responsive Strategy
- **mobile (<= 1068px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **tablet (641-1069px)**: Increase spacing and column structure for medium-width viewports.
- **desktop (1069-1440px)**: Expand layout density and horizontal composition for wide viewports.
- **wide (>= 1441px)**: Stretch composition with generous gutters and wider layout spans.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| spacing-2 | 2px | 2 | Extracted spacing token |
| spacing-4 | 4px | 4 | Extracted spacing token |
| spacing-6 | 6px | 6 | Extracted spacing token |
| spacing-7 | 7px | 7 | Extracted spacing token |
| spacing-8 | 8px | 8 | Extracted spacing token |
| spacing-9 | 9px | 9 | Extracted spacing token |
| spacing-10 | 10px | 10 | Extracted spacing token |
| spacing-11 | 11px | 11 | Extracted spacing token |
| spacing-12 | 12px | 12 | Extracted spacing token |
| spacing-15 | 15px | 15 | Extracted spacing token |
| spacing-19 | 19px | 19 | Extracted spacing token |
| spacing-20 | 20px | 20 | Extracted spacing token |
| spacing-21 | 21px | 21 | Extracted spacing token |
| spacing-22 | 22px | 22 | Extracted spacing token |
| spacing-40 | 40px | 40 | Extracted spacing token |
| spacing-44 | 44px | 44 | Mapped to --r-globalnav-height |
| spacing-48 | 48px | 48 | Extracted spacing token |
| spacing-84 | 84px | 84 | Extracted spacing token |
| spacing-88 | 88px | 88 | Mapped to --r-globalnav-flyout-spacing |
| spacing-128 | 128px | 128 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| shadow-overlay | 1 | 3px 5px 30px 0px rgba(0, 0, 0, 0.22) |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | backdrop-filter | blur(20px) ; saturate(1.8) blur(20px) |
| Light | outline-color | rgb(29, 29, 31) ; rgb(51, 51, 54) ; rgb(41, 151, 255) |
| Light | outline-width | 3px |
| Light | outline-offset | 0px ; -7px |
| Light | transform | matrix(1, 0, 0, 1, 0, -4) ; matrix(1, 0, 0, 1, 0, 0) ; matrix(1, 0, 0, 1, -631, 0) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| radius-small | 5px | 5 | Subtle corner |
| radius-card | 8px | 8 | Control corner |
| radius-dropdown | 11px | 11 | Control corner |
| radius-pill | 980px | 980 | Large surface corner |
| radius-full | 999px | 999 | Large surface corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| radius-pill | 980px | px |
| radius-full | 999px | px |
| radius-dropdown | 11px | px |
| radius-card | 8px | px |
| radius-small | 5px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Dual typeface system, Soft, rounded geometry, Layered elevation without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 419px | only screen and (max-width: 419px) |
| Mobile | <= 480px | (max-width: 480px) |
| Mobile | <= 640px | (max-width: 640px) |
| Mobile | <= 734px | (max-width: 734px) |
| Breakpoint 5 | <= 833px | (max-width: 833px) |
| Breakpoint 6 | <= 1023px | (max-width: 1023px) |
| Breakpoint 7 | <= 1044px | (max-width: 1044px) |
| Breakpoint 8 | <= 1068px | (max-width: 1068px) |
| Mobile | 641-833px | (min-width: 641px) and (max-width: 833px) |
| Mobile | 735-1068px | (min-width: 735px) and (max-width: 1068px) |
| Mobile | >= 735px | (min-width: 735px) |
| Mobile | 736-1069px | (min-width: 736px) and (max-width: 1069px) and (min-height: 734px) |
| Tablet | 834-833px | (min-width: 834px) and (max-width: 833px) |
| Tablet | 834-1023px | (min-width: 834px) and (max-width: 1023px) |
| Tablet | >= 834px | (min-width: 834px) |
| Desktop | >= 1069px | (min-width: 1069px) |
| Desktop | 1070-1440px | (min-width: 1070px) and (max-width: 1440px) and (min-height: 776px) |
| Desktop | >= 1441px | (min-width: 1441px) |
| Breakpoint 19 | Unknown | (hover: hover) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.