BlogDesign

Design System: Creating the Basic Building Blocks

By October 9, 2018 No Comments

In my previous blog, we discussed how you make decisions on the structure and principles of your design system. Now it’s time to create the basic building blocks of your design system.

Personally, this is my favourite part since I enjoy thinking about colours, typography, spacing and iconography and their impact on the brand and product. When you define and develop these fundamentals of the visual language, you will be able to create a basic building block (Atom), such as a button.

Other parts you should consider, if needed, are: motion, sound, shadows, depth, round corners.

Colours

The colours we use in a design system are not necessarily only the brand colours. We tend to extend them with the use of colors that have a functional role in showing alerts (success, warning, error), visualizing information and the hierarchy of the structure.
Colour categories:

  • Main Palette
  • Neutro Palette
  • Secondary Palette
  • Semantic Palette

Colour palette for one of our projects

Usually, a design system consists of 1 to 3 primary colors which are basically the brand colours, and they represent the Main palette. In the case that none of these colours work as a button colour (maybe because it doesn’t grab the user’s attention or work for a ‘call to action’), we should add one more colour.

Besides the Main palette, it is important to create a Neutro palette too. Neutro palette is generally used for backgrounds, box borders, typefaces and system icons. The Neutro palette consists of a range of greys. I suggest making greys by mixing other colours, since there are no “clear” greys in nature.

A Secondary palette is used for highlighting actions and information. (Tip: You could use a complementary colour to your brand/main colour.)

A Semantic palette is used to show alert messages like success, warning and error. Often, those colours are green, yellow and red.

You should consider using a range of tints (colours mixed with white) and a range of shades (colour mixed with black). This can be useful if you are planning on using illustrations for a brand’s communication tool.

Pay close attention to the contrast ratio between the typography and background, to ensure the text is readable. Stark is a Sketch plugin that can help you with this, plus it can provide you with insights on how colourblind people react to different colours and what is most visually appealing. This is important because your users may be colourblind, hence it’s difficult to use colour as a way of navigating your users towards certain actions.

Typography

When choosing fonts, consider their legibility. Using basic fonts like Roboto, Arial or Helvetica can make your work easier since the users are already used to these. Nevertheless, you can use custom fonts too, if it better reflects your brand. Using more than 2 fonts can lead your product to be viewed as inconsistent and even lead to a lower performance.

Source Sans Pro, Google Fonts

Font size is the next thing you should consider, since it will be used on different devices. I suggest using 16px for the body text because it is the default size in most of browsers and it fits to the 4-based metrics used by Apple and Google.

If you want to create smaller or bigger fonts, for headings for example, you can use the modular scale technique. To avoid having to do the math yourself, I suggest using Modular Scale Tool or Type Scale Tool.

When talking about fonts, an unavoidable topic is leading or line-height in CSS. Line height depends on font and line length. If you have longer lines, line height should be smaller. Certainly, I suggest using smaller lines and bigger line height to improve legibility and aesthetic.
In practice, the size of the space is about 1.5x, or more, larger than font size.

Example of proper leading

Spacing

Generally, horizontal and vertical spacing should follow some rhythm. I, personally, use spacings that can be divided by 4 because of reasons I have mentioned before. (Default body text size, 4-based iOS and Android metrics, icon sizes)

Rhythmic spacing based on 4 metrics

Iconography

Before you dive into drawing icons, think about the usage of icons and it’s style rules. Consider, will they be solid-fill or outline? What size will they be? (I suggest a 4-metrics based size – 16px, 24px, 32px…) Which colours will your use? And so on…

Collection of icons – IBM Cloud

Design Tokens

As written in the Design System Handbook by Design Better, design tokens are name and value pairs stored as data to abstract the design properties you want to manage. With the values for all design tokens stored in a single place, it’s easier to achieve consistency while reducing the burden of managing your design system.

Example:
$color-neutral-20 = #222222;
Or
$font-size-m = 1rem;

In design tokens you can store colours, spacing, sizing, animation durations, etc., and distribute them to various platforms.