The Tokens are defined in JSON file. To save a token is simple, just start with t1 as the first key and create a new object under that key. Continue in the new object and repeat with t2 until all you reach t5 . So now we have no more sub-tokens to continue the chain with. Just an empty and dangling object.

So for T = color.background.button.hover.default we get this:

{
  "color": { 
  | "background": {
  | | "button": {
  | | | "hover": {
  | | | | "default": {}
  | | | }
  | | }
  | }
  }
}

This is where we want our O to be. Looking at the design token spec and using the correct type we want, we should arrive at something like this:

{
  "$type": "color",
  "$value": "#cdadf0",
  "$description": "use this for primary buttons"
}

Inserting this and adding a JSON Schema Path, to get autocompletion and error detection for our IDE, the final result looks like this:

{
  "$schema": "https://codeberg.org/39zde/euma/raw/branch/main/src/schema/tokens.schema.json",
  "color": {
  | "background": {
  | | "button": {
  | | | "hover": {
  | | | | "default": {
  | | | | | "$type": "color",
  | | | | | "$value": "#cdadf0",
  | | | | | "$description": "use this for primary buttons"
  | | | | }
  | | | }
  | | }
  | }
  }
}

We already got a quick look at the <color> type. Let's take this as an example to take a deeper dive.

Like most types, value with the <color> type are valid, if they pass the test of a Regular Expression (regex) (Read up on what these are here or here ). So if "$type" is "color", then $value must get a positive evaluation from this regex:

Translated, so that a human can understand, this means a $value passes, if it

• begins with #
• followed by 2 characters in a row, part of either a-f or 0-9
• repeat this pattern, so there are in total 3 (min.) or 4 (max.) such duos in a row

If we check this with our example above, this #cdadf0 is indeed a valid color.

Values of some types are compared against a lookup table, but those are the minority. In the end the steps above happen automatically thanks to the the IDE in combination with the JSON Schema.