What is a design system and why is it so important?

By Dan Williams, Head of Creative at Reckless

4 minute read

Design systems have become a hot topic amongst brand marketers and designers. They’re a great way to bring your brand to life whilst maintaining design consistency and creating a shared vision across teams.

Design systems have become so valuable here at Reckless that we’ve created our own, which we adapt and personalise for different pieces of work. You may be considering doing the same thing, especially if your brand has been evolving for a while and you have various teams working across different projects.

In this blog I’ll explain what a design system is, the benefits of implementing a design system and even, what Lego and user experience (UX) have in common (you read that last bit right…)

What is a design system?

Here’s the perfect definition of a design system from software company Invision:

“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.”

Invision

The purpose of creating a design system is so you can maintain brand consistency across projects. This includes everything from colour palettes and typography to components and spacing. Having one design system brings order to chaos because it enables multiple team members to manage your brand in a way that brings it to life, whilst keeping everything aligned.

What are the benefits of a design system?

There are a wide range of benefits to using and maintaining a high-quality design system. For us, we’ve saved time, improved efficiencies and streamlined processes both internally and for our clients.

Here’s a quick overview of the different benefits you could enjoy by implementing your own design system:

Speed up processes

Your design system can contain hundreds of pre-built elements including colours, fonts and icons. Having these in one place allows you to take them straight ‘out of the box’, and use them for wireframing and prototypes. This will save you time and resources remaking common elements over and over again.

Prototyping

Due to the flexible nature of design systems, you’ll be able to quickly prototype ideas, test them with real users and adapt them off the back of your findings.

Eliminate inconsistencies

Design systems allow you to create one central style guide with a set font type, size and weight, as well as brand colours and elements. You can also design different variations for desktop and mobile devices, so your visual language is consistent across all layouts. This is a huge benefit and these changes tend to be quick, simple and easy to implement.

Communication with a common language

You’ll really start to enjoy the benefits once you’ve explained to your team how your design system works and why it’s so important. Explain the functionality, requirements and how the components should behave, so everyone has a shared understanding. Your design system will become your ‘brand guardian’ that keeps everyone on the same page so your brand looks and feels consistent.

Best practice UX

Pre-defining components in your design system helps you ensure a consistent UX across your website too. For example, in our design system, we’ve created a wireframe structure specifically for Shopify, so we can create seamless experiences for each of our clients’ websites.

Here’s an example of some website components we designed for Castle Green Homes.

See how everything looks aligned and on brand? From the colours and icons to shapes and spacing – it all comes together as a result of the pre-defined components.

So, what do Lego and UX have in common?

Well, there tends to be a common misconception that having pre-defined components makes design repetitive, but in our opinion, this is far from the truth. I recently came across a stat which perfectly explains why we feel this way…

How many ways can you combine six 2×4 LEGO bricks of the same colour? The answer is 915,103,766!