designlang
Brand guidelines #0071e3

May 15, 2026

apple.com

A reading of the visual language at https://apple.com. Every token, every rule, every component — captured from the live site.

Page intent
landing
System grade
B 86/100
Tokens
18 colours · 14 sizes
Generated
designlang
Chapter 01

About

Page intent
landing 61% confidence
Material language
material-you
Imagery style
photography
Component library
unknown
Stack
unknown
Voice tone
friendly
Chapter 03

Colour

1 primary · 1 secondary · 1 accent · 7 neutrals · 18 total

Primary #F5F5F7
RGB
245, 245, 247
HSL
240°, 11%, 96%
Secondary #0071E3
RGB
0, 113, 227
HSL
210°, 100%, 45%
Accent #FAFAFC
RGB
250, 250, 252
HSL
240°, 25%, 98%

Neutrals

#000000
#1D1D1F
#333336
#6E6E73
#E8E8ED
#D2D2D7
#443C2A

Full palette

#000000
#1D1D1F
#2997FF
#333336
#F5F5F7
#0066CC
#6E6E73
#FAFAFC
#0071E3
#E8E8ED
#D2D2D7
#443C2A
#1246C4
#9FC6F4
#140A12
#3E4FCA
#3397D4
#EA8E5E

WCAG 100% · 10 passing pairs · 0 failing. Full breakdown in §11.

Chapter 04

Typography

3 families · 14 sizes · 4 weights

Display
SF Pro Text
Body
SF Pro Display
Weights
400, 600, 300, 700

Specimen

iPhone
MacBook Air

Scale

StepSizeSample
t00 56px iPhone
t01 44px iPhone
t02 40px iPhone
t03 34px iPhone
t04 28px iPhone
t05 25.5px iPhone
t06 24px iPhone
t07 21px iPhone
t08 18px iPhone
t09 17px iPhone
Chapter 05

Spacing

Base 2px · 19 steps captured

Rhythm

1px
4px
24px
26px
29px
32px
34px
37px
40px
44px
Chapter 06

Shape

6 radii · 1 elevation tiers

Border radii

5px
8px
11px
50px
980px
999px

Elevation

xs
Chapter 07

Iconography

unknown · 24 captured

Library
unknown
Confidence
0%
Stroke style
fillDominant
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
Chapter 08

Motion

Feel: mixed · 5 durations · 7 easings

Duration scale

20ms
100ms
160ms
300ms
1000ms

Easings

Chapter 09

Components

unknown · 2 component patterns captured

Mocks

Card

Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

Detected patterns

button

Slots
label, icon, badge
Variants
link, secondary
Sizes
—

card

Slots
heading, description, media, footer
Variants
—
Sizes
—
Chapter 10

Voice

friendly · — · —

Headlines from the site

CTA verbs

Chapter 11

Accessibility

100% WCAG 2.1 contrast
10 passing · 0 failing

No failing contrast pairs detected.

Chapter 12

Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variablesvariables.css
:root {
  --color-primary: #f5f5f7;
  --font-display: "SF Pro Text";
  --space-base: 2px;
  --radius-md: 8px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#f5f5f7' },
      fontFamily: { display: ['SF Pro Text', 'serif'] },
      spacing: { base: '2px' },
      borderRadius: { md: '8px' },
    },
  },
};

Run npx designlang pack apple.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

Usage

  1. Lead with the primary.

    It belongs on calls-to-action and one accent moment per screen. Not on body copy.

  2. Two type families, three weights.

    Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

  3. Snap to the spacing scale.

    Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

  4. Treat accessibility as a hard constraint.

    When a colour pair fails WCAG, fix the colour — not the contrast check.