Free brand guidelines generator: Turn your website into brand guidelines with its colors, fonts and rules

What are brand guidelines?

Brand guidelines are the rules that define how your brand looks and how people should use it. They cover your logo, colors, fonts, images and layouts. Anyone who creates content for you can open them and get it right the first time.

They serve 3 purposes:

• They keep your brand consistent across your website, ads, slides and social posts.
• They save time, because designers and marketers stop asking the same questions.
• They protect your brand when agencies, partners or new teams join.

Your logo looks sharp on your homepage. Then it shows up stretched in a sales deck and in the wrong blue on LinkedIn. Every new hire, freelancer and agency guesses a little, and those guesses add up to a brand that looks different everywhere. Brand guidelines stop the guessing.

What to include in brand guidelines

For each element, your guidelines should answer 2 questions: what exactly should people do, and what should they avoid?

Start with the logo and colors, because every other element depends on them.

Brand guidelines example

Ember Hollow Roasters is a made-up coffee roaster. It sells beans online and runs 2 cafés. Here is what its guidelines contain.

Color palette

Roast Brown on Crema reaches 8.4:1, so it works for all text. White on Kiln Orange reaches 3.5:1, which passes for large text only: button labels stay white, bold and at least 24px. Kiln Orange on Crema reaches 2.9:1, and the brand never uses it for text.

Typography

• Headings use Fraunces at weight 600, with 48px for H1 and 32px for H2.
• Body text uses Inter at weight 400, 16px, with a line height of 1.5.
• Emphasis uses Inter at weight 600. Italics stay rare.

Logo rules

• Keep clear space equal to the height of the letter “E” on every side.
• Never display the logo narrower than 120px on screen or 30mm in print.
• Use the logo only in Roast Brown or Crema, and never stretch, rotate or add effects.

How to create brand guidelines in 7 steps

1. Audit what you already use. Collect your website, slides, ads and social posts. List every color, font and logo version you find.
2. Pick the official versions. Keep 1 main color, a few secondary colors and a set of neutrals. Remove the near duplicates.
3. Record exact values. Write the HEX and RGB code of each color. Note the name, weights and sizes of each font.
4. Check accessibility. Test every text and background pair against the WCAG contrast ratios.
5. Write usage rules. Explain what each element is for, then list what to do and what to avoid.
6. Show real applications. Add examples on a web page, a slide and a social post.
7. Share and update. Publish the document where everyone can find it. Review it each time your brand changes.

Brand guidelines for your website

Your website shows your brand every day. So your guidelines need values that a developer can use right away.

Use HEX codes and CSS variables

Browsers read HEX codes directly. List each color as a HEX code and as a CSS variable. When the color changes, your developers update 1 line instead of searching every file.

:root {
  --color-primary: #5A3825;
  --color-background: #F3E6D3;
  --color-accent: #D9682B;
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", Arial, sans-serif;
}

Meet WCAG contrast ratios

WCAG sets minimum contrast ratios between text and its background:

• 4.5:1 for body text;
• 3:1 for large text, which means 24px and up, or 18.66px and up in bold.

Low contrast makes text harder to read for everyone, and especially for people with low vision.

Choose web fonts with fallbacks

Pick fonts that load on the web, such as Google Fonts or licensed web fonts. Name a fallback for each one, like Georgia for a serif or Arial for a sans serif. List only the weights you load, because each extra weight adds file size.

Create your brand guidelines from your website

Already have a website? The free Mark AI brand guidelines generator reads your page and its stylesheets. Enter your URL and it pulls:

• your color palette (main color, secondary colors, neutrals) with HEX and RGB codes;
• the fonts of your headings and body text, with their weights and sizes;
• the logo and icon of your site.

Then it checks your contrast against the WCAG rules and writes the usage rules: what each color is for, how to use the fonts and the logo, what to do and what to avoid. The result copies as CSS variables and downloads as a PDF. It is free, needs no sign-up and takes about a minute.

The tool documents the identity visible on your website. It does not design a logo or suggest new colors, and it lists what complete guidelines still need, such as CMYK codes or a photo style.

Brand guidelines, brand style guide, brand book and brand kit: the differences

People use these terms loosely, and many teams treat them as synonyms. This table shows how they usually differ.

In practice, the brand book explains who you are, the guidelines show how to express it, and the brand kit hands over the files. For the writing side, the brand voice generator pulls your tone and writing rules from your pages.

Brand guidelines template: the outline to copy

Copy this outline into a document or a slide deck, then fill in each section:

1. Introduction, with the purpose of the document, its owner and the last update date.
2. Logo, with versions, clear space, minimum size, backgrounds and misuse examples.
3. Color palette, with main, secondary and neutral colors, their HEX and RGB codes and their roles.
4. Typography, with heading and body fonts, weights, sizes, line height and fallbacks.
5. Iconography, with style, stroke width, size grid and colors.
6. Photography, with subjects, light, framing and examples to follow or avoid.
7. Layout, with grid, margins and spacing.
8. Accessibility, with the color pairs that pass WCAG and the pairs to avoid.
9. Applications, with examples on your website, slides, social posts and emails.
10. Contacts and files, with who approves new uses and where to download the brand kit.

Mistakes to avoid

• Listing colors without codes. “Dark blue” looks different on every screen and in every print shop.
• Ignoring contrast. An elegant color pair can still fail WCAG and make your text hard to read.
• Writing rules without examples. Show a correct use and an incorrect use side by side.
• Adding too many colors and fonts. Each extra option gives people one more way to drift.
• Letting the document age. If your website changes and your guide does not, people stop trusting it.
• Hiding the file. Guidelines buried in an old email thread help no one.

Brand guidelines FAQ