It’s becoming increasingly necessary to be consistent and cohesive across an ever-growing number of media channels. As it turns out, that’s no easy task. That’s why organizations, companies, and brands are turning to style guides to establish sound footing in an otherwise turbulent landscape.
There’s no one definition for the term “style guide”. The term means different things to different people, so it’s worth taking a look at the various flavors of style guides out in the wild. Here are the basic style guide categories I’ve come across:
Let’s take a closer look at each category.
Brand Identity Guidelines
Brand identity guidelines define the assets and materials that make a company unique. Logos, typography, color palettes, messaging (such as mission statements and taglines), collateral (such as business card and PowerPoint templates), and more are described in brand identity guidelines.
Historically, brand identity guidelines were contained in physical brand books, but as with everything else brand guidelines are making their way online.
While brand identity guidelines are fairly straightforward, design language guidelines are a bit murkier. Design language guidelines articulate a general design direction, philosophy, and approach to specific projects or products.
These guidelines are not quite as bedrock as branding guidelines (surely some day down the road Google’s Material Design guidelines will be retired), but they are a bit more high-level and aspirational than UI pattern libraries.
Voice and Tone
Voice and tone are elemental aspects of a brand, so naturally describing brand personality sits well alongside brand identity guidelines. However, voice and tone guidelines can go further by articulating how the company’s voice and tone should shift across a variety of touchpoints. For a great example of voice and tone, look no further than MailChimp’s seminal Voice and Tone website.
Creating a consistent writing style for an organization with many voices can be challenging. Now that the Web makes it easy for everyone in an organization to publish, it’s especially important to provide every author some guidelines and guardrails for contributing.
Writing style guides can be extremely granular, but they don’t always have to be. This writing style guide from the Web team at Dalhousie University is one of my favorite documents on the Web. Short, direct, and practices what it preaches.
Pattern libraries, or front-end style guides, UI libraries, component libraries, or whatever you want to call them, are increasingly important. As Web designers, we’re now tasked with creating interfaces that look and function beautifully across a myriad of screen sizes, devices, browsers, and environments. That’s why it’s so essential to break our interfaces down into their atomic elements.
As Anna Debenham explains in her wonderful book, Front-end Style Guides, these libraries help establish consistency, create a shared vocabulary for everyone on the project, encourages reuse, and makes testing easier. And who doesn’t want that?
Code Style Guides
It’s absolutely essential for teams to write legible, scalable, maintainable code. But that all falls apart when Summer Intern #2 swoops in and writes things all sorts of terrible.
Code style guides provide conventions, patterns, and examples for how teams should approach their code. These guidelines and guardrails help reign in the madness so that teams can focus on producing great work rather than refactoring a bunch of sloppy, inconsistent code.
Stylin’ and Profilin’
These categories certainly aren’t mutually exclusive, and many style guides in the wild incorporate many of these categories to get the job done. In the murkiness that is our increasingly complex media landscape, there’s no one right answer to which style guides to execute. In fact, I’d go so far as to say that employing all of these guidelines sets your company or organization up for success. The media landscape isn’t getting any simpler, so the more you can do to bring order to your company’s properties, the better off you’ll be.