Central design variables for consistency across every platform.
Design tokens capture fundamental design decisions like colours, spacing, font sizes and radii as named variables in a single place. Instead of hard-coding a colour in dozens of spots, everything points to the same token, so one change flows through automatically. Their real power lies in being a shared source of truth between design and code, often across several platforms. That is precisely why an open format is emerging, so tools can exchange tokens without loss.
More in the documentationWe define your brand once as a set of tokens and feed both Figma and Tailwind from it, so design and implementation are guaranteed to speak the same values. If you need a dark mode or several themes, we swap only the token values and the rest follows on its own. A rebrand becomes a handful of changed variables instead of a search across the entire codebase.
{
"color": {
"brand": { "$value": "#0a84ff", "$type": "color" },
"surface": { "$value": "{color.brand}", "$type": "color" }
}
}Good to know
The trick is layering: raw values as a base and semantic tokens on top, such as color-surface instead of grey-100. That way you describe meaning rather than appearance, and a theme switch or rebrand stays a matter of minutes.
More tools we work with in the same area.
You don't have to decide that, it's our job. Tell us about your plans.