Work with me

Free tool

Design system audit scorecard

This is the scoring I use when I audit a design system. Go through the 18 statements, answer honestly, and you'll get a score out of 18 and the sections to start with. Your answers stay in your browser. If you want the reasoning behind each section, it's in my design system audit checklist.

01 Inventory

Every Figma component has a matching code component

Variants match on both sides

There are no one-off components hiding in feature folders

02 Tokens and naming

Colours and spacing in the code come from tokens, not hard-coded values

You can read every token name out loud and know where it belongs

Components use semantic tokens, not raw palette values

03 Component accessibility

The text and background token pairs you use pass WCAG 2.2 AA contrast

Every interactive component has a visible focus state

Form components have real labels and error messages

04 Design and code connection

Figma components are mapped to code, for example with Code Connect

People can see the design and the coded component side by side

Production uses only components from the library

05 Documentation and ownership

Each component says when to use it and when not to, with an example

The system has a named owner

There's a written way to propose a change

06 Ready for AI coding agents

Component docs live in the repository, where an agent can read them

There's an instruction file telling agents to use the system

An agent can build a screen without writing new components