Name tokens by purpose

How to do it

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.

Example

{
  "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}" }
  }
}

How to check

Search the component folder for base token names, such as --blue- or --space-4. There are no matches.