design-token-auditlisted

# Design Token Audit ## The Law ``` HARDCODED VALUES IN AI COMPONENTS ARE DESIGN SYSTEM DEBT. "#3b82f6 is fine for now" is a value that diverges on the next rebrand and becomes the pattern every developer copies until there are 40 hardcoded blues in the codebase. Every colour, spacing, typography, shadow, and border radius referencing a token IS a token-compliant component. ``` ## When to Use Trigger before: - Merging any PR that introduces new AI feature UI components - Adding new visual styles (colours, spacing, shadows) to existing components - Launching a new AI feature into a product with an existing design system - Conducting a design system health check ## When NOT to Use - New products with no design system yet (define tokens first, then this skill applies) - Prototypes explicitly scoped as throwaway ## The Token Categories Every AI component must reference tokens for all five categories: ### 1 — Colour Tokens ```css /* ✗ Hardcoded — fails audit */ color: #3b82f6; background: rgba(239, 68, 68, 0.1); border: 1px solid #e5e7eb; /* ✓ Token-compliant — passes audit */ color: var(--color-primary); background: var(--color-error-subtle); border: 1px solid var(--color-border); ``` **AI-specific colour tokens that must exist:** ```css --color-ai-response-bg /* Background for AI response containers */ --color-ai-streaming /* Streaming cursor colour */ --color-ai-uncertain /* Uncertainty indicator (amber family) */ --color-ai-citation /