Brand guidelines: contents, a real example and method

What are brand guidelines?

They keep a brand recognizable whoever produces the material. Their readers are the graphic designer who creates a poster, the printer who calibrates a color, the developer who builds a website, the in-house team that puts together a presentation.

Useful guidelines can be checked. Someone who took no part in writing them can verify each rule: a color code, a contrast ratio, a minimum size, a license. Without these markers, everyone interprets.

Brand guidelines, visual identity, design system: what are the differences?

Term	What it refers to	Example
Visual identity	The signs themselves	The logo, the Elev8 Lab coral color
Brand guidelines	The instructions for using these signs	Minimum logo size, role of each color
Editorial guidelines	The rules for tone, vocabulary and formats	See the editorial line
Brand book	The whole set: brand platform, brand guidelines, editorial guidelines	A single document given to service providers
Design system	The guidelines applied as reusable components and variables in the code	The --c-accent variable, a button, a card

A personal brand applies the same principles on a smaller scale (profile photo, colors, font), as our guide to personal branding shows.

What do brand guidelines contain?

Three elements form the foundation of brand guidelines: the logo, the colors and the typefaces. On top of these come icons and images, layout, a graphic signature, variations by medium and the list of prohibitions.

Element	What the guidelines set	What to check
Logo	Versions (full, symbol, monochrome), clear space, minimum size, allowed backgrounds, prohibitions (distorting, recoloring)	Legibility at very small sizes: favicon, avatar
Colors	Role of each color; HEX and RGB codes for screen, CMYK and Pantone for print	Contrast of each text / background pair, in each theme
Typefaces	Role (headings, body text, data), weights, fallback fonts	License: web, print, logo
Icons and images	Icon family, style of photos and illustrations	License of each library
Layout	Grid, spacing, corner radii, line length	Same values in the mockup and in the code
Graphic signature	Pattern or shape specific to the brand, where to use it and where never to	Legibility of the text placed next to it
Variations	Templates by medium: website, social networks, emails, documents, print	Formats specific to each platform

For the variations, each social media platform imposes its own image and video formats: the guidelines specify how the logo, colors and margins fit into them.

The font license is part of the guidelines: it says whether the font can be used on the website, in print and in the logo. The Elev8 Lab example, below, uses three fonts under a free license.

Brand guidelines example: the Elev8 Lab design system

Elev8 Lab publishes its own design system here as an example. Version 1.1, approved on September 23, 2026, styles this website: the colors, fonts and sizes quoted below can be read in its public style sheet.

Its principle: “Pop by day, Nocturne by night”, a single set of components for two moods. The “Pop” light theme has bold outlines, solid offset shadows and coral as the accent. The “Nocturne” dark theme has midnight blue backgrounds, thin outlines and a blue glow. The website follows the light or dark setting of your device.

Between the two themes, only the colors, the border thickness (2 px in light, 1 px in dark) and the shadows change.

The guidelines are a versioned document: any change increments the version and goes through explicit approval before it reaches the website.

Logo and visual signature

The Elev8 Lab logo is set in a bold slab serif font. Its “8” breaks up into pixels towards the left.

• Color: blue #015EE9 in the light theme, off-white #EDF1F8 in the dark theme, white on a blue background.
• Files: five SVGs, namely the full logo, the “8” symbol, the white symbol on a blue square (avatars), and the “ELEV” and “LAB” parts.
• Integration: the SVG is inserted with fill="currentColor" and follows the --c-logo variable. A single file therefore serves both themes.
• Pixel pattern: squares of 3 to 15 px taken from the “8”, denser towards the left. It is used in header banners, covers and the 404 page, never as a full-page background or behind text.
• Theme switch: the guidelines provide for a pixel-by-pixel transition from light to dark, turned off if the visitor has asked for less animation (prefers-reduced-motion).

The guidelines also keep one open point: at 16 px, the thin fragments of the “8” disappear from the favicon, and the simplified version is still “to be defined”.

Colors: one role per variable

Each color in the guidelines has a role, a CSS variable and a value per theme. No component hard-codes a color.

Role	Variable	Light theme	Dark theme	Rule
Page background	--c-bg	#FDFDFE	#070A12	No pure black #000
Text	--c-text	#0A1633	#EDF1F8
Secondary text	--c-muted	#4E5B78	#9AA5BA	Metadata, standfirst
Action	--c-primary	#015EE9	#015EE9	Only one primary button per block
Link	--c-link	#0150C8	#8AB6FF	Always underlined in body text
Coral accent	--c-accent	#FF7A8A	#FF8A98	New items, downloads, highlighting; never the primary action
Text on accent	--c-on-accent	#0A1633	#070A12	Never white text on coral
Input border	--c-input-line	#0A1633	#5A6784	3:1 minimum

