# Apple design system: colors, fonts and tokens

> Apple's website (apple.com) uses a light interface with #f5f5f7 as its primary color and SF Pro Text as the main typeface, with SF Pro Display alongside it. designlang measured 13 font sizes from 10px to 56px, 19 spacing values, 6 corner radii.

Source: https://apple.com, captured 21 May 2026. Page: https://designlang.app/design-system/apple

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#f5f5f7` | 96 |
| Secondary | `#0071e3` | 9 |
| Accent | `#ea33c0` | 1 |

Neutrals: `#1d1d1f`, `#000000`, `#e8e8ed`, `#ffffff`, `#86868b`, `#6e6e73`, `#333336`, `#d2d2d7`, `#41626a`

Backgrounds: `#ffffff`, `#161617`, `#1d1d1f`, `#000000`, `#f5f5f7`, `#f4f8fb`, `#271a11`, `#ea33c0`

## Fonts

- SF Pro Text (sans), 1708 elements
- SF Pro Display (sans), 197 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 56px | 600 | 60px | -0.28px | h2 |
| 44px | 400 | 44px | -0.12px | svg, path |
| 40px | 600 | 44px | normal | h3, span, picture, source |
| 34px | 600 | 50px | -0.374px | h1 |
| 28px | 400 | 32px | 0.196px | p |
| 24px | 300 | 36px | normal | span, li, a, input |
| 21px | 400 | 25px | 0.231px | p, sup, span |
| 18px | 300 | 18px | normal | button, svg, polyline |
| 17px | 400 | normal | normal | html, head, meta, link |
| 14px | 400 | 18.0008px | -0.224px | a, p, sup, div |
| 13.3333px | 400 | normal | normal | input |
| 12px | 400 | 16.0005px | -0.12px | div, aside, ul, a |
| 10px | 400 | 13px | -0.08px | span |

## Spacing

1px, 4px, 24px, 26px, 29px, 32px, 34px, 37px, 40px, 44px, 48px, 53px, 56px, 59px, 80px, 84px, 88px, 114px, 128px

## Radii

5px, 8px, 11px, 50px, 980px, pill

## Motion

Feel: mixed. Durations: 20ms, 100ms, 160ms, 300ms, 1000ms.

## Audit

Overall 86/100 (grade B).

- Color Discipline: 92/100
- Typography Consistency: 80/100
- Spacing System: 85/100
- Shadow Consistency: 100/100
- Border Radius Consistency: 90/100
- Accessibility: 100/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #f5f5f7;
  --color-secondary: #0071e3;
  --color-accent: #ea33c0;
  --color-background: #ffffff;
  --color-text: #000000;
  --color-neutral-1: #1d1d1f;
  --color-neutral-2: #000000;
  --color-neutral-3: #e8e8ed;
  --color-neutral-4: #ffffff;
  --font-primary: "SF Pro Text", sans-serif;
  --font-secondary: "SF Pro Display", sans-serif;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 11px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/apple-com/apple-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/apple-com/apple-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/apple-com/apple-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/apple-com/apple-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/apple-com/apple-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/apple-com/apple-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/apple-com/apple-com-DESIGN.md)
- [Brand book PDF](https://designlang.app/gallery/apple-com/apple-com.brand.pdf)

Regenerate: `npx designlang apple.com`