design-tokens-validator

Design token validation flags hard-coded colors, typography, spacing, radius, and shadow values in your source code and suggests official token replacements. Run the validator against your tokens.json registry and source files to identify violations and get remediation guidance during code reviews or CI checks.

Yes, the validator detects hard-coded values across CSS/SCSS/Tailwind/Styled Components, SwiftUI/UIKit, and Unity styles. It identifies violations in multiple frameworks and outputs tokenized replacements specific to each technology.

Prepare a tokens.json registry containing your design system definitions and point the validator to your source code directory. The validator then scans for hard-coded design values and maps them to available tokens.

Yes, design token validation integrates into CI checks to catch hard-coded values automatically. It flags violations during code review stages and prevents non-compliant code from merging, ensuring design system consistency across releases.

The validator identifies violations in Colors, Typography, Spacing, Radius, and Shadows. It matches hard-coded values in these categories against your tokens.json and recommends the corresponding token replacements.

Using official design tokens ensures design consistency across your codebase and simplifies maintenance. When design specs change, update tokens once rather than hunting through hundreds of files for scattered hard-coded values.