Open Source Design Token Management
Design tokens are the single source of truth for a design system — colors, typography, spacing, shadows, radii. Yet managing them is fragmented:
- Tokens Studio for Figma is closed-source and requires a paid subscription
- Style Dictionary (Amazon) is powerful but CLI-only — designers can't use it
- Custom JSON / YAML means every team builds their own bespoke pipeline
Design Token Studio is the missing graphical UI on top of the W3C Design Token standard. Define tokens visually, preview them in real-time, check accessibility compliance, and export to any framework — all in the browser.
The tokens/ directory contains ready-to-use token exports. No build step required.
/* Light + dark theme, 13 colors, 6 type styles, 8 spacing, 4 shadows, 4 radii */
@import 'tokens/default-colors.css';tokens/default-colors.css — Usage: color: var(--color-primary); font: var(--font-body); padding: var(--spacing-md);
{
"color": {
"primary": { "$type": "color", "$value": { "light": "#6366f1", "dark": "#818cf8" } }
},
"typography": {
"body": { "$type": "typography", "$value": { "fontFamily": "Inter", "fontSize": "1rem" } }
}
}tokens/default-theme.json — W3C DTCG format. Compatible with Figma Tokens Studio, Style Dictionary, Theo, Diez, and any DTCG-compliant parser.
import tokens from './tokens/default-tailwind'
export default tokenstokens/default-tailwind.ts — Standalone Tailwind config with colors, fontSize, spacing, boxShadow, and borderRadius extensions.
| Brand Wizard | Enter one hex code → get a full 11-stop tonal scale (50–950) |
| Semantic Colors | 13 tokens with light/dark pairs: primary, surface, text, border, success, warning, error, info |
| Image Extraction | Upload a brand image → auto-detect the top 5 dominant colors |
| Typography Editor | Tabular editor for 6-level type scale (h1–caption) — all CSS text properties inline-editable |
| Spacing System | xs–4xl spacing scale with visual preview |
| Shadow Elevations | sm/md/lg/xl shadows with live preview boxes |
| Border Radius | Visual swatches showing each radius value |
| Contrast Checker | WCAG 2.x ratio with real-time AA/AAA PASS/FAIL badges |
| CVD Simulation | Color vision deficiency preview (protanopia, deuteranopia, tritanopia, achromatopsia) |
| Palette Audit | Full table of contrast ratios for all text-on-background pairs |
| 6 Export Formats | CSS Variables, Tailwind Config, SCSS, W3C JSON, SwiftUI Colors, Flutter ThemeData |
| Dark Mode | System-aware + manual toggle, localStorage persisted |
| i18n | 中文 / English |
| Design Token Studio | Tokens Studio for Figma | Style Dictionary | |
|---|---|---|---|
| License | MIT · Free | Proprietary · $8/mo | Apache 2.0 · Free |
| GUI | Browser · Visual | Figma plugin · Visual | CLI only |
| Token editing | Direct input + sliders | Figma plugin nodes | JSON/YAML files |
| Export | CSS / Tailwind / SCSS / JSON / SwiftUI / Flutter | CSS / JSON / custom | CSS / JSON / custom |
| Accessibility | Built-in WCAG + CVD | Requires plugin | Manual |
| Image extraction | Built-in | No | No |
| Offline | PWA · No server | Requires Figma | Yes |
git clone https://github.com/lov-alt/design-token-studio.git
cd design-token-studio
npm install
npm run dev # http://localhost:5173Or use it instantly at lov-alt.github.io/design-token-studio.
Design Token Studio is part of a five-tool open-source suite for the full design-to-code pipeline:
| Tool | What it does |
|---|---|
| Design Token Studio ← you are here | Define design tokens — colors, typography, spacing — with WCAG checker |
| CSS Visual Toolbox | Visually edit CSS properties (clip-path, gradients, shadows, border-radius) |
| Typography Lab | Content-driven layout generator — 14 archetypes, 8 typographic traditions |
| Motion Token Studio | Design motion tokens — cubic-bezier editor, duration scale, 12 presets |
| Sound Garden | Real-time microphone → generative visual landscape |
React 19 · TypeScript · Vite · Tailwind CSS v4 · React Router · W3C DTCG
MIT © 2026 lov-alt — Use freely, modify freely, distribute freely. Software provided "as is", without warranty of any kind.