# You are building UI in the apple.com design system.

Source: https://apple.com
Extracted by designlang on 2026-05-21.

## Brand at a glance

- title         Apple
- page intent   landing
- material      material-you
- design grade  B

## Colour

- primary     #f5f5f7
- secondary   #0071e3
- accent      #ea33c0
- neutrals    #1d1d1f · #000000 · #e8e8ed · #ffffff · #86868b · #6e6e73

## Typography

- families   SF Pro Text · SF Pro Display · Arial
- weights    400 · 600 · 300 · 700
- base size  16px

## Spacing

- scale      1px · 4px · 24px · 26px · 29px · 32px · 34px · 37px · 40px · 44px · 48px · 53px

## Radii

- scale      5px · 8px · 11px · 50px · 980px · 999px

## Motion

- durations  20ms · 100ms · 160ms · 300ms

## Voice

- tone       friendly
- pronoun    you-only
- headings   Title Case
- CTA verbs  learn · stream · buy · listen · play · watch

## Component anatomy

- button     variants: [object Object] · [object Object] · [object Object]  ·  slots: true · false · false

## Accessibility

- WCAG score 100% · failing pairs: 0

## Build rules

1. Use the colours above. **Never invent a new hex.** If you need a
   shade between two existing colours, derive it via HSL adjustment
   from the closest extracted colour and call out the derivation.
2. Use the extracted typography families. If you need a missing weight,
   pick the nearest available weight from the list and note it.
3. Snap spacing values to the scale above. No off-scale paddings or
   margins.
4. Snap border radii to the scale above.
5. Match the voice: same tone, same pronoun stance, same heading
   style. Reuse the listed CTA verbs.
6. Aim for WCAG AA contrast minimum. When the brand colours fail,
   prefer the foreground colour on the background colour rather than
   mid-tone neutrals.
7. Reuse component anatomy when it exists — do not invent novel
   structures for things the site already has.

## Available context files

designlang wrote these alongside this prompt. Reach for them when
you need ground truth:

- `<host>-design-tokens.json` — DTCG primitive · semantic · composite tokens
- `<host>-tailwind.config.js`  — Tailwind v3 config
- `<host>-tailwind-v4.css`     — Tailwind v4 `@theme` block
- `<host>-tokens.d.ts`         — TypeScript literal-union types
- `<host>-variables.css`       — bare CSS custom properties
- `<host>-reset.css`           — brand-aware base styles
- `<host>-gradients.css`       — `.grad-N` utility classes
- `<host>-anatomy.tsx`         — typed React component scaffolds
- `<host>-shadcn-theme.css`    — shadcn/ui theme
- `<host>-theme.js`            — React / Vue / Svelte theme object
- `<host>-mcp.json`            — MCP server payload (load via stdio)
- `<host>.brand.pdf`           — print-ready 13-chapter brand book

When you reference the system in code, prefer importing from these
files over hard-coding values.

## Output expectations

When asked to "build a pricing page" or "make a card" or any UI:

- Produce a single self-contained component file in the appropriate
  framework (React / Vue / Svelte — match what the user is using).
- Use Tailwind utility classes wired to the v4 `@theme` if Tailwind
  is available; otherwise use the CSS custom properties from
  `variables.css`.
- Write the headline copy using the brand voice; do not invent
  generic Lorem.
- Annotate any choice where you had to bend the system, with a
  one-line `// note:` comment explaining what and why.

## One-line install

```bash
npx designlang apple.com
```

Run this against any other URL to extract its system in the same
shape as the one above.

---

Generated by designlang. Re-extract by running `npx designlang apple.com`.