Foundations and tokens
The basic decisions everything else is built from (colour, type, spacing, motion, modes) and how they reach code as tokens.
What good looks like: Every decision is a typed token with a role and a source; semantic tokens alias primitives across three tiers; light, dark and high-contrast modes are supported or explicitly decided against; colour pairs pass WCAG in every mode.
Components
The building blocks teams reach for: catalogued, contracted, tested and released.
What good looks like: Every component is catalogued with a complete usage contract (purpose, when and when not to use, anatomy, API, states, behaviour, accessibility, content, examples), its own automated tests and stories, scripted keyboard paths, a platform decision and a versioned release.
Patterns and pages
How components come together for real tasks and screens: patterns and page templates.
What good looks like: Common tasks (forms, search, confirmation, empty states) are documented patterns with followable rules, and page templates show the pieces on a real screen.
Usage
Whether product teams actually use the system, and whether anyone can tell.
What good looks like: Product code (not only the system's own site) uses system components for most UI; bypasses (raw colours, raw pixels, hand-rolled controls, deep imports) are rare; there are no local copies or duplicate definitions; every element in use has a contract.
Governance
Who looks after the system and how it changes without breaking things.
What good looks like: Machine-readable owners, a contribution flow with templates, semver with release tooling, changelogs, deprecations with a timeline, decision records, a declared layer model and defined lifecycle labels.
Brand, illustration, microcopy and localisation
Whether brand, imagery and writing rules can be checked, not only admired in a PDF.
What good looks like: Brand, illustration and voice rules are machine-readable or enforced; illustrations live in a library with per-asset metadata; strings are externalised in a message catalogue; localisation is ready (pseudo-localisation, text expansion, direction rules).
Tools and sync
Whether design, code and docs tell the same story, kept in step by tooling rather than by hand.
What good looks like: One token source is built into code by a pipeline; every component has stories in a workshop; a documentation site is generated from the system's records; CI runs the system's checks on every change; the design tool is linked to code.
AI readiness
Whether AI coding and design tools can use the system, not guess at it.
What good looks like: Machine-readable contracts and followable rules for every component, one exact import each, an MCP knowledge interface, retrieval tests in CI, agent instructions and tokens with allowed and forbidden uses.
Data: rubric.json, the file the demos read.