What is a Design System?

By Bek Agius
-
11 October 2019

Anyone who has worked in or around a prominent brand, be it in a marketing or design capacity or simply as an employee within a large or disparate organisation will be familiar with a Brand Style Guide. Typically a weighty book that sits ignored on a desk or is used to prop up a wonky chair. Surely there must be a better way. 

While the Style Guide has had a successful run, somewhere along the way, as life got busier and adhering to strict brand rules became too hard, half of us decided to stop picking up the book and adopt a 'near enough is good enough' approach, while the other half started looking for a solution to grow with us. 

Thankfully the majority of planet earth has reached a consensus on the following:

a) Brand is important

b) A printed and bound set of rules that is out of date as soon as it's published is fairly limiting

The outcome of this revelation means that more and more of the technology, design and marketing industries are coming together and dedicating more time and resources to find an easy and efficient way to solve this problem and manage the elements that comprise a brand to make it easier for non-design savvy stakeholders to represent brand in a consistent manner.

This is where Design Systems come in. 

What is a Design System?

At it's core, a Design System is a digital, single source of truth that groups modular elements in a logical way and compiles a set of simple rules, visual elements and different content types, allowing these elements to be pulled seamlessly into larger pieces of work.  The main difference between a Design System and any other type of strategic brand management is that when an element is updated in the Design System, anywhere that references that element is also updated automatically. 

The main take home here is that by breaking down something large and highly complex that needs to exist in many different places and forms into tiny pieces and assigning very simple rules to each element, suddenly it is much easier to scale any project much larger in a way that is consistent, accurate and simple to maintain. 

What are Design Systems Used for?

Traditionally, Design Systems were developed to centrally group components that make up websites and apps. These components are things like call-to-action buttons, heading styles, icons, page layouts and blocks, and granular elements like image treatments for different purposes. 

Marco Suarez from Design Better highlights the problem the Design System solves by using the example of auditing a corporate website. If during the audit you documented every instance of different shapes or shades of a button and then thought about how many times a button occurs in the entire website, this gives you a very granular perspective on scale that can either be highly manual or managed centrally, via a Design System. 

More recently, teams have started to think more laterally about how Design Systems work and applying the same logic to other applications, like brand management. This is where things start to get interesting. 

What does a Design System have to do with my Brand Guidelines?

The simplest explanation of Brand Guidelines is a set of rules that explain how a brand works. This will generally encompass elements like fonts, colours, shapes, photography and tone of voice. Most occurrences of a useable version of Brand Guidelines are multi-page PDF's, distributed as digital or printed documents that stakeholders can reference manually when creating a piece of collateral. 

Design System Graphic

If a robust set of Brand Guidelines are the foundation for a Design System, all of a sudden the guidelines become a living thing that, when used in conjunction with a brand automation system (like say...Outfit) not only eliminates the possibility of misinterpretation and inconsistency but also ensures a stakeholder never has to reference a style guide again!

The power of this groundwork becomes most evident in a rebrand or brand refresh. Suddenly instead of having to manually find and update every logo, colour, font or shape that has been updated, these elements can be updated in a brand Design System and every piece of collateral produced using it will be updated from a point in time. 

What does a Design System look like?

A great example of a globally well-known brand is IBM. 

As technologists and heavy investors into a multi-billion dollar brand, IBM understand how widely their influence spreads. For this reason, the Carbon Design System was developed. This Design System encompasses all of IBM's design principles, patterns, colours, typography, assets and even the way data is represented. It is also designed to work with many different technologies to ensure that the IBM brand can be used accurately by anyone, anywhere across the globe. 

Screen Shot 2019-10-11 at 1.34.37 pm

This is an extreme example, but with enough time and resource, it's a great illustration of what's possible!

 

Share

Choosing fonts for different channels

How to choose an accessible font