Many small businesses that come to us for a website have no brand guidelines, and that is normal: a ten-person company has rarely needed a brand document before its website. It is not a prerequisite. When they are missing, the rules that matter (colours, typefaces, how the logo is used) get decided with you at the start of the project, and design is included in the subscription.
There is also the opposite case: the 60-page brand book an agency delivered four years ago, which nobody has opened since and which answers none of the questions a website asks.
Either way, here is what small-business brand guidelines need to contain to be useful to a website, whether you bring them or we build them together, and the two places they almost always fail: contrast and font licences.
The short answer, for the busy
Useful brand guidelines for a small business fit in a few pages and cover five things. The logo as a vector file (SVG), with a version for dark backgrounds, a square version and a clear-space rule. A colour palette where every colour has a stated role and every text pairing has been contrast-checked: WCAG 2.2 requires 4.5:1 between body text and its background, and 3:1 for large text and interface components. Two typefaces whose licence explicitly covers the web: a desktop licence is not enough, and an Adobe Fonts typeface must be loaded through the client's own Creative Cloud subscription. A photo direction. A tone of voice, including how formal to be, which in Quebec French means choosing between "tu" and "vous". Google Fonts typefaces, mostly under the SIL Open Font License, are free for commercial use, logos included. The rest of a brand book can wait: every rule should translate into a value a website can apply.
What the term means in Quebec
French-speaking Quebec calls this document a charte graphique, and the official definition is revealing. The Office québécois de la langue française files the term under the Internet domain and defines it as the set of presentation rules for the visual elements that make up a website, meant to give it graphic consistency, define its visual identity, and make its pages easier to navigate and read. The accompanying note lists menus, buttons and link colours among the elements.
By that definition, brand guidelines are already a website document. That is why the 60-page brand book so often fails: it describes intent (the brand is "warm and bold") without answering practical questions. What colour is a link on a dark background? Which font sits on a button? What happens to the logo when it is only 32 pixels tall?
The logo: files before aesthetics
A 400-pixel-wide JPEG of your logo is a photo of your logo. The guidelines should deliver the master file in vector format, ideally SVG, which stays sharp at every size. Around it, four variants cover almost every website use: the colour version for light backgrounds, a version for dark backgrounds (often white), a square symbol for the browser tab icon and social media, and a single-colour version.
Two rules complete the package. Clear space, the minimum empty area around the logo, expressed in a unit of the logo itself (the height of a letter, for example) so it holds at every scale. And a minimum size, below which you switch to the symbol alone.
A detail few people know: accessibility rules exempt the logo. The WCAG 2.2 contrast criterion states that text that is part of a logo or brand name has no contrast requirement. Your logo can be pale grey on cream if that is your identity. The text around it cannot, and that is where most guidelines trip.
The palette: a brand colour is not a text colour
WCAG 2.2, a W3C Recommendation since October 5, 2023, sets a minimum contrast of 4.5:1 between text and its background at level AA. Large text (18 point, or 14 point bold) drops to 3:1, as does whatever identifies a button, a field or an interface state. The legal picture is covered in our article on accessible websites; here, the arithmetic is what matters.
Contrast is calculated with a formula published in the standard. Run it for a bright orange like #FF6600 on white and you get 2.94:1. Gorgeous on a storefront sign, unreadable in a paragraph. On black, the same orange clears 7:1: the colour has a role, and that role is not body text on white.
A useful palette therefore gives every colour a written role (background, text, accent, state), and every allowed text-and-background pairing in it has been measured.
There is a sneakier constraint. To reach 4.5:1 on pure white, a colour must stay below a relative luminance of about 0.183. To reach it on pure black, it must sit above 0.175. The window that works on both is tiny, and it vanishes once white becomes cream and black becomes a very dark grey. A brand with light pages and a dark footer, whose accent carries text on both, needs two shades of that accent.
That is what our own site does. The orange accent comes in two versions: a darker one for light backgrounds (5.43:1 on our cream) and a lighter, warmer one for dark backgrounds (5.34:1 on our near-black). The version is picked by what the accent touches, never by which page it is on.
Two typefaces, and a licence that covers the web
Two families are almost always enough: one for headings, one for text. The guidelines say which does what, and in which weights. For a Quebec business, also check that the typeface draws accented capitals and French guillemets properly: a typeface with no "É" leaves your French homepage announcing its "Equipe".
The licence is the costliest trap, because nobody sees it for a long time. Three situations keep coming up.
The desktop licence. At the reseller MyFonts, licences are sold separately: desktop, web, mobile app, digital ads. A desktop licence lets you install the font on a workstation and design the logo. It does not cover embedding the font in a website. The web licence is usually paid yearly based on monthly pageviews, and covers a single domain.
Adobe Fonts. Adobe's FAQ is explicit: a designer cannot use their own subscription for the fonts on a client's website. The client's site must load them through the client's own Creative Cloud subscription, and if that subscription is cancelled, the fonts stop displaying and the site falls back to a substitute. Your typographic identity becomes a monthly subscription, often without anyone telling you.
Google Fonts. The simplest option. According to its FAQ, every font in the catalogue is open source and free, usable commercially, including in a logo and on a website. Most are under the SIL Open Font License, whose only real restriction for a small business is that you cannot sell the font on its own.
None of these options is bad. What costs money is not knowing which one applies. For each typeface, the guidelines should state who holds the licence and what it covers.
Photos and tone: the two sections people skip
Photo direction does not require a shoot budget. It requires decisions: real photos of the team and premises or stock, natural light or studio, and above all what you refuse (the handshake in suits, for instance). Otherwise every page gets whatever image was quickest to find.
Tone of voice has an extra decision in Quebec that imported guidelines ignore: on the French side, "tu" or "vous". The choice changes the voice of every button and every error message. If the site is bilingual, the guidelines should also say whether the English version is a translation or an adaptation.
From guidelines to website: rules a program can check
A well-built site translates the guidelines into design tokens: named values ("paper", "ink", "accent") that every component uses. Changing a brand colour then happens in one place.
The less obvious benefit: a rule expressed as tokens can be tested. On our site, the palette comes down to four backgrounds and a two-version accent, the typography to two families with one job each, and automated tests fail if a colour pairing drops below AA or if a third typeface appears. The guidelines stop being a PDF you hope people follow.
It is also why missing guidelines get expensive during a redesign: the decisions they should have held get made anyway, one page at a time, and often inconsistently.
What we look at when we start
The minimum package has five parts: the logo in SVG with its variants, the palette with each colour's role, the names of the two typefaces and their licences, one page of photo direction, one page on tone. If some are missing, or you have none of it, that does not hold anything up. Design is included in our subscription: we design from scratch or build from your mockups, and the missing rules get decided once, at the start of the project, rather than page by page.
And if you already have the 60-page brand book, bring it. We will pull out the pages that matter for the web, and tell you which of your colours can actually carry text.
→ Let's talk about your project
Written byXavier Peich