The difference between design systems, pattern libraries, and style guides
Over the years, we've noticed that the terms design system, pattern library, and style guide have been used interchangeably. While the terms are connected, it is important to understand the separation between each, especially when communicating with a wider team.
What is a style guide?
A style guide is a vaguely defined term that is commonly used to refer to the combination of these two documents:
- Content style guide
- Brand style guide
When referring to style guides in this context, where we want to communicate that a document has both visual and written communications documented, we should refer to these as brand guidelines.
Content style guide
A content style guide is a document that sets the standard writing, grammar, and punctuation conventions people working for an organisation should follow to maintain a consistent tone of voice across its entire online presence.
Practical examples
Here are some examples of content style guides currently out in the wild:
Brand style guide
A brand style guide is a document that sets the standard of how a brand should be visually presented to its people. These documents contain typography, colour, logos and imagery.
Practical examples
Here are some examples of brand style guides currently out in the wild:
Pattern vs component libraries
A pattern library can sometimes be confused with a component library, and as a result, is often used interchangeably. To explain the difference, let's first provide an overview of Brad Frost's Atomic Design methodology, which will allow us to understand the difference between each.
- Atoms are the basic building blocks of all matter, and cannot be broken down further without losing their meaning. For example, a button.
- Molecules are groups of two or more atoms bonded together. For example, a form label, input and button to create a search bar.
- Organisms are groups of molecules joined together to form a section of an interface. For example, a header built of a search bar and navigation menu.
- Templates are groups of organisms stitched together to form a layout. For example, a page.
Now that we have a high-level understanding of the atomic design methodology, we can use our atoms, molecules, organisms and templates to inform our definition between pattern and component libraries.
Pattern library
Patterns are the molecules and organisms in your interface. For example, a navigation menu with a logo or a search form.
Therefore, a pattern library is a collection of UI patterns within a design system.
Practical examples
Here are some examples of pattern libraries currently out in the wild:
Component library
Components are the atoms in your interface and are presented as reusable blocks of code that can stand alone or become the foundations for your molecules, organisms and templates. For example, a button or a form input.
Therefore, a component library is a set of UI components within a design system.
Practical examples
Here are some examples of component libraries currently out in the wild:
What is a design system?
Now that we know about content and style guides, as well as component and pattern libraries, we can move on to understanding design systems.
A design system is the complete set of brand guidelines, pattern libraries, and component libraries all brought together for the sole purpose of providing designers and developers a one-stop shop to build and scale digital products.
Design systems often vary in the weight of their contents, depending on the depth of needs of the company that developed them. As a result, some other things you'll find within a design system can include:
- Accessibility guidelines
- Governance
- Best practices
- CSS variables and design tokens
- Downloadable assets
Practical examples
Here are some examples of design systems currently out in the wild:
Summary
Origin Blank specialises in all things branding and web. Need help with your project? Say hello, and let's fill the blank with something wonderful.