January 10, 2018

How to Create a Style Guide to Improve BusinessConsistency (with 8 Examples)

process.st/create-a-style-guide/

To understand the value of a style guide, you should first try working without one.

You’d get the wrong blue on your logo, jarring copy, and code that can only be maintained by alone developer.

Writers, editors, programmers, engineers, social media managers, and support agents all needan indication of how their company wants to work, so they can ensure consistency.

The number one goal of a style guide is consistency.

Inconsistency weakens your brand image, makes your company look unprofessional, and hurtsconversion rate and revenue. Once you’ve settled on your brand voice and style, the styleguide is the document that enforces those values.

1/12

An excerpt from NASA’s style guide, showing acceptable use of brand colors

There are also style guides for teamwork.

Like a designer structuring their shared assets and library, or a development team insisting onone proven way to write and test code that’s clean and scalable.

These different guides all have the same goal: to standardize the way a team works, andimprove the consistency of their output. This means less time spent on revisions, in edit mode,and giving corrections. It means that all work turned in is as close to a final version as it canbe. That alone drastically cuts the costs of operating.

How Airbnb insists its developers write CSS code

In this article, we’re going to look at one big way to improve your business’ consistency. Bycreating:

Design style guidesEngineering style guidesWriting style guides

Let’s get into it.

Why bother with a style guide?

2/12

Apple’s strict style guide makes its brand instantly recognizable. Despite evolving over theyears, their design is so quintessentially Apple-y that it’s difficult to imitate, even though manyhave tried.

One thing style guides help you with is a strong brand identity.

“89% of B2B marketers say brand awareness is the most important goal” — Content MarketingInstitute Report

The key to a strong brand and increased brand awareness is consistency. The more youreinforce the brand in your customer’s head, the more likely they are to think of you when it’stime to buy.

“45% of a brand’s image can be attributed to what it says and how it says it” — Bop Design

A strong and consistent brand is a vital foundation for improving brand recognition, awareness,and loyalty.

3/12

You’re going to stay at the bottom of the pyramid if you don’t keep a consistent brand. And theonly way you can hope to maintain consistency is with style guides.

But what do style guides look like?

Style guide examples: designWhen you think of style guides, you probably think of brand style guides. These include logocolors, typography, and the general dos and don’ts of a brand‘s visual identity.

For this section, I’ve picked guides from two brands with a very strong visual identity — Appleand NASA — and one with a newer, more experimental identity that has evolved as thecompany found its feet.

In the words of NASA, these guides “establish a clear, consistent and unique visual identity”.As I looked at before in this article, these are key to improving brand recognition.

Apple

More than Medium or NASA, Apple needs to publish strict and comprehensive guidelinesbecause it accepts contributions from anyone in the world.

Apps on its App Store undergo a strict review process and must be up to scratch — clashingdesign or shaky functionality mean instant rejection. Apple wants to keep a cohesive visualidentity despite involving thousands of external developers. For that to be possible, they needto share these regularly-updated guidelines.

4/12

The excerpted guidelines above show the terminology and general design of key UI elements.The document’s overview builds the framework for what’s to come by first demystifying Apple-specific language and elements. For an example of a style guide that’s complex by necessity,look no further than Apple’s Human Interface Guidelines.

Medium

The Medium brand has evolved drastically over the years as the company changed itsdirection, ethos, and management. This style guide is a public version of the internaldocument, aimed at designers that are working with the Medium brand instead of Medium staffthemselves.

In the document, staff write:

“The Medium wordmark is an important expression of our brand identity. It should in no way bedistorted or redrawn when applied to communications. Because the wordmark is such arecognizable and highly visible brand asset, it is vital that it is always applied consistently.”

This helps Medium protect their brand from being misrepresented, and shows the internal team5/12

their limits.

Click here to read Medium’s brief design style guide.

NASA

NASA creates publications, stationary, web pages, and, of course, space rockets. These allhave stylistic requirements that are about as strict as you’d expect from a government agency.

It’s unclear whether or not NASA itself places importance on brand identity for the samereasons other organizations might, but the style guide does emphasize the need for aconsistent visual identity.

“The visual identity builds on NASA’s brand by combining the most recognized existing elements—our name and insignia—with progressive elements. Uniform graphic elements provide theframework for establishing a visual identity. In turn, designers can use this architecture to creatematerials that enhance public knowledge of NASA’s work.”

Click here to see NASA’s style guide.

Style guide examples: engineeringAt the outset, your engineering team might just be one person.

They’re the black box of the organization. You don’t really know how they work, you just knowthat they exhale features, sweat bug fixes and live deep inside the architecture of your product.

6/12

When you hire a second person… that’s when the problems start.

How do you name your variables?How do you use white space?Do you use tabs or spaces for indentation?How detailed should comments be? Is there a template?

The more code written without a style guide, the harder it’ll be to onboard future engineers.You might even get to the point where that first employee — the self-instated master builder —has created something so dense and impenetrable that it needs scrapping and building fromthe ground up before it’s scalable.

