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

How to Create a Style Guide to Improve Business Consistency (with 8 Examples) process.st/create-a-style-guide/ January 10, 2018

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 a lone developer.

Writers, editors, programmers, engineers, social media managers, and support agents all need an 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 hurts conversion rate and revenue. Once you’ve settled on your brand voice and style, the style guide 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 on one 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, and improve 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 can be. 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. By creating: Design style guides Engineering style guides Writing 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 the years, their design is so quintessentially Apple-y that it’s difficult to imitate, even though many have 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 Marketing Institute Report The key to a strong brand and increased brand awareness is consistency. The more you reinforce the brand in your customer’s head, the more likely they are to think of you when it’s time 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 the only way you can hope to maintain consistency is with style guides.

But what do style guides look like?

Style guide examples: design When you think of style guides, you probably think of brand style guides. These include logo colors, 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 — Apple and NASA — and one with a newer, more experimental identity that has evolved as the company 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 guidelines because it accepts contributions from anyone in the world.

Apps on its App Store undergo a strict review process and must be up to scratch — clashing design or shaky functionality mean instant rejection. Apple wants to keep a cohesive visual identity despite involving thousands of external developers. For that to be possible, they need to 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 Applespecific 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 its direction, ethos, and management. This style guide is a public version of the internal document, aimed at designers that are working with the Medium brand instead of Medium staff themselves.

In the document, staff write: “The Medium wordmark is an important expression of our brand identity. It should in no way be distorted or redrawn when applied to communications. Because the wordmark is such a recognizable 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 team

5/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 all have 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 same reasons other organizations might, but the style guide does emphasize the need for a consistent 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 the framework for establishing a visual identity. In turn, designers can use this architecture to create materials that enhance public knowledge of NASA’s work.”

Click here to see NASA’s style guide.

Style guide examples: engineering At 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 know that 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 from the ground up before it’s scalable.

Catch the problem early and implement a style guide. It’s totally viable just to steal your style guide 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 and engineering sphere as well as every other facet of business. Airbnb’s javascript style guide has over 50,000 stars on GitHub and outlines the right and wrong way to write code that scales when 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 usual ways of doing things don’t work. So we try to turn everyone into Picasso. No matter where you jump 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 consistent when 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 work at 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 created cpplint, 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 for Mozilla 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 some rules as general structural guidance rather than being language-specific.

Click here to read the Mozilla coding style guide.

Style guide examples: writing When it comes to writing, you’ll be pleased to hear that you’ve already had a lot of the hard work done for you. The AP Stylebook or the Chicago Manual of Style contain the majority of style 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 write clarifications 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 Process Street.

Apple Apple’s strong brand has was shaped by an uncompromising culture of discipline and precision. Its writing style guide alone is almost 200 pages long, and covers every possible abbreviation 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 the consistency 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. The intent 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 of their content and copy owes a lot to the clear guidelines set out here, which cover a lot more bases than you’d expect.

Any business with a website and blog could re-use, edit, or expand upon MailChimp’s guidelines, using the topic list in the sidebar as points to consider. With over 700 employees, it would 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 makes them easy to share with readers, and easy for us to use internally when we’re checking content 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 whenever you’re checking a process document before you make it live.

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

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 Guide Guide to demonstrate.

Interactive style guides: Process Street Style guides are usually reference manuals, but we believe that offering style guides as checklists 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 the checklists themselves. See, for example, this guidance on SCSS inside our GitHub pull request procedure:

Static guides are useful as single-source-of-truth reference manuals, but baking snippets into your 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 freely available on GitHub. It works for creating static websites (a lot like the MailChimp example in this article) with ready-to-use components.

Download Brad’s style guide template files here. .

12/12