Coral is the only accent in the palette. The guidelines also rule out purple gradients and neon. The WordPress theme palette has 25 named colors, with the same values as the CSS variables (comparison of October 19, 2026).

The number of colors matters less than their role: a color with no written function leaves each service provider to choose where to put it.

Typefaces: three families, under a free license

The design system uses three families, and no others.

• Bricolage Grotesque (designed by Mathieu Triay) for headings: weight 800 in the light theme, 700 in the dark theme because, according to the guidelines, light text on a dark background looks bolder.
• DM Sans (Colophon Foundry) for body text and the interface: weights 400, 500 and 700, italic 400.
• Geist Mono (Vercel team) for dates, data and code: weights 400 and 500.

Sizes are fluid and go through variables (clamp()): H1 heading up to 54 px, H2 up to 38 px, H3 at 24 px, body text at 17 px with a line height of 1.65. A line of body text does not exceed 68 characters.

All three families are released under the SIL Open Font License 1.1, according to the metadata in the Google Fonts repository.

This license, dated February 26, 2007 and unchanged since, allows them to be used in books, posters, logos and websites, with no mandatory credit (SIL). It also allows them to be modified or redistributed, possibly under a new name.

The guidelines have them self-hosted, for performance and the GDPR: eight WOFF2 files, licenses included.

Shapes, spacing and icons

• Spacing: a scale of eight values, 4, 8, 12, 16, 24, 40, 64 and 96 px.
• Radii: 8 px for input fields, 14 px for cards, 22 px for large blocks, pill shape for buttons and tags. A page uses only one rounding system.
• “Pop” shadow: offset and solid in the light theme (4px 4px 0), replaced by an inner highlight in the dark theme.
• Icons: Phosphor Icons, regular stroke, under the MIT license. The 23 approved icons are exported one by one as SVG, without loading the full font. No emoji in the interface.

What the guidelines forbid

The Elev8 Lab guidelines forbid:

• adding a color, a font or a radius that is not in the guidelines;
• putting white text on coral, or using coral for a primary action;
• hard-coding a color instead of using its variable;
• using pop-ups, countdown timers or sticky bars;
• placing a generated visual just to fill a space;
• creating a section that only works on hover, and therefore not on mobile;
• running a looping glitch effect.

They also include an editorial part: no em dash or en dash, French quotation marks, one label per intent (“S’abonner”, that is “Subscribe”, everywhere), no figure without a source in templates, where XX % is written instead.

How do you adapt brand guidelines for the web?

Guidelines designed for paper say nothing about what a screen measures: the contrast of each color pair, behavior in a dark theme, font file size, the favicon. Contrast and the favicon have published thresholds; the dark theme and fonts are set in the variables.

Contrast: the WCAG 2.2 thresholds

WCAG 2.2, a W3C Recommendation in its version of December 12, 2024, sets the level AA contrast thresholds. Success criterion 1.4.3 requires at least 4.5:1 for text and 3:1 for large text. According to the W3C explanatory note updated on September 6, 2026, large text starts at 18 points, or 14 points in bold (about 24 px and 18.5 px).

• Thresholds are not rounded: 4.499:1 does not meet 4.5:1.
• Text in a logo or brand name is exempt, unless the logo serves as an interface component (a button, for example).
• Interface components, their states and parts of graphics require 3:1 against adjacent colors (criterion 1.4.11).
• Color must never be the only means of conveying information (criterion 1.4.1).

The ratio is calculated with the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color; it ranges from 1:1 to 21:1. Applied to the values of the Elev8 Lab design system, it gives the following table (calculation of October 19, 2026).

