design-system-reviewer

Audit frontend components by scanning for hardcoded colors, spacing, and typography to enforce design token usage. The reviewer analyzes your component library to detect non-compliant values and generates a report highlighting deviations with suggested token substitutions.

Yes, you can automatically discover design tokens from Tailwind theme configs, CSS variables, and design-token files. The reviewer detects these tokens to build a token map, ensuring subsequent component checks validate against your project's actual defined styles.

Design system token compliance ensures UI components use predefined variables for colors, spacing, and typography rather than hardcoded values. Maintaining this compliance prevents visual inconsistencies and closes potential accessibility gaps across multiple environments.

Generate a token map by pointing the reviewer at your component library path. It automatically extracts design tokens from your CSS variables and theme configurations to produce a structured mapping for validating component conformance.

Yes, the design system reviewer works across multiple files and environments. You can apply it to UI component libraries and design audits to validate token usage and check accessibility conformance throughout your entire project structure.

The best way to check z-index and spacing token usage is running a token-based compliance review. The reviewer verifies these properties against your design system tokens to identify hardcoded values and suggest proper substitutions.