Design token generator
Generate structured design tokens — primitives and semantic roles for light and dark themes — as DTCG-style JSON or CSS variables.
Generate structured design tokens — a primitive brand scale plus semantic roles for light and dark themes — and export them as DTCG-style JSON or plain CSS custom properties.
Semantic tokens map roles like background, surface and primary to primitives, so retheming means swapping one mapping instead of hunting hard-coded hex values. Save a system to your account to regenerate it later, with version snapshots.
design-tokens.json
{
"$description": "Design system #47003A design tokens — generated by ChromaBrew from #47003a",
"$generator": {
"name": "Design system #47003A",
"version": "1.2.0",
"strategy": "analogous"
},
"primitive": {
"color": {
"brand": {
"50": {
"$type": "color",
"$value": "#fff4fb"
},
"100": {
"$type": "color",
"$value": "#ffe4f6"
},
"200": {
"$type": "color",
"$value": "#ffcdef"
},
"300": {
"$type": "color",
"$value": "#f5b4e2"
},
"400": {
"$type": "color",
"$value": "#e097cb"
},
"500": {
"$type": "color",
"$value": "#c87cb3"
},
"600": {
"$type": "color",
"$value": "#b0639b"
},
"700": {
"$type": "color",
"$value": "#934b81"
},
"800": {
"$type": "color",
"$value": "#773867"
},
"900": {
"$type": "color",
"$value": "#5e2750"
},
"950": {
"$type": "color",
"$value": "#47003a",
"$description": "Original source colour"
}
},
"palette": {
"analogous-30-": {
"$type": "color",
"$value": "#4e001c",
"$description": "analogous - Analogous +30°"
},
"primary": {
"$type": "color",
"$value": "#47003a",
"$description": "analogous - Primary"
},
"analogous-30-2": {
"$type": "color",
"$value": "#6d1831",
"$description": "analogous - Analogous +30° 2"
},
"primary-2": {
"$type": "color",
"$value": "#621d52",
"$description": "analogous - Primary 2"
}
}
},
"typography": {
"fontFamily": {
"sans": {
"$type": "fontFamily",
"$value": [
"ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace"
]
}
},
"fontSize": {
"xs": {
"size": {
"$type": "dimension",
"$value": "0.64rem"
},
"line-height": {
"$type": "number",
"$value": 1.45
},
"letter-spacing": {
"$type": "dimension",
"$value": "0em"
}
},
"sm": {
"size": {
"$type": "dimension",
"$value": "0.8rem"
},
"line-height": {
"$type": "number",
"$value": 1.45
},
"letter-spacing": {
"$type": "dimension",
"$value": "0em"
}
},
"base": {
"size": {
"$type": "dimension",
"$value": "1rem"
},
"line-height": {
"$type": "number",
"$value": 1.5
},
"letter-spacing": {
"$type": "dimension",
"$value": "0em"
}
},
"lg": {
"size": {
"$type": "dimension",
"$value": "1.25rem"
},
"line-height": {
"$type": "number",
"$value": 1.4
},
"letter-spacing": {
"$type": "dimension",
"$value": "0em"
}
},
"xl": {
"size": {
"$type": "dimension",
"$value": "1.563rem"
},
"line-height": {
"$type": "number",
"$value": 1.3
},
"letter-spacing": {
"$type": "dimension",
"$value": "-0.01em"
}
},
"2xl": {
"size": {
"$type": "dimension",
"$value": "1.953rem"
},
"line-height": {
"$type": "number",
"$value": 1.15
},
"letter-spacing": {
"$type": "dimension",
"$value": "-0.02em"
}
},
"3xl": {
"size": {
"$type": "dimension",
"$value": "2.441rem"
},
"line-height": {
"$type": "number",
"$value": 1.15
},
"letter-spacing": {
"$type": "dimension",
"$value": "-0.02em"
}
},
"4xl": {
"size": {
"$type": "dimension",
"$value": "3.052rem"
},
"line-height": {
"$type": "number",
"$value": 1.15
},
"letter-spacing": {
"$type": "dimension",
"$value": "-0.02em"
}
},
"5xl": {
"size": {
"$type": "dimension",
"$value": "3.815rem"
},
"line-height": {
"$type": "number",
"$value": 1.15
},
"letter-spacing": {
"$type": "dimension",
"$value": "-0.02em"
}
}
}
},
"spacing": {
"2": {
"$type": "dimension",
"$value": "0.125rem"
},
"4": {
"$type": "dimension",
"$value": "0.25rem"
},
"6": {
"$type": "dimension",
"$value": "0.375rem"
},
"8": {
"$type": "dimension",
"$value": "0.5rem"
},
"10": {
"$type": "dimension",
"$value": "0.625rem"
},
"12": {
"$type": "dimension",
"$value": "0.75rem"
},
"16": {
"$type": "dimension",
"$value": "1rem"
},
"20": {
"$type": "dimension",
"$value": "1.25rem"
},
"24": {
"$type": "dimension",
"$value": "1.5rem"
},
"32": {
"$type": "dimension",
"$value": "2rem"
},
"40": {
"$type": "dimension",
"$value": "2.5rem"
},
"48": {
"$type": "dimension",
"$value": "3rem"
},
"64": {
"$type": "dimension",
"$value": "4rem"
},
"80": {
"$type": "dimension",
"$value": "5rem"
},
"96": {
"$type": "dimension",
"$value": "6rem"
}
},
"radius": {
"sm": {
"$type": "dimension",
"$value": "0.25rem"
},
"md": {
"$type": "dimension",
"$value": "0.5rem"
},
"lg": {
"$type": "dimension",
"$value": "0.75rem"
},
"xl": {
"$type": "dimension",
"$value": "1rem"
},
"full": {
"$type": "dimension",
"$value": "9999px"
}
},
"shadow": {
"sm": {
"$type": "shadow",
"$value": {
"offsetX": {
"$type": "dimension",
"$value": "1px"
},
"offsetY": {
"$type": "dimension",
"$value": "2px"
},
"blur": {
"$type": "dimension",
"$value": "0px"
},
"color": "rgb(0 0 / 1)",
"css": "0 1px 2px 0 rgb(0 0 / 0.05)"
}
},
"md": {
"$type": "shadow",
"$value": {
"offsetX": {
"$type": "dimension",
"$value": "2px"
},
"offsetY": {
"$type": "dimension",
"$value": "4px"
},
"blur": {
"$type": "dimension",
"$value": "-1px"
},
"color": "rgb(0 0 / 1)",
"css": "0 2px 4px -1px rgb(0 0 / 0.06), 0 4px 10px -2px rgb(0 0 / 0.07)"
}
},
"lg": {
"$type": "shadow",
"$value": {
"offsetX": {
"$type": "dimension",
"$value": "4px"
},
"offsetY": {
"$type": "dimension",
"$value": "8px"
},
"blur": {
"$type": "dimension",
"$value": "-2px"
},
"color": "rgb(0 0 / 1)",
"css": "0 4px 8px -2px rgb(0 0 / 0.08), 0 12px 24px -6px rgb(0 0 / 0.1)"
}
},
"xl": {
"$type": "shadow",
"$value": {
"offsetX": {
"$type": "dimension",
"$value": "8px"
},
"offsetY": {
"$type": "dimension",
"$value": "16px"
},
"blur": {
"$type": "dimension",
"$value": "-4px"
},
"color": "rgb(0 0 / 1)",
"css": "0 8px 16px -4px rgb(0 0 / 0.1), 0 24px 48px -12px rgb(0 0 / 0.14)"
}
}
}
},
"semantic": {
"light": {
"background": {
"$type": "color",
"$value": "#fffcfe"
},
"background-subtle": {
"$type": "color",
"$value": "#faf1f7"
},
"surface": {
"$type": "color",
"$value": "#fffdfe"
},
"surface-raised": {
"$type": "color",
"$value": "#ffffff"
},
"surface-muted": {
"$type": "color",
"$value": "#fcf3f9"
},
"foreground": {
"$type": "color",
"$value": "#1b0e17"
},
"foreground-muted": {
"$type": "color",
"$value": "#584a53"
},
"foreground-subtle": {
"$type": "color",
"$value": "#7e727a"
},
"primary": {
"$type": "color",
"$value": "#47003a"
},
"primary-hover": {
"$type": "color",
"$value": "#38002d"
},
"primary-active": {
"$type": "color",
"$value": "#290021"
},
"primary-foreground": {
"$type": "color",
"$value": "#ffffff"
},
"secondary": {
"$type": "color",
"$value": "#bd71a8"
},
"secondary-hover": {
"$type": "color",
"$value": "#aa6096"
},
"secondary-foreground": {
"$type": "color",
"$value": "#1d141a"
},
"accent": {
"$type": "color",
"$value": "#73263a"
},
"accent-foreground": {
"$type": "color",
"$value": "#ffffff"
},
"border": {
"$type": "color",
"$value": "#e4dbe1"
},
"border-muted": {
"$type": "color",
"$value": "#ebe4e8"
},
"border-strong": {
"$type": "color",
"$value": "#cabfc6"
},
"input": {
"$type": "color",
"$value": "#ffffff"
},
"input-border": {
"$type": "color",
"$value": "#e4dbe1"
},
"focus-ring": {
"$type": "color",
"$value": "#47003a"
},
"success": {
"$type": "color",
"$value": "#2b9338"
},
"success-foreground": {
"$type": "color",
"$value": "#1d141a"
},
"warning": {
"$type": "color",
"$value": "#ebb213"
},
"warning-foreground": {
"$type": "color",
"$value": "#1d141a"
},
"danger": {
"$type": "color",
"$value": "#c94c49"
},
"danger-foreground": {
"$type": "color",
"$value": "#ffffff"
},
"info": {
"$type": "color",
"$value": "#007cc2"
},
"info-foreground": {
"$type": "color",
"$value": "#ffffff"
}
},
"dark": {
"background": {
"$type": "color",
"$value": "#0e090c"
},
"background-subtle": {
"$type": "color",
"$value": "#150f13"
},
"surface": {
"$type": "color",
"$value": "#191317"
},
"surface-raised": {
"$type": "color",
"$value": "#201a1e"
},
"surface-muted": {
"$type": "color",
"$value": "#130e11"
},
"foreground": {
"$type": "color",
"$value": "#f3e9f0"
},
"foreground-muted": {
"$type": "color",
"$value": "#aaa2a7"
},
"foreground-subtle": {
"$type": "color",
"$value": "#797377"
},
"primary": {
"$type": "color",
"$value": "#b0639b"
},
"primary-hover": {
"$type": "color",
"$value": "#c072ab"
},
"primary-active": {
"$type": "color",
"$value": "#a65a92"
},
"primary-foreground": {
"$type": "color",
"$value": "#130c11"
},
"secondary": {
"$type": "color",
"$value": "#561147"
},
"secondary-hover": {
"$type": "color",
"$value": "#682358"
},
"secondary-foreground": {
"$type": "color",
"$value": "#f5e6f0"
},
"accent": {
"$type": "color",
"$value": "#b96576"
},
"accent-foreground": {
"$type": "color",
"$value": "#130c11"
},
"border": {
"$type": "color",
"$value": "#322c30"
},
"border-muted": {
"$type": "color",
"$value": "#282326"
},
"border-strong": {
"$type": "color",
"$value": "#4a4348"
},
"input": {
"$type": "color",
"$value": "#191317"
},
"input-border": {
"$type": "color",
"$value": "#322c30"
},
"focus-ring": {
"$type": "color",
"$value": "#b0639b"
},
"success": {
"$type": "color",
"$value": "#6bc670"
},
"success-foreground": {
"$type": "color",
"$value": "#130c11"
},
"warning": {
"$type": "color",
"$value": "#f0bb3b"
},
"warning-foreground": {
"$type": "color",
"$value": "#130c11"
},
"danger": {
"$type": "color",
"$value": "#ff847d"
},
"danger-foreground": {
"$type": "color",
"$value": "#130c11"
},
"info": {
"$type": "color",
"$value": "#59b6ff"
},
"info-foreground": {
"$type": "color",
"$value": "#130c11"
}
}
}
}Want the full design system from a color? Open the color palette generator to create accessible palettes, semantic tokens, light and dark themes, and production-ready CSS — all from a single color.
How to use this tool
- Enter your brand color.
- The generator produces DTCG-style JSON with a primitive brand scale, palette roles and full semantic token sets for light and dark themes.
- Copy the JSON into your token pipeline or design tools that support the format.
Frequently asked questions
- What's the difference between primitive and semantic tokens?
- Primitives are the raw scale (brand-500, gray-100); semantic tokens map roles to primitives (background, button-primary). Components consume semantics, so retheming means swapping mappings, not hunting hard-coded values.
- Which export formats are supported?
- DTCG-style JSON for design tools and token pipelines, plus plain CSS custom properties for direct use. Both cover light and dark themes.
- Can I version or regenerate tokens later?
- Yes — save a system to your account and regenerate any time; every save keeps a version snapshot you can roll back to.
Related tools
Related guides
Color theory · 21 Aug 2026
HEX vs HSL vs OKLCH: which color space should you use?
Three color spaces, three jobs. Here's what HEX, HSL and OKLCH actually are and when each earns its place.
Design systems · 18 Aug 2026
Dark mode the right way: don't just invert your colors
Dark mode isn't light mode with darker colors. Here's the semantic-token approach that actually looks good and passes contrast.
Design systems · 27 Aug 2026
Build a typography scale that actually keeps its rhythm
A type scale is more than a list of font sizes. Here's how to build one with a ratio, pair it well, and keep vertical rhythm across breakpoints.
Design token generator runs entirely in your browser — nothing you enter is sent to a server.