Apple design system

Name: designlang
Availability: InStock

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.

Captured 21 May 2026Light UI1,906 elements read

Download tokens Read it yourself

Apple colors

The brand roles and neutrals apple.com renders, with how many elements use each one.

Brand colors

Primary#f5f5f796 uses
Secondary#0071e39 uses
Accent#ea33c01 uses

Neutrals

#1d1d1f1,153 uses
#000000999 uses
#e8e8ed478 uses
#ffffff472 uses
#86868b64 uses
#6e6e734 uses
#3333362 uses
#d2d2d71 uses
#41626a1 uses

Backgrounds

#ffffff
#161617
#1d1d1f
#000000
#f5f5f7
#f4f8fb
#271a11
#ea33c0

Text colors

#00000021:1 on #ffffff
#1d1d1f16.83:1 on #ffffff
#ffffff1:1 on #ffffff
#86868b3.62:1 on #ffffff
#e8e8ed1.22:1 on #ffffff
#2997ff3.02:1 on #ffffff
#f5f5f71.09:1 on #ffffff
#0066cc5.57:1 on #ffffff

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 100% of them pass.

Text	Background	Ratio	Result
`#ffffff`	`#0071e3`	4.7:1	AA
`#000000`	`#f5f5f7`	19.29:1	AAA

Apple fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

SF Pro Text: sans, most text (1,708 elements)
SF Pro Display: sans, most text (197 elements)

Body text: 12px at weight 400, line height 16.0005px.

Weights in use: 400, 600, 300, 700.

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

Spacing and radii

Spacing scale

1px
4px
24px
26px
29px
32px
34px
37px
40px
44px
48px
53px
56px
59px

Corner radii

5px
8px
11px
50px
980px
pill

Medium radii lead, with a few larger ones. 1 distinct box shadows.

Motion

The motion reads as mixed.

Durations

instant: 20ms
xs: 100ms
sm: 160ms
md: 300ms
xl: 1000ms

Easing

custom (251 uses): cubic-bezier(0.4, 0, 0.6, 1)
steps (14 uses): steps(1)
linear (8 uses): linear
ease-in-out (2 uses): ease

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

86/100, grade B

Components found: buttons (45), inputs (2), links (338), navigation (754), footer (32), dropdowns (617).

By category

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

26 !important rules — prefer specificity over overrides
87% of CSS is unused — consider purging
7458 duplicate CSS declarations

Download the tokens

The files designlang wrote for apple.com. Run it yourself for a fresh read: npx designlang apple.com.

The core values as CSS variables

: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;
}

Read apple.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Cal.com design system

Light UI, Inter, #0000ee

Notion design system

Light UI, NotionInter, #455dd3

Clerk design system

Light UI, geistNumbers, #6c47ff

Webflow design system

Light UI, WF Visual Sans Variable, #146ef5

Quick answers

What font does Apple use?

apple.com sets most of its text in SF Pro Text (1,708 elements), with SF Pro Display alongside it. designlang read this from the computed styles of the live page on 21 May 2026.

What are Apple's brand colors?

The brand roles on apple.com are primary #f5f5f7, secondary #0071e3 and accent #ea33c0, on a #ffffff background. The neutrals used most are #1d1d1f, #000000 and #e8e8ed.

How do I use the Apple design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang apple.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from apple.com's public pages on 21 May 2026, so it shows what the site renders, not Apple's internal source files. Apple is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of apple.com on 21 May 2026. Apple is a trademark of its owner; designlang is not affiliated with it. More: the full Apple brand kit, the token extraction guide and the markdown version of this page.