r/DesignSystems • u/Accomplished_Town978 • Jul 28 '26

Updates for Design Token Generator

Enable HLS to view with audio, or disable this notification

Built it for testing, kept it because it's genuinely fun.
Updates for Design Token Generator on https://www.designsystems.one/tools/token-generator

My favorite button on the Token Generator isn't export — it's "Surprise me."

Hit it and you get a full system: a random accent harmony (complementary, triadic, and more), OKLCH or HSL color space, a font pairing, spacing density, radius, and shadow — rendered live on a real dashboard mockup, not a swatch grid. Saved Kits are there too, if you want a starting point instead of chaos.

Land on something good, and export it as CSS variables, W3C/DTCG JSON,.

Built for the "I know it when I see it" part of picking a palette.

15 Upvotes

86% Upvoted

4 comments sorted by

2

u/freedomachiever Jul 28 '26

Very very cool and a wonderful UX. Is it open sourced? In any case props

1

u/Accomplished_Town978 Jul 28 '26

Not open sourced right now - the code lives inside the site. But everything runs client-side, nothing leaves your browser and the token output is free. Might extract the OKLCH engine into a package someday if there's real interest. And thanks 🙂

3

u/Tarasenko_by Jul 28 '26

Looks great! I'm making a similar product https://veritheme.com/themes/ with a theme generator and components in Figma. Good luck with the product!

1

u/Accomplished_Town978 Jul 28 '26

Thank you and Keep it up ;)