---
version: alpha
name: "apple.com"
description: "Design system extracted from https://www.apple.com/ on 2026-10-28"
colors:
  background: "#ffffff"
  surface: "#f5f5f7"
  surface-2: "#e2e2e5"
  foreground: "#f5f5f7"
  primary: "#0071e3"
  on-primary: "#ffffff"
  secondary: "#c69851"
  border: "#0066cc"
typography:
  headline-display:
    fontFamily: "SF Pro Text"
    fontSize: "34px"
    fontWeight: 600
    lineHeight: "50px"
    letterSpacing: "-0.374px"
  headline-lg:
    fontFamily: "SF Pro Display"
    fontSize: "56px"
    fontWeight: 600
    lineHeight: "60px"
    letterSpacing: "-0.28px"
  headline-md:
    fontFamily: "SF Pro Text"
    fontSize: "12px"
    fontWeight: 600
    lineHeight: "16.0005px"
    letterSpacing: "-0.12px"
  body-md:
    fontFamily: "SF Pro Text"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "16.0005px"
    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: "40px"
  8: "48px"
  9: "52px"
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 light mode by default. Measured from 1930 rendered elements at 1440px wide on 2026-10-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/brand-logo.png`: primary logo lockup
- `screenshots/brand-symbol.png`: possible standalone brand symbol
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture
- `screenshots/media-symbol-source-hd.png`: possible standalone brand symbol / high-resolution source capture
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail
- `screenshots/region-r3-context.jpg`: r3 context: page context
- `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail
- `screenshots/region-r3-icons.png`: r3 icons: icon placement and nearby text
- `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
- `screenshots/phone-390-menu.png`: Phone 390, navigation menu open
- `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png
- `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png
- `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp
- `screenshots/media-symbol-upscaled.png`: possible standalone brand symbol / upscaled.png
- `screenshots/media-symbol-transparent.png`: possible standalone brand symbol / transparent.png
- `screenshots/media-symbol-optimized.webp`: possible standalone brand symbol / optimized.webp
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/c-button-1--rest.png`: Button 1 ("Learn more"), rest
- `screenshots/c-button-1--hover.png`: Button 1 ("Learn more"), hover
- `screenshots/c-button-1--focus.png`: Button 1 ("Learn more"), focus
- `screenshots/c-button-1--active.png`: Button 1 ("Learn more"), active
- `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest
- `screenshots/c-icon-button-1--hover.png`: Icon button 1, hover
- `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus
- `screenshots/c-icon-button-1--active.png`: Icon button 1, active
- `screenshots/c-icon-button-1--disabled.png`: Icon button 1, disabled
- `screenshots/c-link-1--rest.png`: Text link 1 ("<picture> <source srcset"), rest
- `screenshots/c-link-1--focus.png`: Text link 1 ("<picture> <source srcset"), focus
- `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Store"), rest
- `screenshots/c-nav-link-1--hover.png`: Navigation link 1 ("Store"), hover
- `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Store"), focus
- `screenshots/c-tabs-1--rest.png`: Tabs 1 ("Item 1 Item 2 Item 3 Ite"), rest
- `screenshots/c-tabs-1--selected.png`: Tabs 1 ("Item 1 Item 2 Item 3 Ite"), another tab selected
- `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Store"), rest
- `screenshots/c-footer-link-1--hover.png`: Footer link 1 ("Store"), hover
- `screenshots/c-button-2--rest.png`: Button 2 ("Learn more"), rest
- `screenshots/c-button-2--hover.png`: Button 2 ("Learn more"), hover
- `screenshots/c-button-2--focus.png`: Button 2 ("Learn more"), focus
- `screenshots/c-button-2--active.png`: Button 2 ("Learn more"), active
- `screenshots/c-nav-link-2--rest.png`: Navigation link 2 ("Apple"), rest
- `screenshots/c-nav-link-2--hover.png`: Navigation link 2 ("Apple"), hover
- `screenshots/c-nav-link-2--focus.png`: Navigation link 2 ("Apple"), focus
- `screenshots/c-card-2--rest.png`: Card 2, rest
- `screenshots/c-card-2--focus.png`: Card 2, focus
- `screenshots/c-list-2--rest.png`: Styled list 2 ("<picture> <source srcset"), rest
- `screenshots/c-button-3--rest.png`: Button 3 ("View pricing"), rest
- `screenshots/c-button-3--hover.png`: Button 3 ("View pricing"), hover
- `screenshots/c-button-3--focus.png`: Button 3 ("View pricing"), focus
- `screenshots/c-button-3--active.png`: Button 3 ("View pricing"), active
- `screenshots/c-card-3--rest.png`: Card 3 ("iPad mini More than a li"), rest
- `screenshots/c-button-4--rest.png`: Button 4 ("View pricing"), rest
- `screenshots/c-button-4--hover.png`: Button 4 ("View pricing"), hover
- `screenshots/c-button-4--focus.png`: Button 4 ("View pricing"), focus
- `screenshots/c-button-4--active.png`: Button 4 ("View pricing"), active
- `screenshots/c-card-4--rest.png`: Card 4 ("iPhone 18 Pro Pro furthe"), rest
- `screenshots/c-button-5--rest.png`: Button 5 ("Buy"), rest
- `screenshots/c-button-5--hover.png`: Button 5 ("Buy"), hover
- `screenshots/c-button-5--focus.png`: Button 5 ("Buy"), focus
- `screenshots/c-button-5--active.png`: Button 5 ("Buy"), active
- `screenshots/c-button-6--rest.png`: Button 6 ("Shop"), rest
- `screenshots/c-button-6--hover.png`: Button 6 ("Shop"), hover
- `screenshots/c-button-6--focus.png`: Button 6 ("Shop"), focus
- `screenshots/c-button-6--active.png`: Button 6 ("Shop"), active

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| surface | `#f5f5f7` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#e2e2e5` | Secondary surface |
| foreground | `#f5f5f7` | Primary text |
| primary | `#0071e3` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#c69851` | Secondary accent (yellow) |
| border | `#0066cc` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#f5f5f7`, `#000000`, `#24568e`, `#9fc6f4`, `#241004`, `#524617`, `#300402`, `#c69851`.

