# Apple design system

> Captured from https://www.apple.com/ on 2026-10-05 by Brooks New Media (https://design.brooksnewmedia.com/styles/apple/). An independent analysis for reference: Apple and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

When captured, Apple's homepage opened on a black hero for iPhone 18 Pro followed by a light grey tile, so its colors change with each launch. The system underneath holds steady: centered SF Pro headlines at 56px, a smaller subline, and a pair of pill buttons, one filled #0071e3 blue and one outlined in blue. Navigation is a slim dark bar with 12px labels.

- Theme: dark
- Mood: dark, cinematic, product
- Category: Consumer hardware

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#000000` | The page ground |
| Surface | `#ffffff` | Raised panels, bands and cards |
| Text | `#f5f5f7` | Primary ink, 19.3:1 on the background |
| Muted text | `#cccccc` | Supporting copy, 13.1:1 on the background |
| Accent | `#0071e3` | Primary actions |
| Border | `#2997ff` | Hairlines and dividers |

Full palette, most used first: `#f5f5f7`, `#000000`, `#ffffff`, `#cccccc`, `#1d1d1f`, `#6e6e73`, `#0071e3`, `#0066cc`, `#2997ff`.

## Typography

- **SF Pro Display**: display and body, 57.5% of the text. Use system-ui on Apple devices, Inter elsewhere. SF Pro is licensed for Apple platforms only, so don't embed it on a website.
- **SF Pro Text**: display, 42.5% of the text. Use system-ui on Apple devices, Inter elsewhere. SF Pro Text is the text-size cut of SF Pro, licensed for Apple platforms only.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | SF Pro Display | 56px | 600 | 1.07 | -0.005em |
| Heading | SF Pro Display | 40px | 600 | 1.1 | 0 |
| Subheading | SF Pro Display | 28px | 400 | 1.14 | 0.007em |
| Body | SF Pro Display | 19px | 400 | 1.21 | 0.012em |
| Small | SF Pro Text | 12px | 400 | 1 | -0.01em |

Sizes in use, largest first: 56px, 40px, 34px, 28px, 26px, 21px, 19px, 17px, 14px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 8px, 11px, 15px, 17px, 21px, 56px, 63px.

## Shape

Corner radii, smallest first: pill (9999px).

No shadows: depth comes from color and borders.

## Components

### Primary button ("Learn more")

- Fill: #0071e3
- Text: #ffffff, 17px at weight 400
- Border: none
- Corner: pill (9999px)
- Height: 44px, padding 11px 21px

### Secondary button ("Buy")

- Fill: transparent
- Text: #2997ff, 17px at weight 400
- Border: 1px solid #2997ff
- Corner: pill (9999px)
- Height: 44px, padding 11px 21px

## Do

- Center the headline, subline and buttons over a full-bleed product image.
- Pair buttons as one filled and one outlined, in the same blue.
- Alternate dark and light grey sections down the page.

## Don't

- Add a third button or a paragraph to the hero.
- Use square buttons.
- Embed SF Pro on a site.

## CSS variables

```css
:root {
  --color-background: #000000;
  --color-surface: #ffffff;
  --color-text: #f5f5f7;
  --color-text-muted: #cccccc;
  --color-accent: #0071e3;
  --color-border: #2997ff;
  --font-display: "SF Pro Display", "Inter", system-ui, sans-serif;
  --text-display: 56px;
  --weight-display: 600;
  --font-heading: "SF Pro Display", "Inter", system-ui, sans-serif;
  --text-heading: 40px;
  --weight-heading: 600;
  --font-subheading: "SF Pro Display", "Inter", system-ui, sans-serif;
  --text-subheading: 28px;
  --weight-subheading: 400;
  --font-body: "SF Pro Display", "Inter", system-ui, sans-serif;
  --text-body: 19px;
  --weight-body: 400;
  --font-small: "SF Pro Text", "Inter", system-ui, sans-serif;
  --text-small: 12px;
  --weight-small: 400;
  --space-1: 8px;
  --space-2: 11px;
  --space-3: 15px;
  --space-4: 17px;
  --space-5: 21px;
  --space-6: 56px;
  --space-7: 63px;
  --radius-1: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-05.