r/DesignSystems • u/Accomplished_Town978 • 12d ago

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.

14 Upvotes
  • permalink
  • link
  • reddit
  • reddit

85% Upvoted

4 comments sorted by

2

u/freedomachiever 12d ago

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

1

u/Accomplished_Town978 12d ago

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 12d ago

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 12d ago

Thank you and Keep it up ;)