Catch the problem early and implement a style guide. It’s totally viable just to steal your styleguide from one of the following companies…

Airbnb

Airbnb’s engineering style guides caused a splash when the company first open-sourced them.The startup world’s shift towards transparency has had positive effects on the coding andengineering sphere as well as every other facet of business. Airbnb’s javascript style guide hasover 50,000 stars on GitHub and outlines the right and wrong way to write code that scaleswhen being collaborated on by a team.

The firm explain their rationale for a strict style guide through the idea that two engineers —Picasso and Dali — are in conflict over the one perfect way to write code.

“…When you have over 80 engineers contributing to one codebase, you quickly learn your usualways of doing things don’t work. So we try to turn everyone into Picasso. No matter where youjump in to the codebase, all the files are familiar and look like they were painted by you.

The most important thing, no matter what your preferred javascript style is, is to be consistentwhen working with a team or a large codebase that will have to be maintained in the future.”

Click below to see Airbnb’s engineering style guides:

7/12

Google

Unlike traditional large technology companies, a lot of Google projects are open source.Hosted and maintained on GitHub, these projects often involve thousands of collaborators,issues, and pull requests. How do you ensure consistency when you’re trying to organize workat this scale?

The answer: 11 style guides covering C++, JavaScript, HTML, and other major (and minor)languages.

To help developers stay in line with this heavy-handed guidance, Google has even createdcpplint, a tool that automatically validates adherence with Google style!

Click here to see Google’s 11 style guides on GitHub.

Mozilla

Mozilla aimed their style guide at new developers learning the codebase to make it easier forMozilla veterans to read and review the code of first-time contributors.

8/12

In a single document, the guide loosely covers JavaScript, Java and C++ and offers somerules as general structural guidance rather than being language-specific.

Click here to read the Mozilla coding style guide.

Style guide examples: writingWhen it comes to writing, you’ll be pleased to hear that you’ve already had a lot of the hardwork done for you. The AP Stylebook or the Chicago Manual of Style contain the majority ofstyle clarification you’ll need.

Both manuals are available for an annual subscription. Access to the AP Stylebook costs$20.80 per year, and the Chicago Manual of Style costs $39.

Even with these powerful reference manuals at your disposal, you’ll still need to writeclarifications on company-specific terminology, guidance for guest contributors, copywriters,process creators, user interface designers, and more.

Take a look at these examples of writing style guides from Apple, MailChimp, and ProcessStreet.

Apple

Apple’s strong brand has was shaped by an uncompromising culture of discipline andprecision. Its writing style guide alone is almost 200 pages long, and covers every possibleabbreviation error or instance of inexact language a writer could possibly make.

9/12

Based on the Chicago Manual of Style, the guide acts as a reference manual to improve theconsistency of Apple’s brand.

“The Apple Style Guide provides editorial guidelines for text in Apple instructional materials,technical documentation, reference information, training programs, and user interfaces. Theintent of these guidelines is to help maintain a consistent voice in Apple materials .”

Click below to get Apple’s writing style guides:

MailChimp

MailChimp’s content style guide is extraordinarily comprehensive. I expect that the strength oftheir content and copy owes a lot to the clear guidelines set out here, which cover a lot morebases than you’d expect.

Any business with a website and blog could re-use, edit, or expand upon MailChimp’sguidelines, using the topic list in the sidebar as points to consider. With over 700 employees, itwould be a struggle to keep the company’s voice in alignment without this document.

Process Street

10/12

Naturally, we format our style guides as checklist templates inside Process Street. This makesthem easy to share with readers, and easy for us to use internally when we’re checkingcontent against a set of guidelines.

Our process pre-publish checklist is a style guide for writing or standardizing documentation.Read more about the concept and how to put it into action in this post.

You can add the below template to your Process Street account and run a checklist wheneveryou’re checking a process document before you make it live.

Tools to help you create any style guideNow we’ve got the “what is” out of the way, it’s time to look at the “how to”. The examples inthis post cover the structure and scope of style guides, but now we’ll go over how to actuallymake your own. It all depends on the most convenient way to deliver a style guide to yourteam.

Broadly speaking, there are two kinds — static style guides and interactive style guides.

In this section I’ll explore both kinds, using both Process Street and Brad Frost’s Style GuideGuide to demonstrate.

Interactive style guides: Process Street

Style guides are usually reference manuals, but we believe that offering style guides aschecklists is a flexible and engaging way to ensure consistency in your code and content.

For many of our internal processes, elements of our various style guides live inside thechecklists themselves. See, for example, this guidance on SCSS inside our GitHub pullrequest procedure:

Static guides are useful as single-source-of-truth reference manuals, but baking snippets intoyour standard operating procedures is useful and more convenient for process participants.

Get a free Process Street account here.11/12

Static style guides: Brad Frost’s Style Guide Guide

Brad Frost — something of a style guide guru — has made his style guide template freelyavailable on GitHub. It works for creating static websites (a lot like the MailChimp example inthis article) with ready-to-use components.

Download Brad’s style guide template files here.

.

12/12