Explained in 60 Seconds: Style Guides

You may think you know exactly what a style guide is, but depending on who you’re talking to, you could be completely wrong. Most of us, particularly those of us who have anything to do with maintaining brand identity, assume a style guide refers to a collection of guidelines that govern usage of creative elements and details in digital, print, and media vehicles. And while we’re right about that, there are other types of style guides that are just as important to keeping a consistent brand look and feel.

Design Style Guide

The design style guide is the one most of us are already familiar with. It makes clear how creative elements are used in order to maintain brand standards. The typical information you’ll find in one includes:

• Brand overview

• Acceptable typography

• Brand color palettes

• Logo usage including versions, size, and positioning

• Photography standards

• Buttons and icons

Many organizations make their style guides public by posting them to their website. Check out this one and this one for some inspiration.

Content Style Guide

As the folks over at Gather Content will tell you, “When it comes to content, consistency is key.” That’s where a content or editorial style guide comes into play. It’s especially important to have one these days, as digital marketing strategies have become much more focused on content creation and the number of contributors involved from across organizations has increased. A guide will serve to outline everything from the appropriate voice and tone for any content the brand produces to grammatical and editorial preferences and standards.

Our friends at Meet Content suggest including these topics to make your style guide as exhaustive as possible:

• Messaging architecture and communication goals

• Voice and tone

• Style and usage

• Web writing guidelines

• Inline link formatting

• SEO and findability best practices

• Metadata guidelines

• Social media guidelines

• Visual communication usage

Code Style Guide

Sometimes referred to as a “pattern library,” this type of style guide is meant to keep code consistent across a website. It goes in-depth to break down assorted elements and modules on a site and can ultimately save your technical team time on a project as the guide clearly lays out the specific styles they need to implement.

Perhaps even more important, having a code style guide can save your users a lot of time. Clean, standardized code loads faster, something your site visitors will definitely appreciate.

On his blog, Brad Frost suggests a multi-disciplinary style guide is the best way to go. By keeping all of the standards for design, content, and code in one place, your team will have to reference only one place instead of multiple, leaving no excuses for straying from internal best practices.

Regardless of the flavor of style guide you’re putting together, there are some key elements you’ll want to make sure of:

• Your guide is in an easy-to-read format that clearly communicates your point through plenty of examples that illustrate both the right way and the wrong way.

• As design, tone and voice, or internal code standards change, so does the guide. Updating it regularly ensures that it remains a valuable document for your organization.

• While it may seem obvious to point out, easy accessibility is often overlooked. Whether created and shared as a Google Doc or posted on your website or intranet, the guide should be at everyone’s fingertips, making it quick to reach and implement.