A style guide: what is it and what is it for?

Rédaction : Kim Colard & Gauthier Janssens

Comptez    minutes pour lire cet article :)

Last updated: November 2024

What is a style guide?

You have finally created your structure or it is about to be created and you are addressing the key question of your image. Of course, you are going to need a logo. And the graphic design studio you are contacting is going to ask you strange questions like “And I imagine you will also need a style guide?”. And there, you cast a worried look at your partners who you find the same doubtful air… a what!!?

A style guide is the collection of the 10 commandments of your visual identity. It is a document that will serve as a visual reference point, a set of rules that will define how and under what conditions you will use your visual elements and ultimately, the tool that will make you exist by association in people’s minds.

Purpose a style guide

The purpose of a style guide is to ensure consistency and harmonization in all your communication media, whether it is:

  • a paper medium (leaflets, envelopes, letterhead, flyers, posters, etc. : the classic package of a good graphic design agency),
  • a physical medium (signage, window, banner, vehicle, presentation booth, marketing material, T-shirt, etc.),
  • a virtual medium (presentation or publication template, video, multimedia, website, email, etc.)
  • or anything that may arise as a new graphic creation!

This concerns both your organization and its staff as well as your users and suppliers. Any document that comes from your structure must be identifiable at first glance.

If your style guide is respected, your image will always be the same regardless of the medium. Look at the number of companies that have a strong graphic identity! This is the result of a good style guide used and followed in all their communications.

Components of a style guide

What exactly do we find in this graphic charter? We now know that it is a set of rules, but what do they cover?

The Logo

Your logo is the keystone of your visual identity!

You have certainly already seen presentations or documents where a logo is stretched, distorted, tiny, almost unrecognizable or illegible. It is to avoid this that the graphic charter will define the conditions of its use:

  • its proportions,
  • its minimum size,
  • its contrast for accessibility and readability
  • and its positioning in relation to other elements: text, titles, margins, etc.

Fonts (typography)

The style guide defines the rules for the layout and use of font in a document. The character and personality of one or more fonts provide meaning and can change the vision and scope of a text. Fonts allow you to create different levels of text while ensuring reading comfort. In addition, of course, to participating in the general coherence of your communication both within your company and outside.

The Colors

The choice of colors should be limited to allow better memorization and quick distinction.

Example: use the monochrome versions of your logo if you have to print it on a colored surface (car, folder, etc.). Your pictograms and illustrations will also be provided in black and white. Ask for an “Illustrations Pack”!

Finally, for your communications, consider accessibility. Not everyone sees colors in the same way: color blindness, achromatopsia, etc.

Design system / icons / pictograms

Maybe you need a mascot, pictograms or a “design system“? All these elements must reflect your visual identity and be included in your style guide.

Use of Images, illustrations, photographs

Certain images can be selected from the style guide. Using them regularly will eventually associate them with your company in a systematic way.

Rules for inserting these elements on each medium

It is important to always keep the same proportions, otherwise the graphic elements will be distorted. We will then define the rules of use, such as the margins required in a document, the spaces between the logo and the text, etc.

Style guide for websites: the Design system

The design system will most often be a variation of the graphic charter, tailored to the specific needs of the web. It will precede the development of the site and will serve as a guide to integrators. It should allow them to create an user friendly, accessible and aesthetic interface.

The design system defines the location, proportions, colors and behaviors of the visual interface of the website.

Do not neglect the importance of a strong and clearly defined style guide that you can constantly refer to to create new communication elements. Our web and graphic agency knows how to understand and translate your vision into an original and impactful visual identity. Contact us!

Welcome @ Deligraph. State your identity!