Linting & Guardrails: Preventing Token Bypass

Creating design tokens does nothing if developers hardcode #3b82f6 or padding: 14px directly in CSS files.

Design system teams enforce ESLint and Stylelint rules:

• stylelint-declaration-strict-value: Blocks raw hex colors, pixel values, and font-families, requiring token variables.
• eslint-plugin-jsx-a11y: Enforces accessible names on icon buttons.

If a developer writes color: #ff0000;, CI fails immediately with: 'Error: Direct hex colors forbidden. Use var(--color-feedback-error) instead.'