Many businesses don’t have brand guidelines for websites. They have a PDF made for business cards, signage and a pitch deck, specifying a Pantone swatch, a logo at 30 mm wide and a typeface installed on the designer’s laptop. Hand that to a web team and the gaps show quickly.
That isn’t the brand designer’s fault. A website asks things of an identity that print never does: it has to work at every screen width, at 16 pixels in a browser tab, on light and dark backgrounds, in every language the business uses, and in the words on buttons and error messages.
This guide shows where print-first guidelines fall short, then what to hand over, asset by asset.
The short answer
Brand guidelines for websites turn an identity into files and rules a browser and a web team can use. At a minimum, hand over:
- Logo versions in SVG, down to favicon and app-icon size.
- A screen colour palette in hex, organised by role.
- Typefaces licensed for the web, covering every language you publish in.
- Direction for icons, imagery and motion.
- Tone of voice and microcopy rules for each language.
- A social share image template.
Why print-first brand guidelines break on screens
Screens have no fixed size
A printed page has one size; a website runs from narrow phones to wide monitors. A lock-up that sits comfortably across an A4 letterhead may have to fit a cramped phone header, and rules in millimetres don’t help.
Colour is light, not ink
Print uses Pantone spot colours or CMYK mixes; screens emit light, and web colours are RGB values, usually written in hex. A converted swatch is only a starting point: it can look duller or shift on screen, and metallic or fluorescent inks can only be approximated.
Fonts have to be licensed and delivered
In print, a typeface only needs installing on the designer’s computer. On a website, font files are sent to every visitor’s browser. That usually needs a separate web licence, and a Latin-only typeface fails the day you add a language in another script.
Websites move and talk back
A brochure never has to say “That email address doesn’t look right” or react to a hover. If the guidelines don’t cover states, transitions and interface text, whoever builds the site will decide them.
Logo, colour and type: the core of brand guidelines for websites
Logo lock-ups and small-size versions
Ask for every arrangement of the logo as SVG, a vector format that stays sharp at any size, plus PNG exports for tools that don’t accept SVG.
Together these make a responsive logo: a family of versions that simplify as space shrinks, dropping the tagline, then the wordmark, until only the symbol remains. If your identity lacks one, ask the brand designer to create it rather than leaving a developer to improvise by cropping.
Favicon and app icons
The favicon appears in browser tabs, bookmarks and beside your site in Google’s search results. At 16 to 32 pixels a full logo becomes a smudge, so it usually needs its own drawing: the symbol or a monogram, with heavier strokes. A typical set:
- An SVG favicon, plus a square PNG or ICO version: Google Search recommends one larger than 48 × 48 pixels and doesn’t list SVG among its formats.
- A 180 × 180 pixel PNG for iPhone and iPad home screens (the Apple touch icon).
- 192 × 192 and 512 × 512 pixel icons in the web app manifest, which Chrome and similar browsers use when someone installs your site or adds it to a home screen.
- A maskable version with the mark inside a central circle 80% of the icon’s width, because Android crops icons into circles, rounded squares and other shapes depending on the device.
A screen-ready colour set
A web palette needs enough colours to build a whole interface, and each one needs a job.
| Role | What it’s for | What to specify |
|---|---|---|
| Brand | Logo, accents, highlights | Hex values checked on real screens |
| Text | Body copy, headings, captions | Near-black and greys that read well |
| Backgrounds | Pages, cards, sections | Whites, off-whites and light tints |
| Interactive | Links, buttons, focus outlines | Default, hover and pressed versions |
| Feedback | Errors, warnings, success | Reds, ambers and greens that suit the brand |
| Dark theme (optional) | Visitors who prefer dark mode | A deliberate parallel set, not an inversion |
Settle two things before the build. First, who signs off the screen values: the brand designer should approve the hex versions on a phone and a laptop, not just convert them. Second, which colour pairings are allowed for text. Many brand colours are too light for small text on white: WCAG 2.2 Level AA asks for a contrast ratio of at least 4.5:1 for normal-sized text, and 3:1 for large text and for the parts of controls people need to see, such as input borders and focus indicators. Our guide to colour contrast and readable text shows how to adapt a failing palette without losing its character.
Typefaces licensed for the web and every language
Typography handovers often stall over licensing rather than taste.
Check the licence. Most desktop font licences don’t cover use on a website. Foundries sell web licences on different terms, such as by monthly page views, per domain or for a one-off fee; open-source typefaces, such as those on Google Fonts, are free to use on the web. Keep the licence in writing, in your company’s name.
Hand over web font files. WOFF2 is the compressed web font format every modern browser supports. Agree a short list of weights and styles: each one a page uses is another download, though a variable font holds several weights in one file. With a hosted-only licence, give the web team access to the service instead.
Cover every language. Check the typeface supports every language the site will publish in, now and in the next few years, accents included. Where it doesn’t, name a companion typeface that matches its tone.
Name a fallback. Say which system font should display while the web font loads, or if it fails to.
For sizes, line lengths and pairings, see our guide to web typography for business websites.
Icons, imagery, motion and share images
Iconography
Icons mixed from several free libraries make a site look assembled rather than designed. Set the style (outline or filled, stroke weight, corner rounding), the grid they’re drawn on (often 24 pixels square) and a starter set in SVG. Add one rule: icons support text labels, they don’t replace them.
Photography and illustration direction
Generic stock photography is where many sites stop looking like the brand. Cover subject matter (your real people, places and work), lighting, colour treatment and how people are shown, then add notes for the web:
- Crops for different shapes. A wide hero image on a laptop becomes a tall, narrow slice on a phone, so keep subjects away from the edges or supply alternative crops.
- Originals, not PDF extracts. Hand over full-resolution files; the web team will resize and compress them, as our guide to image optimisation for websites explains.
- Usage rights. Confirm every image is licensed for online use, including adverts.
- Text over images. Say whether headlines may sit over photos, and what overlay keeps them readable.
For illustration, give the style, line weight and palette with finished examples, and say who may create new pieces.
Motion principles
Motion is part of a digital brand identity; without guidance, sites end up lifeless or over-animated. A few principles are enough:
- Character: quick and precise, or soft and calm?
- Timing: typical durations and easing, so transitions feel related.
- Limits: hover effects and reveals, yes; moving text someone is reading, or anything that flashes, no.
- Reduced motion: most operating systems have a setting to reduce motion, which websites can detect with the CSS
prefers-reduced-motionmedia feature. Describe what the calm version looks like.
Our guide to micro-interactions and motion design covers applying this in the interface.
Social share images
When someone shares a page on LinkedIn or a messaging app, the preview image is often a person’s first sight of your brand. Supply a template for these Open Graph images, commonly 1,200 × 630 pixels, with the logo and text away from the edges, because platforms crop and resize previews differently. Include a default for pages without their own.
Tone of voice guidelines and microcopy
On a website, every heading, button, form label and error message either sounds like you or sounds like a template.
A voice that works on a web page
Good tone of voice guidelines describe the voice in three or four traits and show them in action. “Friendly, professional, expert” describes nearly every business, so pair each trait with a “we say / we don’t say” example from real web copy, such as a service page opening or a pricing note.
Microcopy rules
Microcopy is the small text that helps people act. Set rules for:
- Buttons and links: labels that say what happens (“Get a quote”), not “Submit” or “Click here”.
- Forms and errors: how labels are worded, how optional fields are marked, and error messages that explain the fix without blaming the visitor.
- Confirmations and empty states: what someone sees after sending an enquiry, or when a search finds nothing.
- Style details: sentence or title case, how dates, prices and phone numbers are written, and the preferred names for your services.
Our guide to web form design shows how these rules play out in the forms that bring in enquiries.
Voice in every language
Formality, humour and punchy labels don’t always survive translation. Ask for a short note per language on formality and how to address the reader, plus a glossary of terms that must stay consistent. Our guide to planning a multilingual website covers the wider decisions.
What to hand your web team
Brand assets for websites are only useful if people can find them. Put everything in one shared, versioned folder, name one person who can answer brand questions quickly, and reference both in your website brief. Then run through this web brand guidelines checklist:
Filling the gaps
Few businesses can tick every box, so agree who fills each gap before the project starts.
| Gap | Usually filled by | Why |
|---|---|---|
| Small logo versions and favicon | The brand designer | Redrawing the mark is identity work |
| Screen colours and text pairings | Brand and web designers together | It needs brand judgement and contrast checks |
| Web font licences | You | The licence should be in your company’s name |
| Microcopy rules and glossaries | Your marketing lead with the web team | They must sound like you and work in the interface |
Interface states and components are the web designer’s to add, but record them in the guidelines or a design system so they don’t drift; our guide to website design systems explains how. If you are changing the identity itself, start with rebranding your website instead.
What to do next
Read your brand guidelines the way a web team will: in pixels, hex values, file formats and languages. Every gap you close now is a decision nobody has to guess at mid-project.
For how identity, voice and experience come together on a live site, read our practical guide to website branding. When your assets are ready, or if a print-first identity needs work before it suits a screen, see how we plan and build sites through website design and development, or tell us what your website needs.