Clients often ask us what we mean when we talk about design systems rather than simply “a design” or “an identity”. The short answer is that a design system establishes a set of rules that make a given design flexible—and more future-proof.
When you think about a corporate identity, a few elements likely come to mind: A logo, one or many typefaces, a color palette, and maybe some compositions. All of these are the traditional elements of brand design, and should be a part of any branding project.
A design system goes a bit further: It lays down the logic of how these various elements work together and relate to one another. A robust design system allows designers to expand an identity across screen sizes, devices, and media of all types.
Where does it come from?
The overall idea for a design system is still relatively new: It’s derived from an influential book by the American author Brad Frost about user interfaces.
In 'Atomic Design', Frost proposed rethinking the design process: Rather than creating finished screens he encouraged designers to first lay down rules for the smallest possible elements of those designs: Think buttons, checkboxes, and text fields. Just like the physical world is composed of atoms, Frost argued that an atomic design system should be based on predefined interface elements in order to be more logical, adaptable, and—crucially—easy to maintain.
His idea has become a credo in the design industry. And it has marked a radical departure from the more static designs of the print age: By first establishing all the different elements of a design language—such as font sizes, color hierarchies, or interaction elements, designs gain an underlying logic that makes them adaptable to the many devices we use today. It also makes them more coherent—and recognizable.
The latter, of course, is especially useful in the branding context where recognition and coherence is key. In recent years, several large corporations have invested in design systems to bring order to their offering. You may even have heard about some of the more iconic brand design systems such as Porsche’s Design System, IBM’s Carbon Design System, or the Uber Design System.
Do I need one?
Whether you need a design system or not depends on the nature of your project:
- If it’s a one-off campaign or landing page that you’re only using for a limited time, then you can likely live with a static design that doesn’t have an underlying system.
- If you’re looking at a long-term project like the establishment of a brand or launch of a major website, then a design system is definitely worth it. It’ll establish the foundation for your project and make sure it can grow over time—either by the agency you’ve hired or your in-house design team.
We believe that a design system pays for itself in the branding context: It not only ensures consistency across all deliverables and mediums but because it comes with rules and logic, it’s easy for you to adapt to future applications, all by yourself. And even if your company is no large corporation, it still makes sense to create a limited design system that can be expanded in the future.
How does it work?
A design system lays down the fundamentals of your design language and the elements that make it up. It may include:
- Logo. Construction, application, and variants. This includes what a logo should look like in monochrome and on dark and light backgrounds—and how not to treat the logo.
- Typography. Typefaces, type sizes, and type treatment. Includes what typeface gets used for which headline level, how it scales across screen sizes, and how it looks in longform text. Can also include fallback typefaces for emails or presentations.
- Colors. A brand color palette with recognizable names in RGB/CMYK/Pantone, including color shades. Can include information about transparency and signal colors.
- Illustrations and iconography. If your design language includes them: What makes illustrations have a uniform look, and how to adapt them.
- Photography. If your design language includes them: Motifs, colors, and editing style. Can include information about stock photo databases etc.
- Layouts: Applications of all design elements in layouts of different sizes. Includes responsive behavior for layouts, and edge cases such as forms, emails, presentations, etc.
What we can do for you
At studio~humm, we can provide design systems in two ways:
- An illustrated brand book, which is a PDF summary of all design elements and the rules that tie them together.
- A Figma Library, which includes the same elements but has already set them for reuse in Figma, should your team use them.
Got less time or budget but still want to explore design systems? We also have a “minimum viable branding” process that established just the basics for a design system to give designers the basic visual foundation for building a website or brand.