Design Token Manager
Check token values and the actual reference graph, rather than merely listing names. This tool reads a bounded subset of the DTCG 2025.10 format, follows aliases wrapped in braces, such as path.to.token, and `$ref` JSON Pointers, and reports broken paths, cycles and type mismatches. Apply a separate theme override map, compare final values, and export CSS custom properties plus resolved JSON. It manages existing tokens across types; it does not generate spacing scales or recommend colors.
Key features
- Validate sRGB color, px/rem dimension, number, font family and duration tokens
- Resolve inherited group types, chained aliases and JSON Pointers
- Block missing references, cycles, type mismatches and CSS name collisions
- Compare theme overrides and flag inconsistent override coverage
- Download CSS variables and resolved JSON for base and themes
How to use
- Paste or open a DTCG-style base token JSON file.
- Optionally enter a separate map of theme names to token-path overrides.
- Run the audit to inspect references, values and theme coverage.
- Select each theme to compare its resolved color, dimension and CSS values.
- Copy CSS or download CSS/JSON and test the result in your target app.
Use cases
- Review brand aliases and dark-theme colors in a design system
- Export spacing, font and opacity tokens as CSS variables
- Detect broken references after a token-file refactor
Frequently asked questions
Does this support the full DTCG specification?
No. It supports a bounded 2025.10 subset: sRGB color, px/rem dimension, number, font family, duration, inherited group types, complete-token aliases and `$ref` JSON Pointers. Unsupported groups and composite types are reported instead of guessed.
What format does the theme JSON use?
The theme input is a separate JSON map, not a DTCG-standard field. Put existing token paths and new raw values under each theme name; see the dark example. Aliases are also supported.
Is a token missing from a theme an error?
It falls back to the base value. If another theme overrides that path, the tool flags the coverage difference for review.
Are aliases preserved in CSS?
CSS contains each theme's resolved final values. The result table shows input references, while the JSON download is a resolved export rather than an editable source file.
What about other color spaces or composite tokens?
This release exports only three-component sRGB with optional alpha as CSS rgb. Other color spaces and composites such as shadow or typography stop with an explicit error.
Privacy
Token JSON stays in browser memory and is not uploaded to this tool's server. Downloads contain the token names and values you entered.
Comments & questions