Gradients in use: `radial-gradient(100% 33% at 0% 100%, 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, label, button, body: system font stack.
- **SF Pro Display** for h2, body: system font stack.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | SF Pro Text | 34px | 600 | 50px | -0.374px |
| headline-lg | SF Pro Display | 56px | 600 | 60px | -0.28px |
| headline-md | SF Pro Text | 12px | 600 | 16.0005px | -0.12px |
| body-md | SF Pro Text | 12px | 400 | 16.0005px | -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, 28px, 34px, 40px, 56px. Base body size 12px.

The hero heading (h1) renders at 34px / 600, start aligned, up to 1px wide, tracking -0.374px. Sample: "Apple".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 40, 48, 52 (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: "Shop".

### Link

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

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (15 of 87 in the checklist, 27 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 30 state changes, 0 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | primary sm, primary, outline sm, outline, outline sm, outline | hover, focus, active | "Learn more" |
| Icon button | secondary | hover, focus, active, disabled |  |
| Text link | plain-accent | focus | "<picture> <source srcset="http" |
| Header / navbar | default | rest only | "AppleStoreShopShop the LatestM" |
| Navigation link | plain, plain | hover, focus | "Store" |
| Menu / dropdown trigger | ghost | rest only |  |
| Tabs | plain | selected | "Item 1 Item 2 Item 3 Item 4 It" |
| Footer | default | rest only | "Apple Footer Based on data fro" |
| Footer link | plain | hover | "Store" |
| Card | flat, flat-interactive, filled-with-media, filled-media-top | focus | "MacBook Pro 14-inch model now " |
| Styled list | default, default | rest only | "<picture> <source srcset="http" |
| Avatar | 3008px-rounded | rest only |  |
| Image / figure | aspect-1.21, aspect-2.18, aspect-2.08 | rest only |  |
| Video / media embed | default | rest only |  |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Close / dismiss button, Text input, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Breadcrumb, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dropdown menu, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, List row / menu row, Table, Table row, Accordion / disclosure, Avatar stack, Divider, Code block / inline code, Keyboard key, Blockquote, Carousel / slider, Logo strip, Icon, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Hero, Content container, Grid of items, Sticky bar.

## Dark Mode

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

| Token | Light | Dark |
| --- | --- | --- |
| background | `#ffffff` | `#000000` |
| surface | `#f5f5f7` | `#241004` |
| surface-2 | `#e2e2e5` | `#171719` |
| foreground | `#f5f5f7` | `#f5f5f7` |
| primary | `#0071e3` | `#0071e3` |
| on-primary | `#ffffff` | `#ffffff` |
| secondary | `#c69851` | `#3e935c` |
| 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 | 383px | 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 | 195px | 17px | 34px, 0 lines, start | 44px, hamburger (Store menu) | text only | 2→1 col; 2→1 col; 2→1 col | content-width |
| tablet 768px | 688px | 67px | 17px | 34px, 0 lines, start | 48px, hamburger (Menu) | text only | 2→1 col; 2→1 col; 2→1 col | 3 full-width |
| phone 390px | 358px | 65px | 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 is 17px at the sampled desktop and phone widths.
- Phone side gutter 65px.
- 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 ("Shop"): 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

- Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#0071e3` where supported by measured component or regional evidence; its accent role is inferred.
- 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.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from body; large surface colors remain in the palette.
- Note: Body text contrast is 1.1:1 against the page background (below 4.5:1).