Visual style guide

Q: What is the difference between a graphic charter and a design system?

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.

Q: Who produces a graphic charter?

Mostly, it will be a designer or an art director in a communication or design agency.

Q: How do you evolve a graphic charter without losing consistency?

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.

Q: Is a graphic charter enough to guarantee the visual consistency of a digital product?

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.

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.

See our art direction offer

What is a visual 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?

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

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.

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.

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.

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.

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.

What is the difference between a graphic charter and a design system?

Who produces a graphic charter?

How do you evolve a graphic charter without losing consistency?

Is a graphic charter enough to guarantee the visual consistency of a digital product?

Related methods

High-fidelity mockups

High-fidelity mockups give the future screens their final form, to hand over to the project teams for integration.

Visual identity

The first element your users perceive, the visual identity conveys your industry and makes you easily identifiable.

Colour palette

Brand palette or interface palette, the two are not to be confused. How to build a coherent, legible and accessible colour system.

Typography

Typography defines the fonts, the size scale, the weights and the spacing of an interface. How to choose it and guarantee its readability.

Iconography

An interface's iconography is the style and consistency of its icons. Well chosen, they speed up reading; badly chosen, they create doubt.

Moodboard

A moodboard is a kind of overview of inspiration material, meant to support the artistic choices for the next stages of your project.

Design system

A design system is a component library and the governance that comes with it. What sets it apart from a design kit, and when it becomes necessary.

Curious 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.

Let's talk