---
title: "Name tokens by purpose · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/styles-and-components/purpose-tokens
updated: 2026-10-20
licence: "All rights reserved"
---

# Name tokens by purpose

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

- Level: Recommended
- Chapter: [Styles and components](https://agentwranglers.se/playbook/app-ui/styles-and-components)
- Rule: Give components tokens named by purpose, such as `color-danger` or `space-section`, which point to a base palette. Components never use the base palette directly.
- How: Keep two layers. The base layer holds the raw scale, such as `blue-600` or `space-4`. The purpose layer holds aliases, such as `color-action` pointing to `blue-600`. A theme or a second brand then changes the aliases only. Write aliases in the token file with curly braces, as the token format defines.
- Check: Search the component folder for base token names, such as `--blue-` or `--space-4`. There are no matches.

Example:

```json
{
  "blue": { "600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.14, 0.28, 0.84] } } },
  "red": { "600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.78, 0.14, 0.17] } } },
  "color": {
    "action": { "$type": "color", "$value": "{blue.600}" },
    "danger": { "$type": "color", "$value": "{red.600}" }
  }
}
```

**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/purpose-tokens`.

- Previous: [Take every style value from design tokens](https://agentwranglers.se/playbook/app-ui/styles-and-components/design-tokens)
- Next: [Build each control once](https://agentwranglers.se/playbook/app-ui/styles-and-components/shared-components)
- [Styles and components](https://agentwranglers.se/playbook/app-ui/styles-and-components)