Related methods
High-fidelity mockups
High-fidelity mockups give the future screens their final form, to hand over to the project teams for integration.
Read more about High-fidelity mockupsVisual style guide
Deliverable
The visual style guide, a brand's visual rules
The visual style guide is the document that sets out the elements and rules used to build your brand's universe. It contains: the colour palette, the typography, the icons, the logos and the explanation of how they're used. This "good practice" guide centralises all the elements used to represent a brand, how they're organised and their usage rules. Having a visual style guide, and above all sharing it with the people inside and outside the company, keeps everything coherent and consistent. It's a significant time-saver when it comes to creating new materials and content. The visual style guide isn't just a guide to follow, it also lists the uses to avoid. For instance, if it forbids using your logo on a red background, then the users (designers, communications team members, etc.) will have to follow that rule.
What is a visual style guide / web style guide for?
- Guaranteeing coherence and consistency across all communication materials (whether printed or digital)
- Identifying the brand, service or company simply and quickly
- Projecting a professional, reassuring image
- Having a reference document for every member of staff
- Developing your communication strategy
Why build a visual style guide / web style guide?
- To let the people who produce content create new communication materials that hang together visually
- To unify all the components of the brand or company visual identity
- To define the personality and image of the brand or company exhaustively
- To produce materials faster
01
Visual style guide and colour palette
Be careful not to define too many colours in your palette, or you'll end up with a rainbow that doesn't let users or consumers identify you quickly. As a rule, we recommend between two and four colours. A primary one (e.g. action buttons), a secondary one (secondary buttons), and two others that can be used for icons or for photo colour-correction. In your visual style guide, remember to note the colour codes in RGB (web use) and CMYK (print use), so contributors get the exact shades. It's also important to note how each colour is used, by describing the combinations that are allowed or not. Example: blue, the primary colour, is to be used on the logo and the primary buttons.
02
Typefaces
Typefaces are chosen based on the communication format. For web, it's essential to use simple, readable fonts: sans-serif typefaces. For print, where reading is easier, you can use more distinctive typefaces with serifs. For good readability and visual consistency, we recommend using two type families maximum (one for headings, one for body text). The visual style guide should be very clear about how those type families are used: for which format, for which kind of content (body paragraphs, headings, buttons, labels, and so on). To stay consistent across all touchpoints, it's also important to note the spacing, line-height and alignment to follow.
03
Graphic elements
Make sure to gather your icons, pictograms and illustrations in the guide. It's important to give as much detail as possible, like the size to use for icons, where to place them, what colour, and so on.
04
Images in a visual style guide
Like graphic elements, the dimensions and proportions to follow for images should be described in the visual style guide. To keep your brand image coherent, you also need to state what image style is expected and what colour treatment is recommended. Example: images should feature humans, avoid robotic or electronic elements, and be in black and white.
En pratique
You can definitely add other elements to your visual style guide (which kinds of videos, how animations are used, the visual style for social media, and so on). The elements listed above are still a solid foundation to set up properly before going further. Keep in mind that the visual style guide will evolve and grow in scope as internal needs surface. It’s important to keep it up to date, every time a new need or format comes up. Lastly, making it easy to share and access for anyone producing content in line with your brand identity is the key to making it work.
Frequently asked questions
The purpose of a graphic charter is to document the visual rules of a brand. The design system is more complete: it includes the graphic charter, but also the components of your interface (buttons, forms, cards…), the design tokens (CSS variables), the usage guidelines… A graphic charter can exist outside digital, unlike the design system, which is specific to digital products only.
Mostly, it will be a designer or an art director in a communication or design agency.
If your graphic charter is already well established, you will then need to identify the founding elements that must not change (or that you do not want to change) and the secondary elements that can evolve. The changes are then to be applied progressively, while making sure that everyone in your teams has the up-to-date version.
No, it will not be enough on its own, especially for a digital product. It will set the basic rules but it does not cover components, states or layout rules.
A few of our case studies
La Coupe d'Or pivots towards youth, and so does its logo
View the case study : La Coupe d'Or pivots towards youth, and so does its logoCurious to learn more about us?
Everyone talks about user experience, service design, ergonomics...
It's not always clear, and you'd like to find out, or sharpen what you already know.