Put your brand guidelines on a website people can link to
A brand book in a PDF gets downloaded once and then copied from an old version for years. A brand guidelines website has one address, always shows the current rules, and lets someone link a colleague straight to the logo section. Keep it short, make every rule specific, and show examples of what not to do.
What the guidelines need to cover
The people who open brand guidelines are usually in a hurry: a freelancer making a social graphic, a partner putting your logo on their site, a new hire writing a slide. Organise the site around their questions, not around how the brand was developed.
- Logo
- The main version, a one-colour version, a small-size version, clear space around it, the minimum size, and on which backgrounds each one is used.
- Colour
- Each colour with its HEX and RGB values for screens and CMYK or Pantone for print, its name, and the role it plays: background, text, the one action colour.
- Typography
- The typefaces, where to get them, the weights in use, and a simple scale for headings and body text.
- Imagery
- What photographs look like (light, subject, cropping) with a few real examples, and what to avoid.
- Voice
- Three or four principles with a rewritten before-and-after example for each.
- Contacts
- Who to ask for approval and how to get the source files.
Show the mistakes, not just the rules
A rule like "don't distort the logo" is easy to agree with and easy to forget. A grid of real misuse examples, each crossed out and captioned, sticks: stretched, recoloured, on a busy photo, with a drop shadow, rotated, cramped against text. Do the same for colour (the action colour used as a large background, low-contrast text on brand colours) and for voice. Upload the example images to the build; give each one alt text that says what's wrong with it, so the guidance works for screen-reader users too.
A page per topic, or one long page
Small brands fit on one page with a contents list at the top. Larger ones read better as a short multi-page site: Logo, Colour, Type, Imagery, Voice. Anticode builds multi-page sites; ask for the topics as separate pages and check the plan the Architect shows before building. Another route is a CMS collection with one entry per topic, since each entry is served at its own address that a brief can link to directly. Keep the address stable; people will bookmark it and paste it into briefs.
One practical point: logo source files and font files need somewhere to live. Anticode's forms don't take uploads and the guidelines page itself is for reading, so keep the download pack in a shared drive or asset tool and link to it from a clearly labelled section. Remember that a published site is public, so put nothing on it you wouldn't want competitors to read, and keep any confidential launch plans elsewhere.
What Anticode's design systems show about consistency
Anticode holds every site it builds to one of seven design systems, and the rules it enforces are a compact brand style guide in themselves: one font family per site, one action colour, corner radius set by an element's role rather than chosen case by case. The Critic flags a third font family, and the design gate blocks it along with serif fallbacks. That's the same discipline good guidelines ask of everyone else.
| Rule in your guidelines | How Anticode's builds apply the same idea |
|---|---|
| Use one typeface family | One family per site: Geist, IBM Plex Sans, Jost, Fredoka, Archivo, Figtree or Inter Tight |
| Reserve the accent for actions | One action colour per site, chosen from red, orange, gold, green, teal, blue, pink or black |
| Consistent corner shapes | Radius by role: buttons, cards and inputs each follow one rule |
| Write in the brand voice, not filler | The design gate blocks stock AI phrases and placeholder text |
The flip side is that the guidelines site itself is set in its design system's typeface, not necessarily yours. If your brand uses a typeface outside those seven, show it on the Typography page as specimen images and link to where it can be licensed. The brand guidelines to website article covers turning guidelines into a site's design.
Building it
Describe the brand and the sections you need, and upload your logo files and example photos to the build. Pick the design system closest to your brand's character; Swiss (Inter Tight) and Editorial (Geist) suit most online brand guidelines because they stay out of the way. Then check every value: the model can lay out a colour table, but the HEX codes and Pantone references must come from your source files. Recent saves are kept in version history (up to a per-plan number), which gives you a short record of when a rule changed; keep a dated changelog section on the site for the longer view.
Limits
- No private or password-protected pages. Internal-only guidelines belong on an intranet.
- No file downloads from forms, and no asset library; link to your shared drive.
- Your brand typeface may not be the site's typeface. Show it as images if it isn't one of the seven.
- No embedded Figma files or videos. Link to them.
Questions people ask
Should we still keep a PDF?
Some printers and agencies ask for one. Keep it as a dated export and make the website the version you update.
Who should be able to edit the guidelines?
As few people as possible. In a Team workspace, members can edit, but only owners and admins can delete projects or take sites down.
How long should brand guidelines be?
As short as covers the questions people actually ask. Most small brands need a handful of sections, not a fifty-page book.