---
title: "Take every style value from design tokens · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/styles-and-components/design-tokens
updated: 2026-10-20
licence: "All rights reserved"
---

# Take every style value from design tokens

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Styles and components](https://agentwranglers.se/playbook/app-ui/styles-and-components)
- Rule: Take every colour, space, font size, radius, shadow, duration and layer order from a named design token. Never write a raw value in a component.
- How: 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](https://agentwranglers.se/playbook/website/interface/colour-as-tokens) 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.
- 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.

Example:

```js
// 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 } }],
};
```

```python
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)
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/styles-and-components/design-tokens`.

- Next: [Name tokens by purpose](https://agentwranglers.se/playbook/app-ui/styles-and-components/purpose-tokens)
- [Styles and components](https://agentwranglers.se/playbook/app-ui/styles-and-components)