Token architecture

Format

Tokens follow the W3C Design Tokens format (2025.10): each token has a $type and a $value, and references use the {group.token} syntax.

Example

{
  "semantic": { "light": { "color": { "action": { "primary": {
    "$type": "color", "$value": "{primitive.teal.600}"
  } } } } }
}

CSS output

[data-theme="light"] {
  --fl-color-action-primary: #0F766E;
  --fl-radius-control: 10px;
}

The prefix (here --fl-) is set in Setup step 3.