---
site: Apple
url: "https://apple.com"
generated_at: "2026-05-14T22:15:56.303Z"
generator: "designlang@12.11.0"
intent: landing
material: material-you
tokens:
  colors:
    primary: "#f5f5f7"
    secondary: "#0071e3"
    accent: "#fafafc"
    background: "#ffffff"
    foreground: "#000000"
  typography:
    sans: SF Pro Text
    base: 12
  spacing:
    base: 2
    scale: "[1, 4, 24, 26, 29, 32, 34, 37, 40, 44]"
  radii:
    sm: 5
    md: 8
    lg: 11
    full: 999
  shadows:
    xl: "rgba(0, 0, 0, 0.22) 3px 5px 30px 0px"
---

# Overview

A **landing** page (heuristic confidence 0.61), dressed in **material-you** material (0.45).

> "MacBook Air"

The author writes in a **friendly** voice; headings tend to be **Title Case** case and **tight**.

Reading order detected on the source: `sidebar → sidebar → steps → nav → hero → cta → gallery → footer → feature-grid → nav → content`.

Source: <https://apple.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#f5f5f7` | 98 |
| secondary | `#0071e3` | 9 |
| accent | `#fafafc` | 41 |
| background | `#ffffff` | — |
| foreground | `#000000` | — |

**Neutrals:** `#000000` · `#1d1d1f` · `#333336` · `#6e6e73` · `#e8e8ed`

**Total unique colors detected:** 18.

# Typography

**Families**
- `SF Pro Text` · 1710 uses
- `SF Pro Display` · 195 uses
- `Arial` · 1 uses

**Body size:** `12px` / line-height `16.0005px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `56px` | `600` | `60px` |
| h2 | `40px` | `600` | `44px` |
| h3 | `34px` | `600` | `50px` |
| h4 | `25.5px` | `600` | `37.5px` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `1px` · `4px` · `24px` · `26px` · `29px` · `32px` · `34px` · `37px` · `40px` · `44px`

**Layout primitives:** 29 grid containers · 208 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `xl` — `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`

**Z-index layers:** 9 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `sm` — `5px`
- `md` — `8px`
- `lg` — `11px`
- `full` — `50px`
- `full` — `980px`
- `full` — `999px`

# Components

**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `navigation` · `footer` · `dropdowns` · `tabs` · `progressBars`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | link, secondary | — | 63 |
| card | — | — | 2 |

# Do's and Don'ts

**Do's**
- Use `learn`, `buy`, `stream` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Title Case** case, **tight** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **material-you** material — match shadow and radius habits.

**Don'ts**
- Don't 26 !important rules — prefer specificity over overrides.
- Don't 88% of css is unused — consider purging.
- Don't 7465 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v12.11.0 from <https://apple.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._