Design Token Converter
Convert nested JSON design tokens to CSS custom properties and convert CSS variables back to flat JSON locally in your browser.
Convert design tokens between JSON and CSS variables
Paste nested JSON tokens or CSS custom properties. Conversion happens locally in your browser.
Design token converter for JSON and CSS custom properties
Design tokens give reusable names to visual decisions such as colors, spacing, typography and radii. This converter flattens nested JSON keys into CSS-friendly names so a token like color.primary can become --ds-color-primary.
JSON to CSS conversion rules
Nested object paths are joined with hyphens and primitive values are written as custom-property values. Arrays and complex token schemas are left as string values rather than interpreted as a specific design-system standard. The optional prefix helps avoid collisions with third-party variables.
CSS to JSON is intentionally flat
CSS variable names do not preserve where each hyphen originally represented a hierarchy boundary, so reverse conversion produces a flat JSON object instead of guessing a nested structure. That makes the transformation predictable and avoids silently changing token meaning.
Where this tool fits
Use it when prototyping a design system, moving variables between design/dev handoffs, auditing a theme, or preparing a simple token bundle. Production token pipelines may also include aliases, references, modes, descriptions, type metadata and transformations; review those semantics before replacing a dedicated build tool.