Design tokens are platform‑agnostic variables that store design decisions such as colours, typography, spacing and radii. By centralising these values, you can create consistent and maintainable design systems across multiple platforms (web, mobile, desktop).
A typical token looks like this:
{
"color": {
"primary": { "value": "#0d6efd" },
"secondary": { "value": "#6c757d" }
},
"font": {
"base": { "value": "16px" }
}
}
Use our Design Token Converter to transform JSON tokens into CSS custom properties, SCSS maps or Tailwind configuration files.