What goes into brand guidelines
Brand guidelines (also called a brand book or brand style guide) are the rules that keep a brand looking and sounding the same wherever it appears: on the website, in a social post, on a van or in a slide deck someone made at 11 pm. The template builds the eight pages most small and mid-size brands need, in this order:
- Cover with your name, tagline, version and date.
- Logo and clear space: the margin to keep empty, the minimum size, and how the logo sits on light and dark backgrounds.
- Logo misuse: six examples of what not to do, drawn from your own logo.
- Color palette with HEX, RGB and CMYK values and the WCAG contrast of white and black text on each color.
- Typography: heading and body fonts, specimens and a size scale.
- Imagery and tone of voice: the words that describe you, what you are and are not, and photo rules.
- Applications: business card, letterhead and a social post using your logo and colors.
- Contacts: who to ask before publishing something new.
How to fill in the template
Logo
Upload the cleanest file you have: an SVG, or a PNG with a transparent background at least 1000 pixels wide. If your logo is light or white for use on photos and dark colors, upload that version as the reversed logo. The misuse page distorts, rotates and recolors your real logo, so people see exactly what to avoid.
Colors
Put the primary brand color first, then supporting colors, then neutrals for text and backgrounds. Three to five colors is enough for most brands. Name each color and give it a job ("Buttons and links", "Body text"), because a palette without roles gets used at random. This is what the palette page prints for the sample palette the template opens with:
| Color | HEX | RGB | CMYK | White text | Black text |
|---|---|---|---|---|---|
| Harbour Blue, primary | #1F4E79 | 31 78 121 | 74 36 0 53 | 8.66:1 AAA | 2.42:1 Fail |
| Signal Amber, accent | #F2A541 | 242 165 65 | 0 32 73 5 | 2.05:1 Fail | 10.23:1 AAA |
| Ink, text | #141210 | 20 18 16 | 0 10 20 92 | 18.69:1 AAA | 1.12:1 Fail |
| Paper, backgrounds | #F7F5F1 | 247 245 241 | 0 1 2 3 | 1.09:1 Fail | 19.29:1 AAA |
The contrast columns are the useful part: the amber reads only with dark text on it, so a designer knows never to set white on it. The CMYK values are a direct conversion for reference; for print, ask your printer for a proof or a Pantone match. To build or adjust the palette first, start in the color palette generator.
Fonts
Choose one font for headings and one for running text. Pairing a serif heading with a sans serif body (or the reverse) is the safest way to get contrast without clashing. If your brand uses a font that is not in the list, add its .ttf file and it is embedded in the PDF. Check first that your font licence allows embedding in documents: licences differ by foundry and by the kind you bought.
Tone of voice
Pick three to five words for how the brand sounds, then make them concrete with "we are" and "we are not" examples. "Friendly" means little on its own; "we use first names and short sentences, we never use exclamation marks in support replies" is something a new hire can follow.
Tips that keep a brand guide in use
- Keep it short. A guide people read beats a long one nobody opens. Eight to fifteen pages covers most small businesses.
- Share the files with it. Send the guide together with the logo files (SVG, PNG and a reversed version), the font files or links, and the favicon set from the favicon generator.
- Check text contrast. The palette page grades every color for white and black text against WCAG. For any other pair, use the color contrast checker.
- Put the rules to work. The fastest place to apply a new palette is the email signature everyone sends daily: the email signature generator takes your hex codes.
- Version it. Change the version number when a rule changes, and keep one current copy in a shared folder.
Methodology and limits
- Page sizes
- US Letter is 8.5 x 11 inches (215.9 x 279.4 mm), A4 is 210 x 297 mm, both portrait. The page size starts on A4 when your browser reports a UK or European locale or time zone, and on US Letter otherwise; you can switch either way.
- How the PDF is made
- Built in your browser with jsPDF: 8 pages, a bookmark per page, the document title and language set, email and website as links. The PDF's own headings and notes use US spelling, or UK spelling (colour) when your browser is set to UK, Irish, Australian, New Zealand or South African English. The preview is the same PDF drawn back with pdf.js.
- Fonts and licensing
- Every font in the lists is published under the SIL Open Font License, which allows commercial use and embedding. Their specimens (the large letters, alphabets and sample lines) are drawn as images at about 300 dpi; running text uses Helvetica or Times as a stand-in. Upload the .ttf of your font and it is embedded and used for all headings or body text, which is why its licence must allow embedding.
- Colors
- CMYK is a direct mathematical conversion from RGB (K = 1 minus the largest of R, G, B), not a print profile. Contrast uses the WCAG 2.2 formula against white and black: AAA from 7:1, AA from 4.5:1, AA large from 3:1.
- Logo rules
- Transparent margins are trimmed. The clear space shown is half the logo height on every side, and the minimum sizes (1 inch or 25 mm in print, 120 px on screen) are sensible defaults to edit for your logo, not a standard.
- What it does not do
- The PDF is not tagged, so it is not an accessible document for screen readers. It does not export to Figma, Canva or Word, match Pantone colors, or check your logo files. With the standard fonts, characters outside Western European sets print as "?"; upload a .ttf to avoid it.