Pair	Light theme	Dark theme	Threshold
Text on background	17.57:1	17.47:1	4.5:1
Secondary text on background	6.68:1	7.98:1	4.5:1
Link on background	6.93:1 (#0150C8)	9.63:1 (#8AB6FF)	4.5:1
White on blue button #015EE9	5.56:1	5.56:1	4.5:1
Action blue #015EE9 as text on background	5.47:1	3.56:1 (fail)	4.5:1
White on coral	2.50:1 (fail)	2.25:1 (fail)	4.5:1
Dark text on coral (--c-on-accent)	7.15:1	8.80:1	4.5:1
Coral as text on background	2.46:1 (fail)		4.5:1
Input border on background	17.57:1	3.49:1	3:1

The failures explain two rules in the guidelines. Coral never carries white text and is not used for body text. In the dark theme, links take a lighter blue than the action blue.

Dark theme: its own values, not an inversion

The CSS media feature prefers-color-scheme detects whether the user has asked for a light or dark theme, through a system or browser setting; its values are light and dark (MDN). The specification that defines it, Media Queries Level 5, is a W3C Working Draft (version of February 19, 2026), not a Recommendation.

A dark theme needs its own values. The same blue #015EE9 reaches 5.47:1 as text on the light background and only 3.56:1 on the dark background. Elev8 Lab keeps this blue for buttons, where the white text on top reaches 5.56:1, and gives links a #8AB6FF blue at 9.63:1. Headings also go from weight 800 to 700.

In the code, the guidelines become a set of variables redefined per theme. The principle, reduced to the link color:

• :root { --c-link: #0150C8; } for the light theme, by default;
• @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-link: #8AB6FF; } } to follow the device setting;
• [data-theme="dark"] { --c-link: #8AB6FF; } when the dark theme is forced on the <html> tag.

Variables, theme.json and design tokens

In a WordPress theme, the color palettes, font sizes and gradients declared in theme.json become CSS custom properties, loaded on the website and in the editors (WordPress Developer Resources). The block editor palette then uses the colors from the guidelines, instead of codes copied by hand.

To exchange guidelines between tools, the Design Tokens Community Group published the Design Tokens Format Module 2025.10, a final report of October 28, 2025. It is not a W3C standard. In it, the group defines design tokens as a way of expressing design decisions independently of platforms. A token is an object with a $value property, the only mandatory one.

Favicon, logo and fonts: what Google and the browser read

Google shows a single favicon per hostname, declared with a <link rel="icon"> tag on the home page. The image must be square, at least 8 × 8 px, and Google recommends more than 48 × 48 px (Google Search Central, updated on August 28, 2026). Web guidelines therefore plan a symbol that stays legible at very small sizes: this is the point still open in the Elev8 Lab example.

For the logo, the logo property of Organization structured data helps Google know which image to show. It must be at least 112 pixels wide and high (Organization documentation, updated on September 8, 2026). Keeping the same name, the same logo and the same profiles everywhere aims to make it easier to connect the mentions of the same brand, with no guarantee of display: this is the work on the brand entity.

On the font side, the guidelines name a fallback font for each family (Arial behind DM Sans, for example). Chosen with similar dimensions, they limit the layout shifts measured by the Core Web Vitals during loading.

Other brand guidelines examples to look at

Three formats coexist: guidelines as components and variables, the brand website, the PDF.

The French State Design System (Système de design de l’État, DSFR) is a set of HTML, CSS and JavaScript components for public websites in France, developed and maintained by the Service d’information du Gouvernement, the French government’s information service (official repository). Marianne and Spectral fonts, light and dark themes through the data-fr-scheme attribute (system follows the operating system setting).

The DSFR also shows that guidelines can restrict their own use. Its code is under the Etalab 2.0 license, except for some elements such as the Marianne fonts. Yet its use is forbidden outside French State websites and a .gouv.fr domain, because it marks the visual identity of the State. A public administration must apply for approval.

As for brand websites, Uber publishes its own (brand.uber.com) and Mozilla a brand portal (brand.mozilla.com). Both were online on October 19, 2026.

PDF guidelines remain a common format. A PDF freezes the values at a given date and is heavy: two sets of guidelines from organizations, checked on October 19, 2026, weigh 4.2 and 9.3 MB. Our view: a PDF is enough for a small organization; as soon as a website and several service providers are involved, guidelines in variables avoid copies that drift apart.

How do you create brand guidelines?

Brand guidelines are built in seven steps, from the brand to versioning.

1. Start from the brand platform, described in our branding guide, and from the marketing persona: who the brand speaks to.
2. List the real media: website, social networks, marketing email templates, documents, print.
3. Set each element and its role: logo versions, role of each color, fonts and weights, icons, grid and spacing.
4. Test: contrast of each text / background pair in both themes, the logo at 16 px, the web license of each font.
5. Write down the prohibitions, as a short list.
6. Choose the format: PDF, online page, CSS variables or token file.
7. Version the guidelines and appoint the person who approves each change.

A graphic designer, an agency or the in-house team can write the guidelines. In every case, name the person who decides when a piece of material falls outside the rules.