Both brand guidelines and a design system help to inform the overall aesthetic and brand positioning of the website. Understanding the difference between the two is crucial when working on website projects of any scale. Many people have asked us what the differences are between them, so we’re here to demystify things.

What are brand guidelines? 

Brand guidelines are a set of rules and standards that communicate how your brand should be visually represented. They can be a simple overview showing your logo suite and brand colours, to extensive documents detailing your brand personality and photography style. They are created after your brand has been designed, to ensure a consistent visual language across any assets created within your company and externally. This step happens ahead of website design to ensure the look and feel is already in place, and so that everyone feels confident moving forwards. 

What is a design system? 

A design system is a set of components that will be reused to create a shared visual language for your website. It will be created by our designers and implemented by our developers when they build your site. In its simplest form a design system will include logo formats, a set of buttons, a colour palette and type scale. The system is inspired by your brand guidelines, while considering the digital experience and accessibility. The goal of a design system is similar to brand guidelines – to ensure a consistent experience and communicate your brand visually. The fundamental difference is that a design system is created specifically for digital uses and with responsive design at the core. Every brand is different, so every design system is unique.  

View an example of brand guidelines and design system.

Why is a design system important? 

So, why does a design system matter? 

There are three key reasons: 

Consistency
Users often will interact with your site from both their phone and desktop, so ensuring that their experience is consistent across different devices is crucial, as well as over each page and element of the site. The consistency that the design system creates provides a sense of trust for a user experiencing your site and ensures your brand is communicated in a strong way. 

Collaboration
At Tribe our close-knit team of designers and developers work together easily, but the more people that are involved in a project the more chance there is for inaccuracies. Beginning with a design system makes collaboration across individuals and teams much easier. 

Structure
Finally, a design system provides the structure across the site, starting with specific font sizes for headings, body copy and buttons. However, the design system affects more than just the aesthetics of the website, it forms the basis for the sizing of everything across the site. The width of components such as product cards, the space between a title and the body copy, and the distance between icons are all examples of what the design system affects. Using the same system creates a feeling of harmony across the site, and also provides an important structure when it comes to the build of the website. 

How does the design system fit into the rest of the project? 

The design system will just be the starting point of how your website is created. We then take these elements and begin work on the design of key pages. The size and spacing will be used in a flexible way to ensure each page and element communicates effectively. 

To sum up, both brand guidelines and a design system aim to achieve a seamless, beautifully branded user experience, but a design system is created specifically for website design. It will take into account your existing brand guidelines as well as user experience and digital practices. The design system affects the entire structure of a website, and is a crucial step in every web design process.

If you want to learn about how we could help you structure brand guidelines and a design system for your business and digital channels, get in touch with our design team.