Building a Design System Playground
Like many others, I’ve been thinking about design systems lately. Especially after reading Unified Styling Language.
If you ignore the debates around CSS class naming and CSS-in-JS, the essential differences across the possible permutations of CSS styles break down to 3 things: layout, colors and typography.
When building a design system, you reduce infinite property combo possibilities into a system of related values — spacing units, color scheme, type scale, etc. Commonly referred to as a “theme”, this system is a core part of any well designed product.
When translated into data, themes share a common structure. This is evident when you look at files like these:
Theme organization becomes even more clear when you separate layout from typography and colors. In practice, you can use an existing grid library or more recently CSS Grid to create structure, and a design theme to define how the content inside should look.
I built this Design System Playground project to experiment with this concept. The idea is you update stateful theme data which controls typography and colors.
I am not the first one to do this of course (see here and here and here and here and here), but it has been a great way to try out new front end tools and frameworks.
For this project, I chose to use Rebass which is built on top of Styled Components. I found myself fighting against some of the choices made in the primitives, but that’s okay. Rebass is really, really cool and opened my eyes to a lot of possibilities (also see styled-system).
There are many open source projects that give us powerful tools to build out design systems from configurable themes. For example:
A scary/exciting thing going on right now is that no one can agree on the right way to build a website.
No matter their experience, many web developers have a hard time figuring it out even for themselves. As soon as we land on a thing we like, it changes. Or there’s a new thing. Or many new things.
Best not to worry too much. Just keep building stuff.
Check out my design system playground experiment at http://johnpolacek.github.io/design-system-playground/
