
Show HN: Design System Playground - johnpolacek
https://design-system-playground.netlify.com/
======
johnpolacek
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.

------
tjwds
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!

~~~
sdrothrock
This is completely off-topic, but if you're not from Philly, where are you
from? I see "jawn" so rarely online that I can't help but be curious. :)

------
marapuru
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).

