Design System Health Scorecard

What This Is

A structured scorecard for measuring your design system’s health. Score each dimension 1-5, get an overall grade, and know exactly where to invest your time.

Use it for:

• Quarterly health checks
• Stakeholder reporting (“here’s where we are, here’s what needs work”)
• Pre-assessment before adding AI tooling
• Tracking improvement over time

Take the quiz

Click through the six dimensions below. Your grade and the dimensions to fix first appear when you finish. The detailed reference tables are further down if you want to read what each score means before answering.

Quick quiz

Score your design system in about five minutes

Pick the row that matches your system for each dimension. Your running total appears at the bottom, and the grade unlocks once all six are answered.

0 of 6 answered · Score so far: 0 / 30

1. 01 Token Coverage
   1 No tokens. Raw hex values everywhere. 2 Some primitive tokens exist but inconsistently used. 3 Primitive and semantic layers exist. Most components use tokens. 4 Full coverage. All components use semantic tokens. Dark mode works. 5 Tokens drive everything. Schema documented. AI can validate naming.
2. 02 Component Health
   1 Components exist but no consistency. Many detached instances. 2 Core components standardized. Many one-offs still in use. 3 Component library covers most of the UI. Variants documented. 4 Full library with variants, states, and responsive behavior. 5 Components have intent docs, usage guidelines, and automated testing.
3. 03 Naming Consistency
   1 No convention. Mixed formats (camelCase, kebab, slash, dot). 2 Convention exists but not enforced. Many violations. 3 Convention documented. Most tokens and components follow it. 4 Convention enforced via tooling. Violations flagged automatically. 5 Naming is machine-readable. AI tools can parse and validate.
4. 04 Documentation
   1 No documentation beyond component names. 2 Some components have descriptions. No usage guidelines. 3 Most components documented. Props, variants, and basic usage. 4 Full docs with do and don't examples, accessibility notes, and code. 5 Machine-readable docs. Component intent, knowledge graph, AI-ready.
5. 05 Accessibility
   1 No accessibility considerations. 2 Some color contrast checks. No keyboard or screen reader testing. 3 WCAG AA compliance for core components. Basic keyboard support. 4 Full AA compliance. Keyboard nav, focus management, ARIA attributes. 5 AAA where possible. Automated a11y testing in CI. Reduced motion support.
6. 06 Design-Code Parity
   1 Design and code are completely disconnected. 2 Some alignment. Manual sync. Frequent drift. 3 Token values match between Figma and code. Components differ. 4 Automated sync for tokens. Components closely match. 5 Bi-directional sync. Drift detected automatically. Parity dashboard.

Result locked

Answer all six dimensions to unlock your grade and action plan.

–

0 / 30

Your grade

Focus here first

—

—

Copy result Reset

The Scorecard

1. Token Coverage (1-5)

Score	Meaning
1	No tokens. Raw hex values everywhere.
2	Some primitive tokens exist but inconsistently used.
3	Primitive + semantic layers exist. Most components use tokens.
4	Full coverage. All components use semantic tokens. Dark mode works.
5	Tokens drive everything. Schema documented. AI can validate naming.

Your score: ___ Evidence:

• Primitive tokens defined
• Semantic layer aliases to primitives
• No raw hex values in components
• Dark mode/theming works via token swap
• Token naming follows documented convention

2. Component Health (1-5)

Score	Meaning
1	Components exist but no consistency. Many detached instances.
2	Core components standardized. Many one-offs still in use.
3	Component library covers 70%+ of UI. Variants documented.
4	Full library with variants, states, and responsive behavior.
5	Components have intent docs, usage guidelines, and automated testing.

Your score: ___ Evidence:

• Component inventory exists
• Variants cover all use cases
• States documented (hover, active, disabled, focus, error)
• Responsive behavior defined
• Detached instance count is low (under 5%)

3. Naming Consistency (1-5)

Score	Meaning
1	No convention. Mixed formats (camelCase, kebab, slash, dot).
2	Convention exists but not enforced. Many violations.
3	Convention documented. Most tokens/components follow it.
4	Convention enforced via tooling. Violations flagged automatically.
5	Naming is machine-readable. AI tools can parse and validate.

Your score: ___ Evidence:

• Naming convention documented
• Consistent separator usage
• Consistent casing
• Automated validation exists
• New additions follow convention

4. Documentation (1-5)

Score	Meaning
1	No documentation beyond component names.
2	Some components have descriptions. No usage guidelines.
3	Most components documented. Props, variants, and basic usage.
4	Full docs with do/don’t examples, accessibility notes, and code.
5	Machine-readable docs. Component intent, knowledge graph, AI-ready.

Your score: ___ Evidence:

• Component descriptions exist
• Usage guidelines (when to use / when not to use)
• Props/API documented
• Do/don’t examples
• Accessibility notes per component

5. Accessibility (1-5)

Score	Meaning
1	No accessibility considerations.
2	Some color contrast checks. No keyboard or screen reader testing.
3	WCAG AA compliance for core components. Basic keyboard support.
4	Full AA compliance. Keyboard nav, focus management, ARIA attributes.
5	AAA where possible. Automated a11y testing in CI. Reduced motion support.

Your score: ___ Evidence:

• Color contrast meets AA (4.5:1 text, 3:1 UI)
• Focus indicators visible
• Keyboard navigation works
• ARIA attributes correct
• Screen reader tested

6. Design-Code Parity (1-5)

Score	Meaning
1	Design and code are completely disconnected.
2	Some alignment. Manual sync. Frequent drift.
3	Token values match between Figma and code. Components differ.
4	Automated sync for tokens. Components closely match.
5	Bi-directional sync. Drift detected automatically. Parity dashboard.

Your score: ___ Evidence:

• Token values match between design and code
• Component structure matches
• Variant coverage matches
• Automated drift detection exists
• Sync pipeline documented

Overall Score

Total	Grade	Meaning
25-30	A	AI-ready. Your system can power automated workflows.
19-24	B	Strong foundation. A few gaps to close before AI integration.
13-18	C	Functional but needs investment. Start with naming and tokens.
7-12	D	Early stage. Focus on foundations before adding tools.
6	F	Starting from scratch. That’s okay. Everyone starts here.

Your total: ___ / 30 Your grade: ___

Action Plan

Based on your lowest scores, prioritize:

1. Lowest dimension first: _______________
2. Second lowest: _______________
3. Quick win (easiest to improve): _______________

Review again in 3 months.