new Salesforce Integration with Help Scout!

For a brand to be authentic and recognizable, it must have its own unique standards.

Color, type, icons, imagery and even more abstract elements like tone, structure and values all play a role in nurturing people’s perception of a brand over time. But for a brand to be truly cohesive, it needs these individual elements to work together harmoniously, and that’s where a style guide comes in.

What is a style guide?

A style guide documents all the unique visual and experiential elements that make up your brand, so people working on your brand can provide a consistent experience across the board. Without consistency, a brand fails the authenticity test.

Creating the Help Scout brand has been a highly iterative process that’s taken years, culminating in a big update last year. My job was to create a style guide that serves as a hub for everything related to the Help Scout brand: visuals, copy and code. The goal was to produce a complete resource — from design and code to messaging — for anyone working with Help Scout that ensures the look and performance feel like they’re coming from the same place (but not necessarily from the same person).

Help Scout’s customer service software scales with you as your business grows. Start with our free plan →

The process of creating it changed my perception of what a style guide’s purpose is and how I communicate ideas. It challenged me both creatively and technically, and through that process, I discovered that all the most effective style guides follow six fundamental principles.

6 principles of a successful style guide

Contrary to what you might think, a style guide is more of a philosophy than a doctrine. It is a living document that changes as your company and brand evolves. But following these six principles is how you maintain consistency.

1. Be mindful of tone

The tone of your style guide is incredibly important.

Some style guides have a corrective “You’re doing it wrong” vibe, as if the rules are etched on stone tablets, never to be changed. Each guideline is immediately followed by five things you shouldn’t do.

While consistency is critical to building a great brand, your tone can still be welcoming and approachable. It can magically transform things from sounding like unbreakable rules into helpful and encouraging guidelines that inspire you to create, to iterate, and to improve.

Scale and Grid Illustration Guidelines

Not everything should be documented or interpreted in a rigid, non-negotiable way. Fact is, brands are ever-evolving, and certain aspects of your style guide should be up for debate and interpretation. New ideas should always be considered.

Creativity, especially ideas that are undocumented and untested, shouldn’t be stifled but encouraged! So we attempt to set the baseline for quality and leave space for new ideas in our style guide.

2. Implement creative constraints

Constraints are important for brand integrity. They keep your company’s look and feel — your “personality” — consistent and prevent the brand from being a little bit of everything to everyone. However, it’s difficult to implement constraints on something as free-form as creativity. That’s where the value of a style guide shows its cards.

Corners and Endpoints Illustration Guidelines
Ios Guidelines iOS Guidelines
Marketing site components Marketing Site Components

Help Scout Cofounder and Lead Designer Jared McDaniel says, “In order for a brand to evolve holistically, you need a style guide as the centerpiece. Every new idea for components, code, visuals, and content is vetted and tested within the context of the style guide before being put into production. That way, individual pieces are viewed as a part of the whole to ensure consistency throughout a brand’s evolution.”

Related: Reimagine Project Constraints as a Blank Canvas

3. Continue improving over time

Constant and never-ending improvement” (CANI for short) is represented by these symbols (“Kaizen,” or “improvement”) in Japanese:

Japanese symbol for improvement

It’s a concept we apply to everything we do at Help Scout. But improvements need a guide to prevent us from having opinion-driven conversations, which result in chaotic design that’s off-brand. That’s why having a style guide is so important — it’s a living example of CANI. It provides the foundation and principles for new features, projects, campaigns, even blog posts. And we can continue building on it.

With each new project, we’re making small, iterative improvements that form a new baseline. All of these standards can be critiqued, discussed, improved upon and revised at any time.

content-image

The latest Help Scout updates include improvements to our API, spam detection and more. See what’s new.

4. Share knowledge among teams

Shared knowledge enables your team to be more independent and efficient by providing them the information, philosophy and tools they need to complete a project. This allows for more time to be spent crafting and less time spent deciphering and reverse engineering submitted work. When you create institutionalized, shared guidelines, they can be learned and used as a point of reference to bring new ideas to life.

All knowledge ultimately means self knowledge. - Bruce Lee

An effective style guide leverages shared knowledge (and tools) to help people accomplish things they didn’t initially think they were capable of doing. People who aren’t designers should be able to follow some basic guidelines and create something awesome.

Color palette Color Palette

People who don’t code should be able to copy and paste the HTML they need to create something new.

Code Example Web App

People who don’t write copy should be able to reference some examples, follow the guidelines, and produce something that fits within the tone of the company.

Editorial Guidelines Post Copy Guidelines

All of this happens as a result of shared knowledge: The “subject matter experts” pull back the curtain, document best practices, and make it easy for others to do what they do in a brand-aligned way. We try to organize things in such a way that anyone can copy and paste what they need. It’s helpful to make the style guide interactive with code samples and other elements that can be re-used.

5. Don’t go it alone

Creating a style guide should be a team effort; don’t try and do it all yourself. Start by mapping out which sections need to be included and who is responsible for what. Here’s what that ended up looking like for us:

Styleguide Spreadsheet

Each topic has an owner who is responsible for producing the content, plus a due date to keep the process moving along and everyone on track.

What about engineering?

A lot of these ideas sound like they apply specifically to design, or content. However, they absolutely apply to engineering as well. A great example of that would be the new engineering framework we created called Seed.

Seed

Seed is a modular, open source CSS framework that we’ve created from scratch to make design more accessible to others, including developers. Seed currently powers the design of our entire marketing site, and is slowly being implemented into our web app as well.

One of the goals for Seed is to give Engineers the ability to build complete (sometimes complex) UI-based features on their own, without the help of a designer. It empowers them to get their ideas out and visual them in the app, without ever having to fiddle with CSS.

6. Find inspiration

The site I refer to the most in my work is Bootstrap’s documentation.

Bootstrap's documentation

Though it’s not an actual style guide, I used it as my point of reference for the Help Scout style guide. It’s one of the most widely used frameworks in the world, it’s a good baseline for documenting and showcasing code.

I also take a peek at Saleforce’s Lightning Design System from time to time, because they have done a great job developing a style guide for developers, with heavy code examples and super light copy.

Salesforce's documentation

Approachability is important. You have to strike a balance between the necessary evil that is complex code examples, and guidance through copy and tone. Even if you’re unfamiliar with code, Bootstrap’s documentation feels a lot more manageable compared to Salesforce’s Lightning behemoth. The presentation, balance and flow of the style guide or documentation can translate to a reading experience comparable to either leisurely following an IKEA manual or working through an impressively thick academic textbook. However, just because documentation is giant code blocks, it doesn’t mean it can’t be easy (or even fun) to read and refer to.

Python (the coding language, not a mere library or plugin) has easy-to-follow, fun-tastic code documentation. They even have a page dedicated to highlighting their humor. This approach makes their otherwise dauntingly encyclopedia-like collection of words and code feel like a good book (if you’re into that sort of thing).

Reading list icon

Style guides we love:

Want more inspiration? Dribbble is a great place to find awesome style guides other designers are sharing!

More than just a guide

When I joined Help Scout last year, the style guide was one of the first projects I was asked to work on. With some style guide experience, and countless hours spent admiring work from other companies, the task of getting Help Scout’s style guide up and running seemed like a fun one. To my surprise, it became even more.

Our style guide transformed from being just another URL of company documentation into this wonderful, collaborative collection of ideology that empowers people and encourages creativity. And we’re proud to be able to share “The Help Scout Way” with the world.

content-image

See the Help Scout style guide.

Jon Quach

About the author: Jon is on the design team at Help Scout, the invisible help desk that helps you build a company your customers love with more human, more helpful customer support tools.