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 / $type fields
tailwind.config.js — Tailwind v3 config with theme.colors or theme.extend.colors
tokens.css — CSS custom properties (--color-*: #hex) or Tailwind v4 @theme block
tokens.zip — Archive containing any combination of the above

After import, your color tokens seed a new Design Spec where you can add typography, spacing, and components.

Other tools