Design Token Import
Upload a token file and seed a new design spec. Reads what a Figma export writes — W3C DTCG, Tokens Studio, or a raw Figma Variables payload — plus Tailwind configs (.js/.cjs/.mjs), CSS custom properties, and .zip archives of any combination.
Drop files here or click to browse
Design token JSON · Figma Variables · CSS variables · Tailwind config · ZIP
Accepted formats
- tokens.json — W3C DTCG (
$value/$type) or Tokens Studio's default export (value/type). Both are read. - variables.json — Figma Variables, the raw
/v1/files/:key/variables/localresponse. Alias chains are followed; one mode per collection is read and the result names which. - tailwind.config.js — Tailwind v3 config with
theme.colorsortheme.extend.colors - tokens.css — CSS custom properties (
--color-*: #hex) or Tailwind v4@themeblock - tokens.zip — Archive containing any combination of the above
Coming from Figma?
Figma has no built-in token export, so the file comes out of a Community exporter plugin — Variable Export, Design Token Exporter and Styles & Variables Exporter among them. Which one you used matters less than what it writes: W3C DTCG and Tokens Studio JSON are both read, as is Figma's own Variables payload. Drop the file in and the result names the format it recognised, rather than reporting an unfamiliar file as empty.
Files are read in your browser — nothing is uploaded until you choose to create a design spec.
Your tokens are in. Now put them to work.
Perfect Palette audits an imported system the way it builds a new one — contrast across every pair, color-blindness checks, ramps for what is missing — then exports it back out, including a design.md your coding agent reads as persistent context. Free to start, no account needed — color system tools are Plus, design.md authoring is Pro.