Design System Audit — Measure Your Design Debt | QA Proof Skip to main content
Design Audit

Find out how far your design system has drifted

QA Proof extracts the design tokens actually in use on your live pages, measures how consistent they are, and turns the result into a single Design Debt Score you can track.

Free plan available · No credit card required

Design Debt: 18%
Colour Consistency
85
Typography System
78
Spacing System
82
Component Reuse
88

Design systems decay one exception at a time

Nobody decides to have fourteen shades of grey and nine font sizes. It happens through a rushed deadline here and a one-off component there. By the time it is visible, it is spread across the whole codebase and nobody can quantify how bad it got.

How it works

1

Enter your URL

Point QA Proof at a live page. Nothing to install and no access to your design files needed.

2

Tokens get extracted

Colours, type scales, spacing values and component patterns are read from the rendered DOM.

3

Get your Design Debt Score

One number, four category breakdowns, and specific values worth consolidating.

What the audit measures

Automated token extraction

Reads the values actually rendered in the browser, not what the style guide claims should be there.

Colour palette analysis

Surfaces near-duplicate colours that should collapse into one token.

Typography analysis

Maps every font size, weight and line height in use against a coherent scale.

Spacing consistency

Finds the one-off margins and paddings that sit outside your spacing scale.

Component reuse

Highlights repeated patterns that have been rebuilt instead of shared.

Design Debt Score

A single tracked number, so you can show the trend rather than argue from anecdotes.

Who uses it

Design system owners

Turn "the system is drifting" into a number your stakeholders will act on.

Engineering leads

Justify refactor work with measured debt instead of a gut feeling.

Teams before a redesign

Know exactly what you are carrying forward before you start rebuilding.

Common questions

A single percentage summarising how far the values in use diverge from a coherent token set, calculated across colour, typography, spacing and component reuse. Lower is better, and tracking it over time matters more than the absolute figure.
No. The audit reads the tokens actually rendered in the browser, which is why it catches drift a design file review would miss.
A linter checks your source against rules you wrote. This measures what your users actually see after every override, cascade and third-party style has been applied.
Each category lists the specific values worth consolidating — for example five greys within a few percent of each other that should be one token.
Around 20 seconds per page.

Measure your design debt

Free plan, no credit card, your score in about 20 seconds.

Start free