18 August 2021

 Creating a Design System

Creating a Design System Main Image

In our previous blog post; creating brand identity; we discussed two essential elements that create a brand identity, brand logo and design identity. The design identity is what actually creates a brand’s identity, and in order to create a design identity, we need a design system that helps us create a unique design layout that provides us with all the unique design features like components, typography, elements, colour schemes and tone of voice. This blog will discuss how you can create a unique design system for your brand taking into account all the nitty-gritty details that go into making a brand. 

What is a Design System?

Before we dive deep into how to create a design system, we must first look into what a design system actually is. In technical terms, a design system is a series of components that can be reused in different combinations and allows you to manage designs at scale. Design systems are used to create unique characteristics of a specific brand. It gives the brand an identity. Take google as an example. Google is a very big brand, and has many products to offer other than it’s search engine, like Google Analytics, Google AdSense, Google Digital Garage etc and each of them has a different function but the design layout of each of these is similar, they all have the same colour scheme, the same typefaces and the same tone of voice, which gives them the Google brand identity. Hence, in order to create a design system one must decide on how they want to portray their brand towards their customers and users. To do this you must decide what colour scheme you think will go with your brand image, what typefaces represent your brand's outlook and what tone of voice you want your customers to perceive about your brand. All these together help form the design identity of your brand and help you create a unique brand that stands out from the rest and speaks for itself. 

image of a design system

Colour Scheme:

Colour schemes express your first outlook, they give your users a sense of what your business is about and what you stand for. If you’re creating a website for an already established physical business, it is important to cater the colour scheme of your website with that of your physical business. For example, if you were to create a website for a luxury hotel you need to keep the colour scheme of your website the same as that of that hotel. Furthermore, if you’re creating a website or a landing page for a digital product or service you want to choose the colours that best express your company’s image. E.g a company that provides eco-friendly products should choose colours on the green colour gradient, a health focused company should have colours on the orange or beige colour gradient, and a company that provides water services or products should focus on the blue colour gradient. Other than that it is important to mix and match, if your website is too colorful then it gives a youthful vibe, and if it’s monochromatic then it gives off soothing and optimistic vibes. You just need to figure out what you want your customers to perceive about your business or company and then decide your colour scheme based on that. 

Image of different colour schemes


Like colour schemes, typefaces also project an image of a company. Google for example has a mixture of Sans Serif, Serif and Roboto. It’s not like other brands don’t use these typefaces but what these typefaces contribute to the overall image of what the brand stands for. For example, newspapers and editorial magazine websites usually use Oswald and able because they provide a more condensed form of open sans. Choosing the right typeface for your business website can help express what your business stands for. Tisa can be used to add more character to your website’s design while maintaining a clear, readable style. If you’re creating a blog then using open sans or Merriweather is preferable because they are readable at lower font sizes. Furthermore, if you're looking to create a modern website then Dosis is a font that provides a very unique and “modern”, clean look to your website. 

Image of different typefaces

Tone of Voice:

The above two represent your website's outlook, the tone of voice helps your customers and users get an idea of the personality of your business. Choosing the right words and taking care of what others may perceive of them is very important to establish your brand's identity. A casual tone would be best for businesses that revolve around customer needs and wants. For luxury websites like car companies or luxury hotels, it is best to use a tone of voice that portrays a luxury personality. Because most content on websites is delivered through text, that means using the right words is very important and deciding on what you want to portray to your customers through your words is a very important task in designing a website. 

image of different tones


Creating a design system is merely deciding what unique characteristics you want your websites to have to represent your brand in order to portray the right image of your business to your customer. Taking care of the above points is necessary if you want to effectively create a brand identity for your brand, which means that it should be very well thought out because once our identity is established, it is very hard to change it. 

more from tuk

tailwind css components and templates


15 September 2021

A beginner's insight into the widely famous front-end framework today.

tailwind css components and templates


07 July 2021

Importance of designing carbon neutral websites and how they benefit everyone