Design System Audit

3. State completeness For each interactive component, check:

• Hover state defined
• Focus state defined
• Active/pressed state defined
• Disabled state defined
• Loading state defined (where applicable)
• Error state defined (where applicable)
• Empty state defined (where applicable)

4. Accessibility baseline

• Do all components use semantic HTML?
• Are form inputs labeled?
• Are interactive elements keyboard accessible?
• Are ARIA attributes used correctly (not excessively)?
• Is focus management handled in modals/popovers?

5. Documentation

• Is there a design.md or equivalent?
• Are components documented (usage, props, variants)?
• Is the documentation current (matches the actual code)?
• Are there usage examples?

Step 3: Output

Summary

• Overall health: Healthy / Needs attention / Critical gaps
• Token consistency: X% of values use tokens
• Component coverage: X components, Y custom, Z potential duplicates
• State completeness: X% of components have full state coverage
• Accessibility: key issues found

Issues (by priority)

[CRITICAL] — Issues that affect users now
[IMPORTANT] — Issues that will cause problems as the system grows
[IMPROVEMENT] — Nice-to-have improvements

Recommendations

1. Top 3 things to fix immediately
2. Components that should be extracted
3. Tokens that should be standardized
4. Documentation gaps to fill