Design tokens from a brand guide
Get W3C design tokens, CSS variables, Tailwind and Sass from the brand guide your developers already have.
From guide to tokens
Kitform reads the guide (PDF, InDesign IDML or PowerPoint), lets you confirm the values, and exports them in the formats developers use:
- W3C Design Tokens (DTCG JSON), for Tokens Studio, Style Dictionary and most token pipelines.
- CSS custom properties, with a class per text style.
- Tailwind: a tailwind.config.js theme with colours, fonts, font sizes, spacing and radii.
- Sass: $variables and a @mixin per text style.
The same values become Figma variables and text styles, so design and code start from one source. Semantic roles (text, background, primary, on-primary) are included, not just raw colours.
Free
Token and code exports are free with a Kitform account. Building the Figma library is part of Build or a plan.