validating-design-tokens

To find hard-coded values in CSS, scan your project to detect violations against approved design tokens. This process identifies raw colors, spacing, and typography values, generating reports with severity levels and remediation guidance to replace them with standard variables.

Design token enforcement is the process of ensuring components use approved CSS variables and TS/JS token objects instead of raw values. It prevents design debt by catching unauthorized hard-coded colors and spacing during development, maintaining strict visual consistency across large frontend codebases.

Yes, you can validate design tokens from Style Dictionary outputs, CSS variables, and TS/JS token objects. The validation scans these definitions to detect hard-coded values across your frontend project and generates token-based fixes to ensure compliance.

To migrate hard-coded spacing and typography to design tokens, run a project scan to identify violations. The scan reports unauthorized values and generates token-based fixes, providing specific remediation guidance to replace raw values with approved variables.

Yes, design token linting works with standard CSS variables like --color-* formats. It scans these definitions alongside TS/JS objects and Style Dictionary outputs to detect hard-coded values and enforce consistent usage across your components.