Turning brand guidelines into a website: which rules carry over and which need translating
Turning brand guidelines into a website means translating a print document into tokens: colours by role, a type scale, spacing steps and component rules. Logo, voice and photography usually carry over as they are. Colours, typefaces and layout grids need web equivalents, and most brand books are silent on states, contrast and dark mode, which you'll have to decide yourself.
What a brand book covers, and what it doesn't
Brand guidelines grew out of corporate identity manuals, the thick binders that told printers and sign makers exactly how to reproduce a logo, which colours to mix and which typeface to set. Many still read that way: Pantone references, CMYK breakdowns, logo exclusion zones, a page of typefaces and some sample posters. That's the starting material. A website needs those decisions restated for screens, plus a layer of interface rules the manual never had to make.
| Brand rule | On the website | Work needed |
|---|---|---|
| Logo, clear space, minimum size | Carries over | Add a small-size version and a single-colour version for dark grounds |
| Tone of voice | Carries over | Apply it to buttons, errors and empty states too |
| Photography style | Carries over | Add crops for phone and wide screens |
| Colour palette (Pantone, CMYK) | Translate | Pick screen values, then assign roles and check contrast |
| Typefaces | Translate | Check web licensing and character coverage, define a responsive scale |
| Print grid and margins | Translate | Become a spacing scale and content widths |
| Interactive states, focus, errors | Invent | Rarely in the book |
| Dark mode | Invent | Usually not covered |
Colours: from swatches to roles
Print colour references don't map exactly to screens; a Pantone or CMYK colour has to be matched to a hex value by eye or with the colour library's own conversion, and checked on several devices. Then comes the step most brand books skip: deciding which colour does which job.
- Choose one action colour from the brand palette for buttons and links. It should be the colour that says "do this".
- Assign neutrals for the ground, text and lines. If the brand has a cream or a charcoal, those are often better than pure white and black.
- Demote the rest. Secondary brand colours become illustration, tags or decorative bands, not text.
- Check every text pairing against WCAG's contrast minimum: 4.5:1 for body text, 3:1 for large text. Many brand yellows, oranges and light greens fail on white.
- Make a darker or lighter step of the brand colour for text when the exact brand value fails. The hue stays recognisable; the shade changes.
- Write it down as tokens, named by role, so the rules survive the next person to edit the site. See semantic colour tokens.
Typefaces: licensing, coverage and scale
- Licensing. A desktop font licence often doesn't cover web use. Check before you build, or choose the brand's nominated web alternative.
- Weights. Load only the weights you'll use; two or three cover most sites.
- Coverage. Make sure the font includes every character your content needs, including accented letters and currency symbols.
- Scale. Print guidelines give fixed point sizes. A website needs a scale that shrinks on phones; see type scale for web.
- Fallbacks. Choose a fallback of the same kind, sans for sans and serif for serif, so the page doesn't change character while the font loads.
Layout, spacing and components
A print grid of twelve columns with fixed margins becomes a maximum content width, a column grid that collapses on phones, and a spacing scale. Where the brand shows generous margins on posters, the web equivalent is generous section padding and short line lengths. Corner radius, line weights and shadow style often hide in the sample artwork rather than the rules; pull them out and give them names. Then design the components the book never showed: buttons in every state, form fields, navigation, cards. What is a design system covers that wider structure.
Applying a brand identity with Anticode
Anticode maps a brand onto its own structure rather than taking a brand book as input. You choose the design system whose character is closest to the brand: Editorial, Technical, Luxury, Playful, Brutalist, Organic or Swiss. You pick one action colour from red, orange, gold, green, teal, blue, pink and black, each with a light-theme and a dark-theme value. Then you tune individual colour tokens, such as the ground, text and line colours, in the code editor in Pro mode, so the site uses your cream instead of the system's, or your exact brand red for the action colour.
Typography is where the fit is loosest. Each system has its own typeface, and a custom brand typeface isn't a system option. The design gate also refuses serif type of any kind (its rule is sans-serif type only, so named serif families are blocked, not just serif fallbacks), and allows one font family or one pairing per page, so a serif brand face isn't a practical choice for a published site, even in an app build. If your brand is defined by its typeface, choose the system whose font is closest in spirit and say so in your brand notes.
Questions people ask
What if my brand colour fails contrast?
Use it for large headings, fills or decoration, and make a darker or lighter shade of the same hue for body text and links.
What if my brand font isn't licensed for the web?
Buy a web licence, use the alternative the guidelines nominate for digital, or pick a close web font and note the substitution.
Do brand guidelines cover website buttons?
Usually not in enough detail. You'll need to define hover, focus, pressed and disabled states yourself, using the brand's colours and shapes.