What is a design system and how does it help companies streamline their marketing?

To teach you about design systems, we’ll use examples from organisations like:

• the British government
• Google
• Mailchimp
• IBM

Finally, we’ll dive into the unique atomic take on the traditional design system that we prefer at NerdCow.

What is a design system?

Crudely speaking, a design system is a set of rules for digital content creation.

But what kind of rules are they? Who makes these rules?

First, to avoid unnecessary exits to Wikipedia here is the full definition of a design system:

In other words, it makes everyone understand what things should look like and sound like when produced by and for your organisation.

The benefits: why should you use a design system?

• It makes design and development a breeze by providing elements that can be easily replicated and repurposed.
• It shifts the focus to larger and more complex problems. The foundation of the design consists of reusable parts that free up your valuable resources to follow up on more complex work.
• Cross-functional teams can speak the same language. Whether your team goes remote, or a new person joins the crowd, the design system reduces the potential miscommunication.
• It helps your company look the same across all channels that it operates. It provides a single source of standards that make your brand visually cohesive.

What are the traps?

It seems to be a tendency to betray the design system when faced with time pressure or what looks like a one-off project. We saw a couple of companies fall for it, so it’s only fair I warn you. It’s not a wise longterm strategy. It’s incredibly inefficient, considering that a design system requires tending to.

Creating and maintaining a design system requires a dedication. The design system constantly evolves, just like your business. Additionally, you need to train people how to use it. Taking shortcuts with your design system wastes all that effort.

How to create a design system?

There are two essential parts to a design system:

• the design repository
• the people who manage it

The design repository of a design system

The design system goes beyond the scope of aesthetics. In the examples at the end of this article, you will see sections such as the brand foundations, product guidelines, and marketing guidelines. You might not have a need or resources to build these up at once. It takes time, so don’t be too hard on yourself. Baby steps, remember!

Usually, we divide the design repository into three categories:

1. Style guide. It focuses on branding and content recommendations. Some companies choose to incorporate it into the component library. Check MailChimp’s style guide.
2. Component library. It’s a collection of reusable user interface elements described in the finest detail. Designers and developers frequently use it to learn about the implementation of specific UI elements. Here’s Google’s component library.
3. Pattern library. A pattern is effectively a group of components and layouts. Here, you will find content structures and templates that can be reused and adapted e.g. page headers or pricing tables.

While these categories are intertwined, I would pick the component libraries as a starting point.

Primarily for the reason of getting things done in the shortest time possible. Once you build individual components, you can put them to good use and accelerate your business growth.

How to use and manage a design system

A tool is only as good as the hands that wield it. It takes time, effort and purpose to continually maintain a design system and to make sure it doesn’t become outdated. From my experience, you need at least one designer and one developer to write guidelines, create visual examples and provide code snippets.

What is an atomic design system?

You could have assumed by now that design systems are the domain of rather larger organisations. Perhaps you are right. They truly shine when applied to more complex scenarios.

However, I am of an opinion that we can cherry-pick useful parts, and thus keep their scope to the minimum. That alone significantly reduces the required resources to manage them.

Take websites as an example. They are rather straightforward tools in comparison to the capabilities of the modern software engineering
world. In fact, it’s not uncommon to classify them as marketing tools rather than software applications.

For these reasons, we simplified the typical design system by taking out sections that we don’t need and introducing a new naming
convention.

If you remember the contents of a typical design system you will remember the components and patterns, and their meaning. We took a more scientific approach and replaced both terms with the following categories:

• Particles 🔷. These are the smallest bits of a website user interface that never change e.g. colours, brand assets, and typography.
• Atoms ⚛️. If we join a couple or more particles we get an atom that represents a basic interface component such as a button or a bullet list.
• Molecules 🧬. Fused atoms make up a molecule that has a bit more complexity to it. Great examples of these are quotes and form fields.
• Organisms 🦠. Finally, the most complex of all, organisms which represent a combination of particles, atoms and molecules e.g. accordions or popups.

We take it even further and glue organisms together to build interface templates such as page headers or navigations for different screen sizes.

The last reason why we do this is to fit the designing process into the agile development approach. You can only be agile if everyone in the company follows the method. We call it “agile web design” 😎.