The Living Style Guide

byBrandon Showers

We believe in the importance of brand. So much so that we’ve dedicated our focus on helping marketing teams work better together throughout their brand marketing process. We take that same approach when building our product and our brand.

Does any of this sound familiar?

Do you remember a time when you worked on a project where your development teams maintained multiple systems and your front-end styles were slightly off but looked close enough?

Have your designers gone up in arms because your engineers can’t seem to get that button style pixel perfect?

Did you get frustrated when the agency you hired didn’t use the correct styles even though they were given direction on your color palette, typography, and overall look-and-feel?

Frustrating, right.

Our teams have found huge success with the introduction of a living style guide. I’d like to share some of what we’ve learned to help you create alignment between your teams, contractors, and the world when working with your digital brand.

A style guide is:

A set of standards dictated by your digital brand. It establishes and enforces styles, rules, and guidelines to improve communication, collaboration, and construction of your application, project, or work of art.

To do that, it ensures consistency within a design and across multiple structures that enforce best practices in usage.

Compliance is the key. When successfully followed, a team halfway around the globe could produce a product with such consistency you would think they were in the office with you and your team during the life of the project!

Here are a couple of examples of style guides that come with all the bells and whistles. Depending on your situation you may choose to include only what you need from these frameworks.

We needed a bit more control of our style guide and wanted to start with almost nothing in our way of customizing our entire suite. We’ve opted for an atomic design approach with inspiration from what the folks at Thoughtbot did with Bourbon, Neat, Bitters, and Refills.

How to get started

I bet you find yourself in one of two situations:

Starting a project from scratch

Inheriting a project or joining a team where the project is already underway

You may be starting with a clean canvas (new project) or working within an existing project. In my experience both cases require the same approach. Start small and iterate quickly. If you focus on perfection right out of the gate you may paralyze yourself, your team, and even worse, your project.

Start small and iterate quickly. Consistency, alignment, and happiness will follow.

Quick feedback is valuable. If used appropriately you can catch those larger issues and save time and money down the road. When used successfully you and your project will begin to thrive!

Where to go from here

You don’t need all the bells and whistles of a Bootstrap, Foundation, or similar to get started. Keep the rollout small and don’t focus on perfection from the beginning. Think of your style guide as an ongoing project, that lives, and needs to be tended to regularly…almost like a garden. Starting small will also help you and your teams adapt much faster. In no time you will begin to see the tremendous value of a living style guide.

The importance of a living style guide is to create consistency throughout your brand. It is that common language for your internal teams and external agencies. When implemented properly it will increase your brands consistency and development efficiency. It is a must-have for all brands in today’s fast paced world.