Skip to main content
Apple mark

Apple Design Tokens

Consumer electronics and software company

Bento grid layouts

StripeLinearNotionOpenAITeslaAirbnbFigmaSlackUberAppleRaycastKrea AIFamilyOuraNikeDuolingoArcPerplexity AIAnthropicVercelCursor

Observed with Dembrandt. Semantic roles, gradients, and breakpoints come from live extractions where available; contrast is computed from the real palette. Try the CLI for the complete W3C token export.

Design tokens observed from publicly visible CSS. Dembrandt does not host, copy, or redistribute any brand assets.

Colors

#000000
#1d1d1f
#0066cc
#2997ff
#f5f5f7
#ffffff
primary#0066cc
background#ffffff
text#1d1d1f

Typography

SF Pro Display, SF Pro Icons, Helvetica Neue
hero:56px / 600
body:18px / 300
button:18px / 300
weights:300, 600
leading:1, 1.1, 1.4, 1.6
tracking:-0.02em, 0, 0.04em

Shadows

sm

Spacing

2px4px5px6px7px8px

Border Radius

5px
8px
980px

Borders

1px solid #0066cc
1px solid #2997ff

Links

Link text#0066cc · no underline

Gradients

radial-gradient(100% 33% at 0% 100%, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0))

Opacity

0
0.04
0.08
0.16
0.4
0.64
0.92
1

Breakpoints

419px480px640px734px1440px

Motion

Duration120ms180ms280ms420ms
Easingcubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.16, 1, 0.3, 1)linear

Contrast · WCAG 2.2

Aa

Button label

20.14:1

AAA
Aa

Body text

21.00:1

AAA

Button States

PrimeReact
Default
#fafafc
Hover
#fafafc
Active
#fafafc
Focus
focus
Disabled
disabled
Loading
loading
radius: 11pxpadding: 0px 14px
output.json
{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#000000"
    },
    "palette-2": {
      "$type": "color",
      "$value": "#1d1d1f"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#0066cc"
    },
    "palette-4": {
      "$type": "color",
      "$value": "#2997ff"
    },
    "palette-5": {
      "$type": "color",
      "$value": "#f5f5f7"
    },
    "palette-6": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "primary": {
      "$type": "color",
      "$value": "#0066cc"
    },
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "text": {
      "$type": "color",
      "$value": "#1d1d1f"
    },
    "link": {
      "$type": "color",
      "$value": "#0066cc"
    }
  },
  "border": {
    "border-1": {
      "$type": "border",
      "$value": "1px solid #0066cc"
    },
    "border-2": {
      "$type": "border",
      "$value": "1px solid #2997ff"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "radial-gradient(100% 33% at 0% 100%, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0))"
    }
  },
  "fontFamily": {
    "base": {
      "$type": "fontFamily",
      "$value": "SF Pro Display, SF Pro Icons, Helvetica Neue"
    }
  },
  "fontWeight": {
    "weight-300": {
      "$type": "fontWeight",
      "$value": 300
    },
    "weight-600": {
      "$type": "fontWeight",
      "$value": 600
    }
  },
  "dimension": {
    "space-1": {
      "$type": "dimension",
      "$value": "2px"
    },
    "space-2": {
      "$type": "dimension",
      "$value": "4px"
    },
    "space-3": {
      "$type": "dimension",
      "$value": "5px"
    },
    "space-4": {
      "$type": "dimension",
      "$value": "6px"
    },
    "space-5": {
      "$type": "dimension",
      "$value": "7px"
    },
    "space-6": {
      "$type": "dimension",
      "$value": "8px"
    },
    "radius-1": {
      "$type": "dimension",
      "$value": "5px"
    },
    "radius-2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "radius-3": {
      "$type": "dimension",
      "$value": "980px"
    }
  },
  "shadow": {
    "shadow-1": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0.22) 3px 5px 30px 0px"
    }
  },
  "opacity": {
    "opacity-0": {
      "$type": "number",
      "$value": 0
    },
    "opacity-1": {
      "$type": "number",
      "$value": 0.04
    },
    "opacity-2": {
      "$type": "number",
      "$value": 0.08
    },
    "opacity-3": {
      "$type": "number",
      "$value": 0.16
    },
    "opacity-4": {
      "$type": "number",
      "$value": 0.4
    },
    "opacity-5": {
      "$type": "number",
      "$value": 0.64
    },
    "opacity-6": {
      "$type": "number",
      "$value": 0.92
    },
    "opacity-7": {
      "$type": "number",
      "$value": 1
    }
  },
  "duration": {
    "duration-1": {
      "$type": "duration",
      "$value": "120ms"
    },
    "duration-2": {
      "$type": "duration",
      "$value": "180ms"
    },
    "duration-3": {
      "$type": "duration",
      "$value": "280ms"
    },
    "duration-4": {
      "$type": "duration",
      "$value": "420ms"
    }
  },
  "cubicBezier": {
    "ease-1": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.4, 0, 0.2, 1)"
    },
    "ease-2": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.16, 1, 0.3, 1)"
    },
    "ease-3": {
      "$type": "cubicBezier",
      "$value": "linear"
    }
  },
  "breakpoint": {
    "bp-1": {
      "$type": "dimension",
      "$value": "419px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "480px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "640px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "734px"
    },
    "bp-5": {
      "$type": "dimension",
      "$value": "1440px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 20.14,
      "grade": "AAA"
    },
    "body-text": {
      "ratio": 21,
      "grade": "AAA"
    }
  }
}
// ...and more

Other token exports

--dtcgW3C token JSON, checked by the DTCG Validator
--design-mdDESIGN.md for agents and docs
--brand-guideBrand guide PDF
--wcagPalette-wide contrast report

All flags in the CLI quickstart. Same tokens in your editor via the MCP server.

$npx dembrandt apple.com