Hi there Hunters! 🤘

Please welcome my new project - Design Tokens Generator 👑😈🎨👽! The name speaks for itself for the most part, but as usual, there's more to the name...

Here's the idea in a nutshell - have a ready-to-use design system foundation for our small to mid-scale projects, streamline the scaffolding and work on UI faster without substantial design expertise.

👑 Design tokens in the form of CSS variables pierce the app through and tie designs together. You can configure the global and local naming of the variables, however the core of the naming remains the same for easier work. 😈 You probably tried a couple of open-source design tokens solution, but for the most part they are either too generic and complex or too specific and limiting for your goals. Design Tokens Generator tokens collection and naming model deals with those issues and beyond that! 🎨 Design tokens controls and options allow multiple configurations to find your style, even when you don't have designs ready - interactive kitchen sink preview allows to visually debug the edge cases in mere seconds. 👽 Using preview is vital when you are looking for a perfect typography display. Type scale, which is included in the tooling, along with icon size, line-height and root size control options provide the necessary flexibility and variety.

Application controls allow to copy and export all generated tokens ready for implementation in your projects. And here's the best part - the more you work with these tokens, the less time you spend on a next project! 🔥

If you feel adventurous, jump right into it and tweak everything - reset to defaults is easy and momentary. If you stuck on a control - use the interactive tooltips or read the full guide on the Concept page. It's a long one, but it's worth it 😄

I have further plans for creating tutorials for integrating with various headless (and not so much) UI frameworks (Headless UI, Radix, MUI etc), as I've been developing in a similar way for a while already. Bookmark the app and enjoy! 🚀