← Gallery

extracted · 28 artefacts

apple.com

Live extraction of https://apple.com — tokens, emitters, anatomy, icons, voice, motion, MCP server, AGENTS.md, prompt pack and a 13-chapter brand book. Generated with one command.

Open brand book ↗Browse tokensAll 28 files
18colors
Aaf0
vs design-extractor.com

They surface 4 sections per brand (DESIGN.md · Tailwind · CSS · Tokens). designlang ships 28 artefacts for apple.com and renders 12+ sections below.

See full comparison ↗
3,492 charsbrand book ↗
---
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._

Typography

SF Pro Text
The quick brown fox jumps
display · 56px / 600
The quick brown fox jumps
headline · 36px / 500
The quick brown fox jumps
subhead · 22px / 400
The quick brown fox jumps
body · 16px / 400
The quick brown fox jumps
caption · 12px / 500 · uppercase

Voice

Tone, CTA verbs, headlines and pronoun stance — pulled from the live page.

tone · friendly · you-only

top CTA verbs

learn×8buy×5stream×5play×3listen×3watch×3continue×1shop×1

Motion

Durations and easing curves captured from real CSS transitions.

durations

instant20ms
xs100ms
sm160ms
md300ms
xl1s

easings

  • custom-904cubic-bezier(0.4, 0, 0.6, 1)
  • stepssteps(1, start)
  • custom-47cubic-bezier(0.25, 0.1, 0.3, 1)
  • linearlinear
  • ease-in-outease

Component anatomy

Typed React stubs — variants, slots and props detected from clustered DOM patterns.

750 chars · TypeScript
// Auto-generated by designlang — component anatomy v2.
// Scaffolds. Wire into your token system; not a runtime library.

import * as React from 'react';

export interface ButtonProps {
  variant?: 'link' | 'secondary';
  size?: 'md';
  disabled?: boolean;
  children?: React.ReactNode;
}

export function Button({ variant = 'link', size = 'md', ...rest }: ButtonProps) {
  return React.createElement('button', { 'data-variant': variant, 'data-size': size, ...rest });
}

export interface CardProps {
  variant?: 'default';
  size?: 'md';
  children?: React.ReactNode;
}

export function Card({ variant = 'default', size = 'md', ...rest }: CardProps) {
  return React.createElement('div', { 'data-variant': variant, 'data-size': size, ...rest });
}

Icon system

SVG icon census — count, style mix, grid and stroke profile.

43
total icons
0
stroke-only
43
fill-only
1.20
avg stroke
—
library

MCP / Agent rules

The same payload the stdio MCP server hands to Claude Code, Cursor and Windsurf. Wire it into your editor and the agent answers brand-system questions with the actual extraction — not a guess.

