The term design system can seem rather vague, this because it is a term that is meant to encompass a wide range of resources that a designer may use, these resources can include style guides, component libraries, pattern libraries and asset libraries. These resources can also include design guidelines and principles that designers should follow for a specific product or group of products. In this post we’ll be going over what exactly a design system is.
Design systems are great for keeping a product or brand cohesive and are helpful if you have groups of designers working on different related or interconnected products, or different aspects of the same product. They are also very helpful in keeping your design process organized and unified. As someone with ADHD, I find design systems to be crucial to my workflow.
Let’s go over some of the most common resources you might find in a design system.
Pattern Library: A pattern library is a collection of components used for a specific purpose. For example you may use a specific pop up window when providing a user with an error message. That pop up window and all of the components it contains would constitute a pattern that could be part of your pattern library.
Component Library: A component library is a collection of reusable UI elements, such as buttons or nav bars.
Style Guide: A style guide is a collection of visual guidelines that designers must follow, this can include color schemes, fonts & typography, layout instructions and logo usage. You’ve probably heard of a style guide before since they’re common in other design related fields.
Content Guide: A content guide provides guidelines for writing grammar, tone of voice and what type of content is and isn’t acceptable.
Brand Guide: A brand guide helps designers adhere to the overall brand aesthetic and ethos.
Design Principles: Design principles are a series of standardized rules that designers must adhere to. These can include rules such as “prioritize clarity of content” or “all components must adhere to a certain scale”.
This list is not fully comprehensive, for example when working in the indie game industry, as a UX designer I also had access to an in house asset library. Such an asset library would be considered part of the design system I used. Depending on the type of product you are working on, the resources your design system contains may vary. During my time working as a UX researcher, I also created my own design principles as part of the design system we were creating for a science communication app, you can read about those design principles here.
Further Reading on design systems: