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 02

## Logo

apple.com

Source
  inferred
Dimensions
  —
Aspect
  —
Format
  unknown

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

Step | Size | Sample
--- | --- | ---
`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

- `custom`
- `steps`
- `steps`
- `custom`

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

- iPhone
- MacBook Air
- iPad Air
- Apple for College

### CTA verbs

- ``×8
- ``×5
- ``×5
- ``×3
- ``×3
- ``×3
- ``×1
- ``×1

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 variables variables.css

    :root {
      --color-primary: #f5f5f7;
      --font-display: "SF Pro Text";
      --space-base: 2px;
      --radius-md: 8px;
    }

Tailwind config tailwind.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.