We’re happy to announce Style Guide Guide, Gatsby Edition! You can check out the demo here. The workshop and the storefront There are lots of moving parts, tools, and environments involved in making a design systems take shape. We’ve found it helpful to break down two important environments of a design system into the “workshop” and the “storefront”. The “workshop” is the environment designed for

A while back, Harry Roberts introduced the concept of shame.css: a stylesheet dedicated to housing your nasty, hacky, quick-fix CSS The idea is to isolate all the stuff that doesn’t belong in your beautiful, well-architected CSS architecture, in order to revisit it when the team has time to refactor code and create more sturdy solutions. Application-specific components At the heart of a design sys

There are many facets of a design system initiative, so it can be extremely daunting to figure out where to begin. There are stakeholders to educate, tools to choose, principles to establish, frontend guidelines to settle on, components to build, tokens to create, design guidelines to write, contribution models to sort out, and so on. In my workshops and consulting engagements, I’ll often have tea

I wrote a post where I talk about how a set of components living inside static design tools like Sketch isn’t itself a design system. Pardon my clickbait. Perhaps a better title would have been “Your Sketch library is not a(n entire) design system.” No doubt tools like Sketch are super valuable, and having a set of reusable components inside them helps design teams establish thoughtful and consist

TL;DR: Design systems + CSS Zen Garden = Awesome. Is it possible to create a single design system that powers wildly different-looking brands and experiences? The answer is yes! But why would you want to? Different audiences and contexts – The team at GE recently discussed the opportunities and challenges of sending their Predix design system to different audiences within their gigantic, diverse o

You can write words explaining how to properly use a toaster, draw pictures of toasters, and even create more efficient ways to draw pictures of toasters. But at the end of the day, if you don’t have a functioning toaster, all that effort is for naught. In my design system workshops at design conferences, I’ll ask attendees where they are in their design system journey. Most hands go up when I ask