Design Token Import
Upload a DTCG JSON token file, Tailwind config (.js/.cjs/.mjs), CSS custom properties, or a .zip of any combination to seed a new design spec.
Drop files here or click to browse
DTCG JSON · CSS variables · Tailwind config (.js/.cjs/.mjs) · ZIP
Accepted formats
- tokens.json — W3C DTCG format with
$value/$typefields - 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
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.