Introduction

In the last decade design systems became very popular in the design industry. Design system is basically a collection of reusable components that are guided by clear standards so that any team member that needs to create something can use these components within the guidelines provided to design a product.

Difference Between A Design System & A Style Guide

The difference between style guide and design system is that the design systemfocuses more on the UI side of design whether it was for a website or an app. Although sometimes design systems can be similar in terms of providing the users with a color palette or the fonts to be used, however you’ll also find elements like buttons and toggles for UI use. These elements are guided with standards within the company with different use cases for every scenario which doesn’t necessarily mean that combining these elements together will create a consistent look. You need to have a sense of style when designing using the design system. One nice thing about design systems is that they are frequently updated more than the style guide which allows for refinement and better outcome with each update.

Atomic Design

Design systems can be overwhelming sometimes, since there is so much detail and work that goes into each phase of the design system it has to be broken down into smaller pieces. Enters the atomic design system. The atomic design system works in small fragments and scales it’s way up to a fully designed page. The atomic design system starts with an atom then molecules then organisms then templates then finally pages.

How To Build A Design System?

There are key elements that must be found in almost every design system however they are not all the same since each company creates its own design language but still you’ll find these key elements in almost all design systems.

1. Color

Color is a very important element for your brand. It helps in keeping it consistent and visually appealing for your users to use your product. Usually brands like to stick with 1-3 main colors and the rest of the palette are usually shades of these primary colors.

2. Typography

Same with colors it is highly recommended to not overwhelm your designers or users with too many fonts since it won’t help in brand consistency. It is recommended to keep it simple and use two fonts on for headers and subheaders and the other for text.

3. Sizing and spacing

One of the most important aspects of design systems yet sometimes it gets overlooked is the sizing and spacing of each element and when to use certain sizes and when not to use certain sizes as well. Also the spacing between each element is very important since this is where you find websites have nice breathing space between each element which is often called “Whitespace”. That’s why you find websites are easier to grasp info from while others feel crammed.

4. Imagery

It’s very important to stick to the imagery style provided by the style guide since it gives a huge sense of brand consistency.

List of Design Systems Worth Giving A Look At

1. Google’s material design: https://material.io

2. Uber design system: https://brand.uber.com/guide

3. IBM Carbon design system: https://www.carbondesignsystem.com