How to wire MCP →npx designlang mcp --url https://apple.com
{
  "colors": {
    "all": [
      {
        "hex": "#000000",
        "rgb": {
          "r": 0,
          "g": 0,
          "b": 0,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 0
        },
        "count": 1444,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#1d1d1f",
        "rgb": {
          "r": 29,
          "g": 29,
          "b": 31,
          "a": 1
        },
        "hsl": {
          "h": 240,
          "s": 3,
          "l": 12
        },
        "count": 1134,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#2997ff",
        "rgb": {
          "r": 41,
          "g": 151,
          "b": 255,
          "a": 1
        },
        "hsl": {
          "h": 209,
          "s": 100,
          "l": 58
        },
        "count": 526,
        "contexts": [
          "text",
          "border"
        ]
      },
      {
        "hex": "#333336",
        "rgb": {
          "r": 51,
          "g": 51,
          "b": 54,
          "a": 1
        },
        "hsl": {
          "h": 240,
          "s": 3,
          "l": 21
        },
        "count": 479,
        "contexts": [
          "background",
          "text",
          "border"
        ]
      },
      {
        "hex": "#f5f5f7",
        "rgb": {
          "r": 245,
          "g": 245,
          "b": 247,
          "a": 1
        },
        "hsl": {
          "h": 240,
          "s": 11,
          "l": 96
        },
        "count": 98,
        "contexts": [
          "background",
          "text",
          "border"
        ]
      },
      {
        "hex": "#0066cc",
        "rgb": {
          "r": 0,
          "g": 102,
          "b": 204,
          "a": 1
        },
        "hsl": {
          "h": 210,
          "s": 100,
          "l": 40
        },
        "count": 70,
        "contexts": [
          "text",
          "border"
        ]
      },
      {
        "hex": "#6e6e73",
        "rgb": {
          "r": 110,
          "g": 110,
          "b": 115,
          "a": 1
        },
        "hsl": {
          "h": 240,
          "s": 2,
          "l": 44
        },
        "count": 64,
        "contexts": [
          "text",
          "border"
        ]
      },
      {
        "hex": "#faf

Prompt pack

Paste-ready prompts pre-loaded with the apple.com system, for v0, Lovable, Cursor and Claude Artifacts.

v0884 chars
Build a landing page with this exact visual language.
COLORS:
  #000000
  #1d1d1f
  #2997ff
  #333336
  #f5f5f7
  #0066cc
  #6e6e73
  #fafafc
  #0071e3
  #e8e8ed
  #d2d2d7
  #140a12
  #9fc6f4
  #1246c4
FONTS: [object Object], [object Object], [object Object]
SPACING: 1, 4, 24, 26, 29, 32, 34, 37
RADIUS: 5, 8, 11, 50, 980, 999
SHADOWS: rgba(0, 0, 0, 0.22) 3px 5px 30px 0px
MATERIAL LANGUAGE: material-you
VOICE: Tone: friendly · Headings: Title Case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]
SECTIONS (in order):
- sidebar
- si…
Lovable721 chars
Clone the design language of this landing page and build a fresh equivalent.
Visual feel: material-you. Tone: friendly · Headings: Title Case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]
Primary palette: #000000, #1d1d1f, #2997ff, #333336, #f5f5f7.
Typography: [object Object], [object Object], [object Object].
Corner radius vocabulary: 5, 8, 11, 50, 980, 999.
Shadow vocabulary: rgba(0, 0, 0, 0.22) 3px 5px 30px 0px.
Page structure:
- sidebar
- sidebar
- steps — heading: "MacBook Air"
- hero — heading: "MacBook Air"
- cta — hea…
Cursor846 chars
# Design brief
Page type: **landing**.
Material language: **material-you**.
Voice: Tone: friendly · Headings: Title Case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].
## Tokens
```ts
export const tokens = {
  colors: ['#000000', '#1d1d1f', '#2997ff', '#333336', '#f5f5f7', '#0066cc', '#6e6e73', '#fafafc', '#0071e3', '#e8e8ed', '#d2d2d7', '#140a12', '#9fc6f4', '#1246c4'],
  fonts: ['[object Object]', '[object Object]', '[object Object]'],
  radii: ['5', '8', '11', '50', '980', '999'],
  shadows: ['rgba(0, 0, 0, 0.22) 3px 5px 30…
Claude Artifacts921 chars
Create a React artifact that reproduces this brand's design language.
Page intent: landing.
Material language: material-you.
Voice: Tone: friendly · Headings: Title Case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].
Colors to use: #000000, #1d1d1f, #2997ff, #333336, #f5f5f7, #0066cc, #6e6e73, #fafafc, #0071e3, #e8e8ed, #d2d2d7, #140a12, #9fc6f4, #1246c4.
Fonts: [object Object], [object Object], [object Object].
Radius vocabulary: 5, 8, 11, 50, 980, 999.
Sections:
- sidebar
- sidebar
- steps — heading: "MacBook Air"
- hero — h…

All artefacts

Every file designlang produced for apple.com — 28 in total. Download anything.

Brand book1 file
Spec3 files
Tokens & emitters7 files
Anatomy1 file
Voice1 file
Motion1 file
Icons1 file
Form states1 file
MCP / Agent rules1 file
Page intel5 files
Prompt pack6 files

Run designlang on your own URL.

Same 28-artefact depth as the apple.com extraction above. No signup, no API key.

npx designlang yoursite.comTry it live