Style guide

A style guide is the document that tells people how a brand looks and sounds: visual rules, writing rules, and examples to follow. It lets anyone, inside the company or at an outside agency, produce content that feels like the brand without asking for permission on every line.

Three kinds of style guides

The search term “style guide” covers three neighboring documents, and the results mix them together:

• The editorial style guide covers writing only: grammar, punctuation, capitalization, spelling choices, how to cite sources. The best-known references are the AP Stylebook, used in journalism, and the Chicago Manual of Style, used in publishing. Many companies pick one of them as a base and add their own exceptions.
• The brand style guide combines visual and verbal rules for a company: logo, colors, typography, imagery and tone of voice. It is the version most marketing teams mean.
• The UI style guide describes how a product’s screens look: buttons, fields, spacing. Once it adds code and documentation, it grows into a design system.

Rule, good example, bad example

The guides people actually use share one format: a short rule, a correct example, and an example to avoid. “Do not recolor the logo” is forgotten by Friday. The same rule with two thumbnails, the right one and the wrong one, sticks. Writing works the same way: next to “avoid jargon”, a sentence shown before and after rewriting is worth a hundred instructions.

Rules worth writing down

You do not need to document everything. Start with the rules that prevent real mistakes, the ones people get wrong again and again:

• how the brand name is spelled and capitalized. At Mazette.co, for instance, the name is always written “Mazette.co” with that exact casing, never “Mazette” alone;
• the minimum logo size and what it must never be placed on;
• the one or two colors used for calls to action, so they stay recognizable;
• the words the brand avoids, and the term it uses instead;
• how numbers, dates and prices are formatted, which is the classic source of small inconsistencies.

How to make your own style guide

1. Start from what already exists. Gather recent materials (website, decks, emails, posts) and note what varies from one to the next.
2. Settle the brand basics. Positioning, values and tone of voice need to be decided before detailed rules.
3. Pick the rules that matter. Twenty rules that get applied beat two hundred that get ignored.
4. Illustrate each rule. One good and one bad example, taken from real cases.
5. Test it on a newcomer. A new hire or a freelancer should be able to produce a compliant page using the document alone.
6. Publish it where everyone can find it. A shared web page beats a PDF lost in a folder.

What a well-written rule looks like

Here are two rules as they appear in a guide, each with a correct and an incorrect example:

• Rule: always address the reader as “you”, never in the third person. Do: “You can edit your site without a developer.” Avoid: “Users can edit their sites without a developer.”
• Rule: one primary button per screen. Do: a filled button for the expected action, plain links for everything else. Avoid: three buttons of equal weight competing for attention.

Each rule fits in one sentence, and the example can be checked at a glance.

The website style guide: a living page

For a team building a website, the style guide takes a particular form: a page of the site (or of the design file) showing headings, paragraphs, buttons and colors exactly as they are coded. Developers refer to it so they do not reinvent anything, and designers spot at once any gap between mockup and production. It is the link between the brand style guide, which says what to do, and the design token, which stores it as values the code can use.

Keeping it alive

A style guide is never finished. Name one person in charge, date the versions, and plan a review each time something significant changes: a new product, a new platform, a new channel. If it is only opened on launch day, it is useless. If reviewers cite it when they check content, it becomes a habit.

Neighbors worth knowing

• Brand guidelines lay the visual groundwork: logo, colors, typography.
• A brand book is the broadest of them all: it adds the story, the values and the positioning.
• A UI kit provides ready-made interface components on the design side.

To write these rules down for a brand that moves fast, Brand and graphic design at Mazette.co starts from strategy, then formalizes the identity and how to use it.