Logos, colors and brand books: How to create a design system for your company

By Alexandra Naidonova, head of marketing at F1V

I bet you can recognize a KitKat chocolate bar from afar. The logo, the fonts, the colors—you’ve seen them so many times and they are always the same in each of 180 countries it’s sold.

It’s difficult to keep such a global brand consistent in its style, while employing hundreds of thousands of people from all over the world. But KitKat’s producer Nestlé has built a design system that helped it scale and stay recognizable anywhere.

A company’s design system is a collection of reusable components, patterns, guides and codes for building websites and apps, as well as for any other type of communication with stakeholders.

If you are building a solid brand, you should invest in a design system early. Or consider rebranding.

💡

When a company needs to rebrand

Clients can’t understand what the company does and what value it offers.
The company’s website, social media, and publications in the press—all look different.
Your designers often need to come up with new elements from scratch.
Your design was developed more than five years ago.

Whether you are creating your design system from scratch or updating the existing one, the process looks similar.

Step #1. Hold a brand strategy session

The process begins with a brand session with designers, brand managers and top managers. If you don’t have a designer, consider hiring a marketing agency or freelance specialists.

During the brand session, you describe your positioning, brand nature and the tone of voice you’d like to use with clients.

Your design should convey everything you’ve already put into the brand: its positioning, mission, goals and style.

You can't design for the sake of design—there's always a problem it fixes or an image it helps you to reinforce.

The documented brand session will be the basis for the next stage.

Step #2. Create a design brief

A design brief is a document that describes the problem, the task, the company’s background, preferences and all the requirements and expectations of the team for future design. It should also include info about the budget and deadlines.

A good brief makes clear how to evaluate the proposed design later.

Step #3. Develop design concepts

Designers will come up with a visual idea, which will be decomposed into design elements in the future. They show the team options for logos, fonts, colors, and principles for building a design system.

The project team will choose the best option, leave comments and offer changes.

Step #4. Design brand elements

Designers finalize the concept and offer ways to incorporate its elements into the corporate identity.

These elements are usually shown on merch, covers for social networks, slide presentations and so on. At this stage, the task is to create a technical description of each element—how the logo should be displayed, what fonts and colors can and can’t be used.

As a result, you get a guideline, according to which any designer collaborating with the brand will understand how to work further.

Step #5. Put together a brand book

A brand book is a document (usually a PDF, but can be depicted on a website) with the brand's mission, goals and values and how they are translated through your design system.

The main goal of a brand book is to describe the mission and strategy of the brand with clear instructions on how to use design elements.

The Uber brand book describes how to use the company’s logo, colors, etc.

A brand book has two parts: the brand component (philosophical) and the design component (practical).

The main blocks of the first part.

Who are we?
What do we believe in?
What do we stand for?
What value do we bring our customers—rational and emotional?
What are we—our style, mood, tone of voice?

The main blocks of the second part.

Logo: aspect ratio, margin, acceptable and unacceptable use cases.
Typography: types of fonts we use (logo font, main and additional fonts).
Colors: a range of corporate colors in different color models.
Corporate graphics: the style of decorative elements for sections of websites, social networks, presentations, merch, covers, and posters.
Visual and photo language: what type of illustrations or photos we use; how we color-correct them.
Communication design and layout rules: proportions and sizes.

If all the elements and rules for their use from two blocks reflect the philosophy of the product, then you can say that you’ve created a design system.

Subscribe to our LinkedIn newsletter to get one useful article every week via email and on LinkedIn. We promise each story to be insightful and take less than 5 minutes to read.