Design Systems 101

A good design system makes shipping ugly stuff impossible.

Designers think about colors, spacing and font-weights.

Developers think about divs, buttons and states.

The design system has to translate between the two.

If designers can’t express themselves within the design system it’s probably too limited.

And if developers are confused between brand-blue-500 and primary-blue-500, then it’s not clear enough.

The biggest difference between useful and messy design systems that I’ve seen are not the token names or the amount of layers it has.

It’s making at least one person that understands both sides (often a Design Engineer), the ultimate responsible for the design system.

PS: I’ve used stereotypes to simplify this message. Please don’t get offended if you’re a designer or developer.