Take every style value from design tokens

How to do it

Keep the tokens in one source file, such as the Design Tokens Format Module 2025.10. It is a stable Final Community Group Report from October 2025, not a W3C Standard. Generate CSS custom properties from it with a tool such as Style Dictionary or Terrazzo. Components read only var(--…) values. The colour tokens rule covers light and dark themes. Add a lint rule, so a raw value fails the build. Media queries can't read custom properties, so @media lines may hold widths.

Example

// stylelint.config.js
export default {
  plugins: ['stylelint-declaration-strict-value'],
  rules: {
    'color-no-hex': true,
    'scale-unlimited/declaration-strict-value': [
      ['/color$/', 'fill', 'stroke', 'z-index', 'font-size', 'border-radius', 'box-shadow', '/^(margin|padding|gap)/'],
      { ignoreValues: ['inherit', 'currentColor', 'transparent', '0', 'auto'] },
    ],
  },
  overrides: [{ files: ['src/tokens/**/*.css'], rules: { 'color-no-hex': null, 'scale-unlimited/declaration-strict-value': null } }],
};

import pathlib
import re
import sys

RAW_VALUE = re.compile(r"#[0-9a-fA-F]{3,8}\b|\brgba?\(|\bz-index:\s*\d|\b\d+px\b")
TOKEN_DIR = pathlib.Path("src/tokens")

problems = [
    f"{path}:{number}: {line.strip()}"
    for path in pathlib.Path("src").rglob("*.css")
    if TOKEN_DIR not in path.parents
    for number, line in enumerate(path.read_text().splitlines(), 1)
    if RAW_VALUE.search(line) and not line.lstrip().startswith("@media")
]
print("\n".join(problems) or "no raw style values")
sys.exit(1 if problems else 0)

How to check

The style linter fails on a hex colour, rgb(), a pixel size or a z-index number written outside the token files. Run it on a branch with one such value added, and it fails.