Show HN: Design System Playground (opens in new tab)

I created this as a tool for playing around with different font and color combinations then generating a theme object that meets the System UI Theme Specification for creating interoperable UI components (see system-ui.com). The idea is that you can quickly experiment, and then if you come up with something you like, you can take those style properties and use them to make your component libraries or with popular projects like Theme UI, Rebass, Primer, Chakra UI, etc.

This is really, really great! Extremely intuitive and created great results for me.

Here's a few suggestions — please feel free to take them with a grain of salt:

* The "theme" section states: "then use the generated theme in your projects." It might be useful to be more clear that this is formatted for theme-ui on this page by linking to the docs.

* It took a second for the "What body font do you like?" jawn to pop up, so I scrolled down and only scrolled back up because things were moving around on the page.

* I use an admittedly obnoxious color for all of my personal projects (#9604f2) and the utility/extra colors that were provided weren't that great. It might be cool to have each of these colors in the "Here are your colors..." stage have a color picker — as well as when adding your own color.

* I really wish there was a back button instead of just a next button! I picked the wrong body font at first and had to reload the page to go back.

That all being said, I'm going to use the design system that I just generated pretty much immediately!

Great job in building this. I had some trouble wrapping my head around the steps I was making.

Maybe a little more instructions on the side would be a good addition. Maybe start with showing how a finalized Theme looks. (also consider the naming, theme vs design system).