Three Website Brand Guideline Examples to Inspire You

By Elliot Olson

By Elliot Olson

Lead Web Designer + Digital Strategist

Looking for some inspiration for your website brand guidelines?

Or maybe you’re wondering…

Um, what exactly are website brand guidelines to begin with?

If this is the first time you’re hearing about website design guidelines, start here:

START HERE ? Create Easy & Elegant Website Brand Guidelines

That intro article will give you all the background info on brand guidelines.

It covers…

  • Your logo
  • Choosing fonts
  • Finding images
  • Picking colors

Right, you all caught up?

Inspired to create your own guidelines?

Fantastic — let’s do it! I’ll walk through three examples of website brand guidelines and explain each element.

Hopefully these can inspire your own website brand guidelines. When you’re ready to create your guidelines, download my free website brand guidelines template from Canva.

Happy designing!

Example 1: Boutique Website

First, let’s look at website brand guidelines for Rosethorn Boutique, a fictional neighborhood gift shop in ye olde Towntown.

LOGO

The boutique logo uses a handwritten font, giving it a feeling of warmth and friendliness. Plus, the rose icon ties into the name of the shop.

Note that there’s both a vertical and horizontal layout of the logo. This is important to give the boutique options for marketing and logo placement in the future — the owner will be able to use her logo in different layouts without having to waste time recreating logo files.

Logos for fictional boutique shop

COLORS

The boutique owner has chosen purple tones. She has selected a dark and light purple, neutral pale gray, and muted green-gray to serve as the accent.

Overall, the colors are calm and inviting — there’s no jumble of neons or clashing colors here.

Color palette for boutique shop with purples and grays

FONTS

The fonts are quite different, so the titles and paragraphs will be distinct.

The title font, PORCELAIN, is the same as the logo font. It is bold and easy to read. Besides uniting the logo and titles on the website, this font will also stand out on webpages and in print.

The paragraph font, OPEN SANS, is modern and crisp. It will be distinct from the handwritten appearance of the logo and boldness of the title font.

Example of contrasting fonts

IMAGES

The four inspiration images share unifying colors and moods. They are all calm and muted, with enough elements to be engaging without being overwhelming.

None of these images demands action or haste — they’re all subdued, yet interesting.

Example of images for boutique shop

Example 2: Fitness Website

Next up, let’s look at website brand guidelines for Flex Fitness, a gym in the lovely town of Fictionalville.

LOGO

The logo is written in the DM SERIF DISPLAY font, chosen for its solid presence and heavy appearance.

The logo also incorporates the bright orange of the color palette. The orange is bright enough to grab attention, yet not so bright that it’s illegible.  Example of logos for fictional gym

Bright colors can be tricky — if they’re too bright, the words can be impossible to read. Check out this yellow example:

(See what I mean?)

Happily, the orange in this logo shows up just fine.

Plus, the owner has the logo in both horizontal and vertical format. She will be able to change logo displays on the desktop vs mobile version of the website.

COLORS

The colors are drawn from the inspiration photos. The gym owner has picked a light orange, dark orange, neutral gray, and purple accent.

Color palette for gym website

FONTS

The two fonts are different enough for distinction, yet both clear and legible for online and offline use.

The title text, DM SERIF DISPLAY, is a solid serif font that demonstrates seriousness. This gym is all about getting down to business — in this case, the business of fitness!

The paragraph text, POPPINS LIGHT, is easy to read and modern. It brings modernity and crispness to balance the gym’s heavy serif titles.

Two fonts for gym website

IMAGES

The four inspiration images share unifying colors, motifs, and moods. They all have elements of orange and activity, bringing motion and feelings of determination and grit to these brand guidelines.

Example of images for fictional gym

Example 3: Laundromat Website

Finally, let’s look at website brand guidelines for Spin N’ Clean laundromat in Redding, California.

(Invented at random — although if there is a laundromat in Northern California that needs website brand guidelines, here ya go!)

LOGO

The logo is written in a clear, crisp font. Along with the laundromat name is an icon of a dress shirt — a visual cue of the nature of the business.

Again, the logo is prepared in both horizontal and vertical format for easy use in different scenarios.

Logos for fictional laundromat

COLORS

The colors are a mix of blues and grays, with an overall mood of cleanliness and calm.

Color palette showing color codes

FONTS

Both fonts are sans serif, but they are different enough that titles and paragraphs will be distinct.

The title font, ALYSSUM, is bold and easy to read at a distance. It will stand out on webpages and in print marketing.

The paragraph font, ROBOTO, is clean and crisp — good visual cues for audiences looking at a laundromat website!

Example of two different fonts

IMAGES

The images are a mix of clothing and laundry images, plus a photo of the owners’ family.

All four images are united by calm blues and muted gray tones.

Laundromat images for style guidelines

Feeling Inspired?

You’re in luck!

When you’re ready to create your guidelines, download my FREE website brand guidelines template from Canva. Happy designing!

WANT MORE WEBSITE STRATEGY?

Receive weekly, straight-to-the-point website tips. No fluff, no nonsense. Because I value your time as much as I value my own.

By entering your information, you agree to receive emails from Studio Anansi. You can opt-out at any time.

0 1 /                                       Services

0 2 /                                            ABOUT

0 3 /                                 PORTFOLIO

0 4 /                                      Articles

0 5 /                                     CONTACT

Skip to content