Primitive（基本値）
The raw palette, spacing steps, font sizes, radii, and motion values.
devs Tools / Design System 1.0.0
Design Token Studio: Build, validate, and export design tokens
Manage color, type, spacing, radius, shadow, and motion as semantic design tokens, validate light and dark modes, and export six implementation formats.
devs Design Token Studio is a free local-first tool for managing design decisions as reusable tokens, validating light and dark modes, and exporting the same system to six implementation formats.
- Your project stays in this browser
- 116 reference tokens and two modes
- Six deterministic export adapters
Loading the local design-system workspace…
Why tokens
Change a decision once, then reuse it everywhere
A design token gives a reusable name to a design decision. Components refer to the name instead of repeating a raw color or size, so a brand update or dark-mode change does not require editing every component.
Semantic（意味）
Role-based names such as primary text, canvas background, and primary action.
Component（部品）
Contracts for a specific part and state, such as a primary button background.
Resolver
Light and dark values without broken aliases
Resolve each semantic role against the light source and record the complete reference chain.
Keep token paths stable while resolving dark overrides and explicit base fallbacks.
Detect missing aliases, cycles, type mismatches, normalized-name collisions, contrast failures, and export losses.
Platform exports
One project, six implementation formats
| Format | Best for | Output policy |
|---|---|---|
| DTCG JSON | Canonical exchange | Keeps aliases and supported extensions. |
| CSS Variables | Web・WordPress | Emits :root and dark overrides. |
| SCSS | Sass project | Creates stable flat variable names. |
| Tailwind CSS | Tailwind v4 | Separates @theme foundations from semantic CSS. |
| WordPress theme.json | Gutenberg・Block theme | Generates version 3 and reports unsupported mappings. |
| Style Dictionary | Build pipeline | Generates a reproducible v4 configuration. |
Loss report means conversion-loss report. Values that a target format cannot represent are reported instead of being silently discarded.
WordPress
How to use the generated theme.json safely
- 1
Back up the active theme
Keep the current theme.json and CSS before replacing or merging files.
- 2
Review palette and losses
Only approved primitive colors are exposed to the editor. Motion and component tokens may require CSS.
- 3
Merge for the target version
Use theme.json version 3 on WordPress 6.6 or later, clear caches, and verify the Site Editor.
Glossary
Terms used in Design Token Studio
- Design token（デザイントークン）
- A named, reusable design decision such as a color, size, or motion duration.
- Alias（エイリアス／参照）
- A token value that points to another token instead of storing a second literal.
- Resolver（リゾルバー／値の解決処理）
- The process that follows aliases and mode sources to produce the current value and source trace.
- DTCG
- The Design Tokens Community Group format used as the exchange model.
- Contrast ratio（コントラスト比）
- A numeric measure of the difference between foreground and background colors.
- Mode（モード）
- A context such as light or dark that can resolve the same token name to a different value.
Limits
What this version does not do
- No account, cloud sync, collaboration, or server-side project storage.
- No Figma two-way synchronization or arbitrary external URL import.
- Passing validation does not guarantee every brand or accessibility requirement.
FAQ
Before you start
Is my project uploaded?
No. Editing, resolving, validation, and export run in this browser. The project is stored locally only when your browser permits it.
Can I use only the CSS output?
Yes. CSS Variables can be used independently, including light and dark overrides.
Why does WordPress show losses?
theme.json cannot represent every motion or composite token as a standard preset. The tool reports those mappings and keeps the required CSS work visible.