Content Quality Blog

A primer on design systems

Why you should have one and the main aspects that should be included.

An illustration of the pieces of a design system: colors, photos, components, and code.

A design system is essentially an organized way to produce campaigns more consistently. This could be as simple as a brand style guide, or it can get more complex, such as a collection of design patterns and assets.

How does a design system work?

The goal of a design system is to help your team scale design processes. With shared workflows and assets, your team can follow brand guidelines and be more efficient. It helps solve the following problems:

  • Maintains consistency with on-brand visuals and messaging
  • Fixes design and code debt with a reusable framework for increased efficiency and speed
  • Improves workflow, not having to reinvent the wheel each time by reusing components, keeping writing focused, and following best practices
  • Everyone can easily understand decisions made, while having to make less of them as they refer to a single source of truth for how to do things
  • Acts as a backup for when teams change (as people come in, or leave), with a shared repository of gathered knowledge

What to include in a design system

Branding

You can refer to your organization's current brand guidelines: a styleguide, logo requirements, etc. Any related design documentation that may be available. And any design patterns that are used for your marketing efforts.

Writing

The most important part of any campaign is the message it's communicating, the text itself. Your design system should include some guidelines around how copy is written. From the mechanics of the content, to the voice and tone.

Components

A good component is a) purposeful: all components solve a specific problem; b) reusable: components work for multiple use cases; and c) flexible: they work in many different contexts. The long-term benefit is that a designer can take greater care and give better thought to solving each solution instead of rushing to put together something that comes along.

Guidelines

Static components answer the how. Guidelines provide answers to: why, when, and where. "Can we?", "should we?", and "what if..." They should educate on constraints: workflows, habits, and best practices. Having this information leads to a reduced need for everyday problem-solving and decision-making.

Blocks Edit follows design system principles and makes designs interactive and collaborative, for teams to build and edit using your custom components.

Photo of Ovi Demetrian Jr Ovi Demetrian Jr