All Black Lives Matter

What a design system is, and why you should care

Nov 18, 2021

Thinking in systems

  Back to article list

Have you ever wondered how some designers, developers, or companies get their digital products to look so “designed” and professional? They seem to captivate and earn a user's trust instantaneously. Have you had trouble getting your own digital products to reach the same level of presentational nirvana? Have you asked yourself what could possibly be their secret? If only you, too, could get your hands on some of that magic sauce.

So, what is this design Qi that only the most elite and practiced of developers and designers can tap into? Are you ready for it? I'm about to tell you the answer to life, the universe, and everything. No, the answer is not 42. The answer is systems. Specifically design systems.

What is a design system?

Merriam-Webster defines a system as an organized set of doctrines, ideas, or principles usually intended to explain the arrangement or working of a systematic whole.

In her book, Thinking in Systems, Donella H. Meadows explains that a system must consist of three kinds of things:

  • elements,
  • interconnections, and
  • a function or purpose

Applying this to digital products:

A design system is a source of truth for designing and building digital products consisting of foundations (color, typography, depth, spacing, …) and guidelines (patterns, shared practices, components, …).

Design systems in practice

Tools such as CSS and Figma give us thousands of options regarding space, color, type, depth, and much more. This affords us incredible latitude for creativity. However, this much flexibility can also be a curse. Building a digital product without constraints is like trying to build a straw house from individual strands of hay, or trying to build a brick house from individual grains of sand. You wouldn't do it because it would be torture. You would instead start by compressing the hay into bales, or the sand into bricks. Perhaps you would have a handful of sizes of bales or bricks to choose from for different parts of the house. These constraints, defined in advance, make the process of assembling the house considerably less complicated.

Likewise, by placing constraints on your design choices in advance, a design system eliminates decision fatigue, enforces consistency, and speeds up the design and engineering process. By reducing your cognitive load, a design system will leave you with more time and energy to spend on other aspects of your digital product, such as creating better user interactions.

Working with systems

Digital companies invest a ton of resources to build and maintain their design systems. They do this because their design system (usually) defines their brand. Their design system will inform their brand guidelines and visual identity such as how the company relates to its customers through color, voice, tone, and product interactions. However, you don't have to be a multi-billion dollar company, or a design firm, with large teams of specialists to apply design system sensibilities to your projects.

There are many open-source options available. Some are a better choice than others. For example, Material Design, a design language (synonymous with design system) created and open sourced by Google, is a popular choice among the uninitiated. This design language, published at https://material.io/design, is used to inform many open-source frameworks and component libraries. If you choose to use it, your projects will inevitably look like they were built by Google. Gross 🤢

Begin with solid foundations

As mentioned previously, a design system will consist of both foundations and guidelines. Many of a design system's guidelines; such as patterns, best practices, and components; are built from the system's foundations. Foundations are the fundamental building blocks of a design system. Defining these foundations can require painstaking effort with a strong attention to detail. Some open-source libraries aim to provide these foundations for you out of the box, while being careful not to inflict any guideline-related patterns.

Tailwind CSS is one such system. Often referred to as a “utility only” CSS library1, Tailwind CSS is one of the most elegant open-source systems. It provides a complete suite of foundations out of the box. As an additional bonus, Tailwind's class names double perfectly as (global) design tokens. Tailwind's docs are a joy to use, and non-tech people such as designers pick up the class names (tokens) with ease. Once you set up Tailwind with your customizations, such as your brand's color pallets, one can readily jump right into building brand guidelines. There are other utility class libraries available, but my experience is that none are as polished as Tailwind.

Block Element Modifier (BEM) libraries such as Bootstrap, Foundation, Bulma, and Materialize are not suitable starting points for a design system. They offer limited, if any at all, utilities that serve as proper foundations. They are highly opinionated and come with their own pre-defined guidelines baked in. To get them to align with your brand identity, you will waste many hours undoing/overriding their out-of-the-box behavior.

Tailwind does come with a pattern that allows you to create your own BEM-like class names — some design systems implement alias tokens and component-specific tokens. I don't use this approach in my personal projects whenever possible. If you need an HTML/CSS-only component library, you will use this pattern. Otherwise, component-based architecture allows you to circumvent the additional effort. Just add the relevant class lists (global tokens) to string literals assigned to constants at the top of your components. This approach creates a CSS-in-JS-like experience without the CSS-in-JS runtime overhead.

Conclusion

Working with a proper system will make you a better designer/developer. Limiting your options in advance will reduce decision fatigue, enforce consistency — especially when working with a team, and reduce development time. If you have never worked with a system, starting from scratch can be daunting. If you are new to systems, I recommended that you start with an existing high-quality foundational system to familiarize yourself with systems thinking. Lastly, To get a feel for what makes a design system successful, take time to explore the design systems of some of the world's most successful brands:

In this article we've explored what a design system is, and how it can improve one's process. But one still needs good design sensibilities in order to build a system and then put it to good use. Check back soon for both; a series on practical and easy to implement design best practices and a series on design system implementation.

1Referring to Tailwind CSS as a “utility only CSS framework” is a travesty. Once one looks at it in the context of systems, its elegance cannot be overstated.

Tags

Design

Systems

Design systems

Tailwind CSS