What is a design system?

Maintain full control over your company’s brand with a design system.

4 min readFeb 15, 2019

To make sure that your company’s brand is consistent across different digital experiences, you can enlist the aid of a design system. But what exactly is it? Here are the essentials.

Definition of a design system

A design system maintains the visual and functional elements of an organisation in one place, in order to fulfill its brand principles through design, realisation, and development of products and services.

A design system may include a sketch library, style guide, pattern library, organisation principles, best practices, templates, and more. The resulting components and patterns may be used by your designers, developers, and editors in different preset combinations on your website, app, presentation, or other types of products — always remaining compliant to brand guidelines.

Imagine that you work for a large multinational corporation, with multiple websites, apps, and documents in different languages and locales. A central design system helps you keep brand and communications consistent across the various geographies, with specific brand and risk compliant elements to use in presentations and your digital experiences.

Contents of a design system

Organisation principles

The organisation principles are the most abstract elements of a design system, and are perhaps the most difficult to achieve in practice. The principles may include vision, purpose, values, shared beliefs, collaboration guidelines, mindset, and tone of voice.

What this essentially boils down to is shared goals and a shared direction for your organisation and colleagues. Where are we going, why, and how? Having a clearly stated vision will prod everyone in the same general direction, and the design system can help communicate the principles broadly in the organisation.

Also, explicit values will help your coworkers create and use components that align with your organisation’s principles, rather than deviate from them.

Design principles

Design principles are more tangible and straightforward than purposes and visions. Design is not only focused on visuals, but also on realising the purpose of a product or service thanks to thoughtful design.

With that said, we of course include brand identity, style guide and language guidelines under design principles. Here you’ll find familiar elements like colours, fonts, spaces, shapes, icons, illustrations, photographies, animations, voice and tone, and sounds, as well as how to put them together meaningfully and in compliance with your brand.

Best practice guidelines and examples may also be included in the design system. This is in accordance with the creed of “show, don’t tell”, by showing your coworkers what is compliant and what is not. Now, let us show you what this means:

Example of brand best practice from Washtenaw Community College.

Components and patterns

With the principles out of the way, you have finally arrived at the brick and mortar of the design system — the components and patterns. While the principles of course provide guidelines and direction, it’s the components and patterns you will use on a daily basis.

The components are the building blocks of your digital experiences, and may include application bars, buttons, bottom navigations, step buttons, cards, text fields, progress bars, and icons. Components are used in Sketch by designers and directly in the code by developers, and their functional behaviour must always be specified.

Examples of components from design system vendor Atlassian.

If the components are the ingredients, the patterns are the recipes — specifying how you can use the components logically and consistently, across all your digital experiences. A pattern library integrates functional components and determine their usage.

*Example of a pattern library within a design system, courtesy of* *Atlassian*.

12 reasons why you need an alternative CMS to WordPress »

Types of design systems

We will not delve too much into the different types of design systems that exist. But here is an essential overview, courtesy of UX Collective:

Strict or loose: A comprehensive and detailed documentation in a strict system vs. a loose system providing a general framework with room for more experimentation.
Modular or integrated: Interchangeable and reusable parts for quick scaling in a modular system vs. fixed parts in an integrated system.
Centralised or distributed: One team in charge in a centralised model vs. several team members from several teams contributing in a distributed model.

7 tools you need to run your digital experience »

Examples of design systems

In other words: a design system is a smart, effective, and risk mitigating method to produce and deliver products and services in a consistent and brand compliant way. If your organisation doesn’t already have one in place, maybe it’s time to check it out.

Originally published at enonic.com