Audit Design System

Review adherence to the design system.

When to Use

• •After major UI changes
• •Checking token usage
• •Ensuring theming consistency

Approach

Step 1: Project Invariants (Required)

Before auditing, check docs/knowledge-base/ for project-specific constraints:

• •SPEC-CSS.md — token definitions and mandates
• •SPEC-SPACING.md — spacing system
• •RULES-UI.md — component and styling rules
• •Flag any violation of documented invariants as Critical priority.

Step 2: Focus Areas

• •Color Tokens: Correct use of var(--color-*) tokens
• •Component Usage: Using existing components, not one-offs
• •Theming: Light/dark mode support
• •Semantic Tokens: Using semantic tokens over primitive

Checklist

• • All colors use semantic tokens
• • No inline styles with hardcoded values
• • Existing components reused where possible
• • Light and dark mode verified
• • Custom properties follow naming convention

Output

Findings report with specific file:line citations and token references.