When it comes to design systems, there are countless resources that teach you how to “build” a design system. Today, let’s take a look at how to “break” one.

Why breaking

This might be a dilemma between UX and UI. In the name of “using common design patterns and reducing the learning curve”, we have seen many generic, cookie-cutter products.

In the article How to (properly) break your design system, Fabricio Teixeira pointed out that scaling is both a blessing and a curse:

It’s not uncommon to see digital products that get so strict about following existing patterns that they struggle to differentiate from one another. It works, and people use it — but it feels like such an untapped opportunity.
​
The system is so well established and so rigid that sometimes it’s hard to break the rules and play outside of those frames.

How to break

UX Director Yesenia Perez-Cruz has written a book on this particular challenge:

Making a brand feel unified, cohesive, and harmonious while also leaving room for experimentation is a tough balancing art. It’s one of the most challenging aspects of a design system.

The solution provided in the book is an expressive design system that is purpose-built, supporting a range of expressions that designers feel motivated to use rather than constrained by:

Intentional, meaningful divergence is the goal of an expressive design system. In this case, the divergence is meaningful because it solves a very specific user problem that no existing pattern solves.

Being intentional is the key here. Any deviation should be backed by good reasoning. Designer Eric Chung has summarized occasions and reasons that you might consider before breaking the design system.