23 Highlights

Style guides and pattern libraries are the most tangible out puts of a design system. Because of this, many teams begin their systems by focusing on UI components. But components alone won’t eliminate inconsistency.

But unity doesn’t guarantee cohesion. Cohesion is the quality that makes your user interfaces easy to understand across the experience.

Unity is easier to accomplish than cohesion, because it can be solved by creating tools: style guides, brand languages, shared components. Cohesion is more complicated because it can’t be solved with a tool alone. In order to create products that feel cohesive, you need to align teams around a shared definition of how your brand should look, feel, and behave.

If you have to choose between building an average experience that only uses reusable components or an excellent experience that requires new or adjusted components, how will you decide? The best way to answer these questions is to listen to your users.

Your products won’t feel cohesive if everyone is working from a different definition of “quality.” To address this, we need to create a shared framework for decision-making.

While shared components and visual styles help teams align on how their brand should look, shared principles help teams align on how their brand should behave.

Have you ever gone into a design critique and heard the feedback, “But that doesn’t feel like us?” The point of creating principles is to codify what it means to create a product that feels like your company. What decisions would your company make that other companies wouldn’t?

Even though component libraries and style guides are the most visible outcomes of a system, it’s important to start with your purpose. A design system that has a solid purpose and principles, even with just a handful of components, will be more cohesive and dynamic than a system with hundreds of components but no shared purpose, principles, or foundation.

A component or pattern is only as good as the guidance that explains how to use it.

Design systems serve many types of users. In order to write effective documentation, figure out who your primary system users are and what they need to understand about using the components.

The downside to an incremental approach is that your products may exist in a limbo period where they rely on a combination of new and old styles.

Space doesn’t speak, but it’s felt throughout our designs. The difference between a design language that feels complete and one that feels random is usually a judicious use of space.

Size, scale, density, and weight are the four levers you can pull to define your design language.

Always design a thing by considering it in its next larger context — a chair in a room, a room in a house, a house in an environment, an environment in a city plan.

Eliel Saarinen

I began to realize that if you made everything the same, it was boring after the first year. If you changed it individually for each play, the theater lost recognizability.

Paula Scher

At the heart of a good design system is a set of solid, flexible components that can be arranged to create cohesive, delightful user interfaces. An effective design system provides components that are robust, resilient, flexible, and adaptable.

Brad Frost

Color is a powerful tool when it comes to theming. But please—vary responsibly and don’t create three hundred customizable values for color.

Design systems don’t need to stifle creativity or limit brand expression. You have a vast array of tools to express brand. Choose the ones that will serve your brand purpose best and focus on turning them into signature patterns.

If you make components that are too large, too inflexible, or too singularly focused, users will end up creating their own patterns.

Patterns stay alive because the people who are using them are also testing them.

Christopher Alexander

It’s impossible to anticipate all of the features your system will need up front. If you’ve set up a clear feedback loop between a systems team and a product team, then you will be able to evolve your system organically. A good feedback loop starts with clear communication across teams.

Some say the greatest risk to a design system is lack of adoption — but rapid adoption without a plan for how you’ll maintain the system is just as dangerous.

Successful design systems have three major parts: components, guidelines for how the components can be used, and a governance model that unifies the teams that use and contribute to the system.