Frederick Sona
HomePortfolio › Brand guidelines document
Playbook

Brand guidelines document

Voice, visual system, application rules. This case study page holds the situation, the work, and the outcome.

Design capability demonstration. This page walks through the methodology and template I use when producing brand guidelines documents. The mark, palette, and type ladder shown are illustrative.

Why the document exists

Most brand guidelines are decks. A team files them in a shared drive after the launch meeting and never opens them again. Six months in, someone rebuilds the deck header because they cannot find the file, someone else picks a color from memory, and the identity drifts.

A working brand guidelines document is a reference, not a deliverable. It sits open on a second monitor. Designers, developers, marketers, and vendors all reach for it during production. This page is the template and methodology I use when a team asks for a guide that will still be in use twelve months after launch.

What separates a used guide from a shelf guide

Three properties do most of the work.

Everything a builder needs is one search away. Hex codes, RGB values, print codes, minimum sizes, clearspace values, font stacks, real SVG downloads. If a designer has to email someone for a hex code, the guide has failed.

The rules are shown, not narrated. A do-and-don't row is worth two paragraphs of principle. Every section carries a rendered example.

The guide reflects how the brand actually gets built. That means naming ratios and grids in the same units the team's tooling uses: rem in Tailwind projects, dp in Android, pt in native iOS, mm in print. A guide that specifies "8px baseline" for a team that builds in Figma auto-layout dies on contact.

The structure I ship

Seven sections in this order:

  1. Mark. The logo, its clearspace, minimum sizes, approved variants, misuse examples.
  2. Color. The palette in hex, RGB, HSL, CMYK, Pantone, plus contrast pairs.
  3. Type. The ladder from display down to caption, with fallbacks and weights.
  4. Layout. Grid, spacing scale, radius scale, elevation scale.
  5. Voice. Descriptors, sample sentences, editing rules.
  6. Application. Buttons, forms, cards, email header, social avatar, favicon, business card, invoice.
  7. Governance. File locations, version history, how to request an update.

Sections one through four are the ones a designer opens. Five and seven are the ones a marketing lead opens. Six is where the two worlds meet.

Mark spec

Every mark section shows three things on one page: the clearspace envelope, the minimum sizes for the surfaces the brand actually ships to, and the approved color variants. Misuse examples live on the facing page. Every mark file lives in one canonical folder with SVG, PDF, PNG at three densities, and EPS for print vendors.

CLEARSPACE FS x clearspace = 1x mark height MINIMUM SIZE FS 48px · web FS 24px · favicon FS 12px · print min APPROVED VARIANTS FS gold on dark FS mono / dark bg FS dark on light
Fig 1. Mark specification sheet. Clearspace, minimum sizes, and approved variants on one page.

Color

The palette section names six to nine colors, no more. Each color has a full record: hex, RGB, HSL, CMYK for uncoated and coated stock, and the nearest Pantone. Contrast pairs live on the same page so a designer can see which foreground colors clear WCAG AA against each background without opening a separate tool.

CORE PALETTE Ink 900 #0D0D0C · RGB 13 13 12 Bone #E6E4DD · RGB 230 228 221 Signal Gold #E0C75F · PMS 7752 C Bronze #8A6B3F · RGB 138 107 63 Rule #26261F · RGB 38 38 31 Mute #8A8779 · RGB 138 135 121
Fig 2. Core palette. Each swatch carries hex, RGB, and either CMYK or a Pantone reference.

Type

The type ladder is where guides most often over-engineer. Five to seven roles is enough: display, headline, subhead, body, small, caption. Every role names a family, weight, size, line height, and letter spacing. Fallbacks are listed in order. The web fallback is loaded before the primary in the CSS to avoid layout shift.

TYPE LADDER Display · 64 / 68 Neue Machina · 700 · -0.02em Headline · 42 / 48 Neue Machina · 700 · -0.015em Subhead · 28 / 36 Manrope · 600 · 0em Body copy · 17 / 28. Reads at any distance. Manrope · 400 · 1.65 line-height Small · 14 / 22 · secondary Manrope · 500 · 1.55 CAPTION · 11 / 16 · UPPERCASE · LETTERSPACED Manrope · 500 · 0.1em
Fig 3. Type ladder. Six roles, each with family, weight, size, and line height.

Layout

Layout sits between mark and application. The section names four scales, and everything downstream traces back to them.

Once the layout scales are named, arguments about "should this padding be 12 or 14" stop happening. There are only tokens.

Application rules

Application is where guides most often break down. A team ships eight rules for the logo and none for buttons, cards, or empty states. The guide I write covers each of these with a rendered example, the spec, and the file location of the source asset.

A brand guide that stops at the logo is a logo guide.

Every application page carries a do-and-don't row. Two rendered examples side by side, the correct one on the left with a green tick, the incorrect one on the right with a red cross and a one-line explanation of what went wrong. These rows do more teaching per square inch than any principle statement. Vendors and freelancers pattern-match against them without reading a single paragraph of guidance.

Voice

Voice is the section teams skip most often and lose most consistency around. I write it as three artifacts:

Editors and vendors reach for the sample sentences first. That is why they live at the top of the section.

Governance

Every guide lives somewhere and dies somewhere. I ship:

Without governance, the guide gets forked. With it, drift shows up in a diff.

The named owner is the most important line in the section. Most guides die because nobody is willing to say no to a well-intentioned exception. The person named in this section is the one who says no, or who folds the exception into the next revision. Either outcome is fine. The failure mode is silence.

What I keep

  • Seven-section order. It matches how teams reach for things during production.
  • Show, do not narrate. Every principle sits next to a rendered example.
  • One canonical URL. Nothing kills a guide faster than three copies with unclear precedence.

What I would change

  • Ship the token file alongside the visual guide. Some teams work from tokens first and never open the visual reference. Both have to exist.
  • Move accessibility into the main body. Contrast tables, focus states, motion preferences, and reading-order defaults belong up front, not in an appendix.

If your situation looks like this one, tell me what you are trying to move.

Start a conversation
← Back to portfolio