The Power of Design Systems

Design systems have become an industry standard for digital brands and products, but why is that? What is the difference between a Corporate Design, Corporate Identity, Styleguide, Component Library and Design System? What makes them so useful? What are the challenges with design systems? Are there any great examples? How could you actually build your own design system?

At Refine Studio we started to discover the potential of design systems in 2019 and quickly felt in love with the mental model and advantages it brought to our team and processes. Today we are having two design systems and not a single day passes by without using or improving them. Our first design system is powering all our products and is supporting many different brands and modes. Our second design system is purely focused on our own brand and has a very different approach and tech stack. In this article series we will try our best to introduce you to the fundamentals of design systems and share our learnings from the past five years in a practical manner.

What is a Design System?

There are many terms that are closely related but actually not precisely the same thing. All of these terms aim to help organisations to guarantee consistency and cohesiveness across everything they do, but still have distinct differences.

Corporate Design

A Corporate Design (CD) is a collection of all the visual elements that represent a company’s brand. These are things like the logo, color palette, typography, imagery, layout and grids. The corporate design ensures that all visual elements are cohesive and align with the company’s branding strategy.

Styleguide

Most of the time CD’s have some practical guidance included so that the users of the CD know how to properly apply all the elements and rules in their daily work. As a result a Styleguide is less of a separate document, but an ingredient of any good corporate design. Still it is less about defining the colors, but guide the people how to use and combine them properly.

Corporate Identity

A Corporate Identity (CI) can be understood as an extension of the corporate design. It goes beyond visuals and describes the brand image and personality of the company. Usually the corporate design is also a part of the identity but it enforces consistency and cohesiveness not just for visuals, but also for the communication, behaviour and culture. It aims to align everyone on how the company wants to be perceived and how it communicates its values and personality to the world.

Component Library

The terms above all originate from the 20th century - a time where digital products have either not yet existed or played an insignificant role in most companies strategy. But in the late 2000s with the social media and mobile revolution the importance for digital touchpoints started to take over. This trend continued until it skyrocketed within the covid-19 pandemic where many physical touchpoints have been actually locked completely while digital one’s had their doors wide open. While a corporate design helps us to figure out what font and color we should use, they don’t tell us anything about all the digital components we need, nor about their interactions or motion. In that sense a component library can be understood as an extension of the CD, describing every component the company might need for their digital touchpoints.

In the beginning the component libraries have simply been a documentation about how a button should look like, but it was up to the developer who had to ensure it actually matches the desired styles. This was particularly challenging when the design team made a change to the button and the developer had to change hundreds or even thousands of buttons by hand. It was really hard to actually ensure consistency and cohesiveness. This changed when AngularJS has been released in 2010. AngularJS was introducing a new model of how we can build rich client applications with a component based architecture. Many more followed this component based approach like React.js, Vue.js or Svelte to just name a few. This way we could have a single component of a button which developers can reuse all over the application. When a change to this button needs to be made, updating the core component applies the change all over the application automatically.

Design System

A Design System brings all the ingredients together we have been looking at above. It can be understood as an overarching system that includes the Corporate Design, Corporate Identity, Styleguide and Component Library. Beyond that it also describes the Design Tokens which is a contract between the design and development team where all the variables are precisely described - these are things like colors, fonts, spacing, borders, shadows, motion and more. It also has detailed instructions on how to use the system, best practices and design principles. Design systems also provide tools and describe processes to allow effective collaboration between all the involved parties.

Conclusion

Design Systems are a very powerful tool to achieve consistency and cohesiveness across a company’s brand and touchpoints. They allow small and large teams to collaborate efficiently and effectively. But both, using them and crafting them is a huge challenge and requires great discipline, communication and last but not least a whole bunch of work to set them up. Within the upcoming chapters we will dive into all the different aspects of design systems, here is an outlook:

1. Great Examples - Before we learn how to build a design system we will look at great examples. This will help us understand what is possible and what we are working towards within the upcoming chapters.
2. Prerequisites - To craft our own design system, we need to think about the strategy first. Depending on the company’s structure, size, touchpoints, hierarchy and technology stack we need to first think about the tools and processes we wanna use. Whether you are a startup where we can start from scratch or you are a large international company with lots of touchpoints already released makes a huge difference.
3. Design Tokens - Defining the Design Tokens on the basis of the Corporate Design is the very first step and can be achieved in many different ways and with many different tools. We will also discover what themes and modes are and how we can create multi-brand and multi-mode design systems.
4. Components - With all the Design Tokens set up we will look at the smallest piece we use in digital applications: the component. We will discover the potential complexity within a single component and how we can make it as accessible and reusable as possible. We will get an overview about all the different types of components.
5. Pages - The next step is to create our first page with all the things we have created so far. This is where we can see all the pieces fit together and for the first time can really see how the value unfolds.
6. Applications - Going one step further we will build an entire application and will discover motion and interactions to create an interactive prototype based on our design system.

Within this article series we will not only design, but also look how we can translate the things we design into code. Most importantly how we can make sure that both the design and the code stays in sync, which is one of the biggest challenges.