When it comes to planning your designs, there are many internal resources to create or choose from. The big three, however, are pattern libraries, style guides, and design systems.
But which is right for you and why? Given that these resources need to both please designers, developers, and anyone else involved in this process, there’s certainly a lot to consider!
What Is A Style Guide?
A Style Guide is a company’s rules regarding its branding - this covers both visual elements, such as logos and imagery, as well as written content, such as tone of voice.
It defines how the company is represented throughout online, offline, in-house, and external appearances. Style guides define how a company wants to represent, whether it's via a choice of color, the prominence of the logo, or the language and tone used in materials.
For the most part, there is nothing technical about a style guide - it is a purely written set of rules. It can include:
Branding: when and how to use the company name and logo, as well as colors and fonts.
Editorial guidelines: tone of voice, 1st or 3rd person, etc.
Mission statement: what the business is looking to achieve and how.
Personas: who the ‘target’ audience is and how to approach them.
… and more. It may also be referred to as a “brand guide” or something else, but these are the same things.
Such a document is used internally by all contributors and content creators, whether its designers for apps or writers in PR, to define and maintain the organizational image.
Style Guide Examples
Almost every large company has a style guide. Most are kept as internal documents and not openly shared. This is particularly difficult as those that do share their style guides have often also implemented a design pattern library or system.
However, some notable examples here are:
Spotify. The music-streaming service has a short, but clear, set of rules for its branding. This touches upon tone as well as branding rules (concerning other brands). It also has strict usage regarding color, which can be seen across all of Spotify’s materials.
Dropbox.This example is perfect for showing a little more flexibility - Dropbox allows users to choose from a predefined color palette, for example. They also regulate their subbrands clearly and carefully.
Cisco. A world-renown organization, it’s no surprise that Cisco’s style guide focuses on its messaging and mission statement first. The style guide invokes a very people-centric, personable approach.
What Is A Pattern Library?
A pattern library - which may also be referred to as a component library - is a central and digitalized collection of a brand’s reusable assets.
Naturally, this focuses more on the UI; you can’t ‘re-use’ words in this manner. While there may be some automation, most pattern libraries involve designers and developers going in and taking existing assets to create or develop materials.
In other words, teams responsible for print media and digital applications can both use the same resources, saving time and adding consistency.
So, what can be found in a pattern library? Mostly, you can expect to find:
Color palette.This covers which colors go with which other colors, as well as the complete list of approved colors from the design/branding team.
Font. Clear rules on which fonts and sizes.
Logos and icons. All variable logos and related icons can be stored here, so teams always have the exact option and size to choose from.
Menu & UI Assets. Navigation and displays need to be consistent, so this is where these rules are agreed and displayed. For example, primary and secondary action buttons (respective size, color, etc) will be laid out here.
Pattern Library Examples
Pattern libraries are in many ways the natural evolution of a style guide, so many of the latter naturally progress to become a component library.
Here are some key examples:
Mailchimp. This is a great example of color rulings, giving designers and developers everything they need to create. It breaks down colors and text by purpose. Also, note that it rules out certain fonts at specific sizes and color pairings for accessibility purposes.
Lonely Planet. A popular travel site, the Lonely Planet ensures consistency across apps and websites with numerous pre-created assets, with the code, readily displayed here.
Starbucks. While it may be called a ‘style guide’, this is a pattern library - and a surprisingly extensive one. For rulings about grid design to individual components, Starbucks has thought of everything.
What Is A Design System?
A design system provides complete documentation and branding standards, using automation to provide consistency and faster time-to-market for both developers and designers.
The main differentiator of a design system is that its assets aren’t copied and pasted to each application or website - they’re directly recalled in-code. As such, when these apps load, they load the most recent rulings in the design system. A change in the system is instantly reflected in the products and materials.
Furthermore, a design system contains a great deal of information, including:
Rules and spacings. How do different assets sit with each other? How much space should the logo or buttons have? This is defined here.
Visual design. Action colors, palettes, typography, and more are defined here.
Components. These ‘building blocks’ allow developers to create new assets that have the same look and feel like the rest.
Patterns. Combinations (text and background colors) that define the brand.
As for components, most design systems focus on ‘atomic design theory’. When every larger component (called organisms) is made from smaller components (molecules), and those molecules are made of individual assets (atoms), a change at the atomic level ripples upwards.
For example, a singular webpage may feature a form. This form is an organism created from buttons and fields (molecules). These are defined by the atoms - such as color, font, spacing, etc - of the design system. These same atoms also define the form on a mobile app, for example. Changing the color in the design system itself then changes the color across all these forms - and any other organisms calling these assets - as it becomes updated.
Design System Examples
Design Systems are the most recent of these three options, but we’ve already got many good examples to choose from:
Material Design. This is Google’s open-source design system. It’s very in-depth and even includes the likes of sound, alongside navigation, icons, and other visual considerations.
Carbon. Another open-source system, this time by IBM. Carbon helps the IT giant to manage all of its products and services. It is regularly updated and even includes an experimental section, as the company is pushing to get the most out of their design system.
Atlassian. The company behind Trello, Jira, Confluence, and more has a very detailed design system that covers all of its sub-brands.
Design System vs. Style Guide vs. Pattern Libraries
Consistency
Both a pattern library and style guide ensure consistency through rules, but they do nothing to ensure or assist with the enforcement of these rules. Because they still require developers to copy and paste assets (as with a pattern library) or even recreate from scratch (as is the case with some style guides), they can still lead to inconsistencies.
A design system, on the other hand, requires developers to pull - and only pull - assets from the central repository. This way, there can be no room for inconsistency.
Branding Coverage
On a similar note, a pattern library focuses more on visual assets, while a style guide can favor written content and tone. The two are often used side by side as a result.
A design system often combines the two - at least in terms of visuals such as typography and assets. That said, it’s not the place to define your written values. While you can include these, you’re essentially adding a style guide to your design system, which is not a bad idea by any means.
Updating & Automation
On the same topic, only one option is truly automated. Only design systems recall from a central location, so one update can get rolled out across the entire branding.
With a style guide or component library, this will need to be automated. In the examples mentioned previously, such as Lonely Planet’s, the assets were fully coded but had to be implemented manually. If these assets are changed, someone has to go in and spent time personally changing everything. Even then, there’s always the chance that they forget something or make a mistake at any point.
Prototyping
Big organizations often want to prototype and test new features, but want to do it as quickly as possible. This is typically done with wireframes - the most bare-bones approach - to save time and resources.
For visuals, designers often go into the pattern library and crudely paste together assets where possible. The style guide often rarely comes into play at this stage.
With a design system, the automation comes into play. Need a prototype that has buttons, forms, or menus? With a design system, you can quickly recall the most up to date assets. This ensures your prototypes and PoCs have the same look and feel like everything else, which makes it easier to fully evaluate them.
Pattern Library vs Style Guide vs Design System - who can use what?
Now that we know what each one does, how does each fit into an organization's needs and departments?
For Designers & Content Creators
When designers create assets, they have numerous tools that they can turn to, such as Sketch. This is why pattern libraries are often a go-to for visual creators, as they can store creations quickly and readily.
They will also have a say in the style guide, at least as far as color and tone goes. After all, colors also have emotions (red is often very passionate for example, while blue is both casual and corporate) that need to match the language.
As for a design system, it might take a little more work, but this is much better when looking at the wider picture.
When designers put assets into a design system’s repository, they know they can always use it again and it won't be changed. They won’t be asked to recreate the same assets over and over again, saving them significantly more time in the long-run.
Writers, however, will look to the style guide, whether it’s part of the design system or a separate resource. As long as they can access and update it, they have what they need. Language and tone isn’t something that can be readily automated or updated (there’s very little room for ‘fine and replace’ with broad language).
For Developers & Testers
Developers need to take the assets design teams create and turn them into various products, such as apps, websites, newsletters, etc. Their focus is on efficiency; they want to be as quick as possible.
With a style guide, they need to constantly read the rules and plan ahead. Even with a pattern library, there’s a lot of manual work involved. Yet it’s manual work - time, even - wasted on repetitive tasks.
Likewise, updates to either of these require at least one developer to go back and make any changes. With a pattern library, this is just a case of replacing code but, as we’ve already mentioned, this takes time and can still lead to errors.
A design system fixes both of these issues. Developers just add recalls where needed and let the design system do the work - they know it will be exact and correct. Furthermore, updates are taken care of at the design system level, so nobody has to worry about repetitive, manual tasks ever again.
It’s also worth including testers here, as their need to test these assets is reduced significantly. They can test assets when implemented to the system, while both testers and developers can dedicate larger amounts of time for the more unique features and challenges.
For Everyone?
Fortunately, a design system can do work for everyone! While designers might feel more at ease with a Pattern Library, it only takes a little extra work to get up and running with an automated design system.
From a development perspective, design systems are the only real option for drastically cutting down development time, both during creation and updating products. This enables the company to be more agile, adapt its branding as needed, and otherwise expand at the pace it needs to without exhausting all of their staff along the way - or needing to greatly ramp up teams just to cope with scale.
TL;DR
Pattern Library vs Style Guide vs Design System - all are good, but only the latter encompasses everything. While most companies start with a style guide and begin a pattern library as their digital and visual assets become more vital, a design system is the end goal of this journey. It adds automated and ensures consistency, while simultaneously cutting down time wasted on manual, repetitive actions for designers and developers alike.
