Build & sell

Apple's Real Design Tokens, Packaged as a Claude Skill

The real design tokens behind Apple's website, packaged as a Claude skill, plus the audit prompt that points it at a site you already have

4min read
7numbered steps
6sections

What this actually is

Apple's website does not look expensive because of taste. It looks that way because it obeys a small set of numbers, and it obeys them everywhere. Section gaps are always in the same range. The content column never gets wider than a fixed value. Body text is one specific near black, not a soft grey. Headings sit at one weight.

Once those numbers are written down, they stop being taste and start being a spec. A spec is something you can hand to Claude. That is all a skill is: a markdown file of rules that Claude loads and then follows without being reminded.

  • The tokens below are quoted from an open source Apple style skill, MIT licensed, at github.com/chaos-xxl/apple-design-skill
  • There are several of these. That one is the closest to a web design system rather than an iOS one, which is what you want if you are working on a website
  • Nothing here is published by Apple, and none of it is official. It is a documented reading of a public design language

Keep reading

Free, for an email.

Unlocks 5 more sections, the document version, and every other guide on the site, for free. Enter your email once to keep reading.

19,000+ follow where these guides come from.No spam. Unsubscribe in one click.

Read next