apple.com design system

---
version: alpha
name: "apple.com"
description: "Design system extracted from https://www.apple.com/ on 2026-09-28"
colors:
  background: "#000000"
  surface: "#1d1d1f"
  foreground: "#f5f5f7"
  muted-foreground: "#1d1d1f"
  primary: "#0071e3"
  on-primary: "#ffffff"
  secondary: "#de9444"
  border: "#0066cc"
typography:
  headline-display:
    fontFamily: "SF Pro Text"
    fontSize: "34px"
    fontWeight: 600
    lineHeight: "1.47"
    letterSpacing: "-0.374px"
  headline-lg:
    fontFamily: "SF Pro Display"
    fontSize: "56px"
    fontWeight: 600
    lineHeight: "1.07"
    letterSpacing: "-0.28px"
  headline-md:
    fontFamily: "SF Pro Text"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.33"
    letterSpacing: "-0.12px"
  body-md:
    fontFamily: "SF Pro Text"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.33"
    letterSpacing: "-0.12px"
  label-md:
    fontFamily: "SF Pro Text"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.33"
    letterSpacing: "-0.12px"
  button:
    fontFamily: "SF Pro Text"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "1.29"
    letterSpacing: "-0.224px"
rounded:
  none: "0px"
  2xl: "980px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "48px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "980px"
    height: "44px"
    padding: "11px 21px"
  button-secondary:
    backgroundColor: "#000000"
    textColor: "#2997ff"
    typography: "{typography.button}"
    rounded: "980px"
    height: "44px"
    padding: "11px 21px"
---

# apple.com

## Overview

Apple: Discover the innovative world of Apple and shop everything iPhone, iPad, Apple Watch, Mac, and Apple TV, plus explore accessories, entertainment, and expert device support.

Soft, well-rounded controls, one soft shadow for depth, restrained display type at 34px / 600, a single blue accent on neutrals. The site ships in dark mode by default (dark surfaces, light type). Measured from 1912 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/desktop-1440-dark.png`: Desktop 1440, dark mode
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#000000` | Page background |
| surface | `#1d1d1f` | Cards, panels, raised or recessed surfaces |
| foreground | `#f5f5f7` | Primary text |
| muted-foreground | `#1d1d1f` | Secondary text, captions |
| primary | `#0071e3` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#de9444` | Secondary accent (amber) |
| border | `#0066cc` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#000000`, `#f5f5f7`, `#5a4535`, `#9fc6f4`, `#24568e`, `#eeadb1`, `#de9444`, `#4a4a4c`.

Gradients in use: `radial-gradient(100% 33% at left bottom, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0))`; `linear-gradient(rgba(29, 29, 31, 0.4) 0%, rgba(29, 29, 31, 0) 70px, rgba(29, 29, 31, 0) calc(100% - 70px), rgba(29, 29, 31, 0.4) 100%)`.

The accent `#0071e3` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **SF Pro Text** for h1, h3, body, label, button: system font stack.
- **SF Pro Display** for h2: system font stack.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | SF Pro Text | 34px | 600 | 1.47 | -0.374px |
| headline-lg | SF Pro Display | 56px | 600 | 1.07 | -0.28px |
| headline-md | SF Pro Text | 12px | 400 | 1.33 | -0.12px |
| body-md | SF Pro Text | 12px | 400 | 1.33 | -0.12px |
| label-md | SF Pro Text | 12px | 400 | 1.33 | -0.12px |
| button | SF Pro Text | 14px | 400 | 1.29 | -0.224px |

Type scale in use: 12px, 14px, 17px, 21px, 26px, 34px, 40px, 56px. Base body size 12px.

The H1 renders at 34px / 600, start aligned, up to 1px wide, tracking -0.374px. Sample: "Apple".

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 48 (px).
- Flex and grid gaps: 12, 16 px.
- Content max width: 930px, centred.
- Breakpoints: 734px, 833px, 1068px, 1069px, 1441px.
- Header: 44px tall, fixed, backdrop blur, background `rgba(29, 29, 31, 0.8)`; 12 nav links at 17px / 600 (Apple · Store · Shop the Latest · Mac · iPad · iPhone · Apple Watch · Apple Vision Pro).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`

## Shapes

- Buttons: 980px
- Inputs: 980px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, 2xl 980px, full 9999px

## Components

### Button, primary

Background `#0071e3`, text `#ffffff`, border 1px solid transparent, radius 980px, height 44px, padding 11px 21px, 17px / 400. Sample label: "Learn more".

### Button, secondary

Background transparent (it sits on `#000000`, so place it on that colour), text `#2997ff`, border 1px solid #2997ff, radius 980px, height 44px, padding 11px 21px, 17px / 400. Sample label: "Buy".

### Link

Colour `#ffffffcc`, no underline at rest, weight 600.

## Dark Mode

Both themes exist; the default render is dark and the dark theme was reached via class theme-dark. Token pairs, light → dark:

| Token | Light | Dark |
| --- | --- | --- |
| background | `#000000` | `#000000` |
| surface | `#1d1d1f` | `#171719` |
| foreground | `#f5f5f7` | `#f5f5f7` |
| muted-foreground | `#1d1d1f` | `#000000` |
| primary | `#0071e3` | `#0071e3` |
| on-primary | `#ffffff` | `#ffffff` |
| secondary | `#de9444` | `#de9444` |
| border | `#0066cc` | `#2997ff` |

Dark-theme shadows: `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1024px | 553px | 17px | 34px, 0 lines, start | 44px, hamburger (Store menu) | text only | 2→1 col; 2→1 col; 2→1 col | content-width |
| laptop 1024px | 688px | 368px | 17px | 34px, 0 lines, start | 44px, hamburger (Store menu) | text only | 2→1 col; 2→1 col; 6→2 col | content-width |
| tablet 768px | 688px | 240px | 17px | 34px, 0 lines, start | 48px, hamburger (Menu) | text only | 2→1 col; 2→1 col; 6→2 col | 3 full-width |
| phone 390px | 358px | 98px | 17px | 34px, 0 lines, start | 48px, hamburger (Search apple.com) | text only | 2→1 col; 2→1 col; 2→1 col | content-width |

- H1 goes 34px → 34px (100%), 0 → 0 lines.
- Nav collapses to a hamburger by 390px (first seen at 1440px); header 44px → 48px.
- Body text stays 17px at every width.
- Phone side gutter 98px.
- Section top padding 17px → 17px.

## Interaction & Motion

556 elements carry transitions; typical 0.32s with cubic-bezier(0.4, 0, 0.6, 1), mostly on opacity, transform, color. 1 running keyframe animations (globalnav-search-fade-and-slide 0.32s 1).

- Hover on button-primary ("Learn more"): background #0071e3 → #0076df; cursor pointer.
- Hover on button-secondary ("Buy"): background transparent → #0076df, text #2997ff → #ffffff, border #2997ff → transparent; cursor pointer.
- Hover on nav-link ("Apple"): text #ffffffcc → #ffffff, border #ffffffcc → #ffffff, icon/inner colour → #ffffff; cursor pointer; transition color | 0.32s | cubic-bezier(0.4, 0, 0.6, 1).
- Focus on button-primary: outline 2px solid rgb(0, 113, 227), offset 3px.
- Tooltip triggers exist (9 × data-title, 2 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- No dropdown menus found in the header.
- No scroll-reveal: content is visible without scrolling into view.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#0071e3` for actions and focus; never paint large areas with it.
- Do keep body text at 12px in SF Pro Text.
- Do match corner radii per element class (buttons 980px, cards 0px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.