If you just define components, or the so called LEGO bricks, you are not defining a design system. You need to define the glue between these components and you need to consider the compositions instead of the LEGO bricks itself.
If you have a table and you are putting a coat of paint on that table. The paint isn’t the only thing that defines what that table looks like. The structure of it, the types of materials, the types of legs that it has. All of those things come together to define how that table behaves. So we have to think about our brand elements and our components in the same way.
— Yesenia Perez-Cruz, Shopify / Source (YouTube)
Big levers are broad sweeping decisions about how an experience should feel. The small dials are the strongly defined rules with which we can achieve the design decisions. The big levers are what we could name principles and the small dials are definitions with a specific value like: 16px, light font-weight, white background, … The mix of both is what we need for a design system.
— Yesenia Perez-Cruz, Shopify / Source (YouTube)
No matter if your design system should work for different brands or if your product has different characteristics: Create a range for your principles and define where the brand / product / page is located. Even if your product is rather functional and dense, it can still be designed airy on the home page.
When you sort your brand / product / page on a range you have already taken an important step. You haven’t only thought about the product visually, but also about the content. This makes your decisions more credible. And while you have created a range you also lay the foundation for future products that we don’t know yet.
According to Yesenia Perez-Cruz, Shopify / Source (YouTube)
This project uses different classifications on different pages:
According to Yesenia Perez-Cruz, Shopify / Source (YouTube)
With this overview it’s easy to understand why designers can’t be expressive when designing the mobile app. But they can be expressive when they’re designing for social media.
According to Yesenia Perez-Cruz, Shopify / Source (YouTube)
In my opinion, the design principles are often the overlooked part of a design system. Sometimes they may feel too loose and too optional. Principles are definitely the glue for a design system – but while most users just search for the LEGO bricks, we have to serve the principles in an understandable way. I think these Spotify principles go into the right direction. They offer a really understandable translation from principle → design / UX.