Color Token Exporter

Prefixing prevents collisions and makes intent clear. --color-primary reads better than --primary when you also have spacing tokens, radius tokens, etc. For Tailwind, the tokens always go under extend.colors (the only key Tailwind builds colour utilities from), and the prefix becomes a nested group there: prefix brand gives bg-brand-primary. Leave the prefix empty for plain bg-primary.

Close. It uses { value, type: 'color' } per token, which matches the Design Tokens Community Group draft. For strict W3C compliance you may need to nest tokens under a group object — but most tools (Style Dictionary, Specify, Cobalt) handle the flat shape fine and run their own transformations.

Make one place authoritative and generate the rest from it. The moment a colour is edited in two formats by hand, they drift, and the drift is invisible until someone screenshots two surfaces side by side. Keep the source palette in version control, regenerate the platform files as a build step, and treat a hand-edited export as a bug rather than a shortcut.

After their role, not their appearance, wherever a theme might change: a token called blue-500 becomes a lie the moment dark mode makes it lighter, while surface or accent survives. Literal colour names are fine as the underlying palette, with the role tokens pointing at them — that indirection is what lets a theme swap without renaming anything.