Think of a family-run florist that has grown from a market stall to a shop and a small web store. The van has one green, the shop sign another, and the website uses a third. The logo exists as a low-resolution screenshot, the Instagram bio is cheerful, and the invoices read like a tax form. Customers do not articulate any of this, but they do register that the pieces do not feel like the same business.
Fixing that does not require a rebrand. It requires making a few choices once, writing them down and using them every time. This guide lays out what those choices are, and how each one holds up when it meets a real website, a favicon or a phone screen.
Identity is the system, the logo is one part
Published brand guideline templates tend to cover the same five areas: how the logo is used, the colour palette, typography, imagery and tone of voice. Those five are a sensible definition of identity for a small business. Together they answer the question “what does this business look and sound like?” without anyone having to ask the owner.
The order matters less than the connection between them. A warm, chatty voice sits oddly with a stiff, corporate typeface. A logo drawn with fine lines vanishes if the palette only offers pale tints. When you design one element, test it against the others.
Logo: plan the versions you will actually need
A single logo file rarely covers every use. Plan for at least these, and keep them in vector form where possible:
- A full version with name and symbol, for headers, documents and signage.
- A compact or stacked version for narrow spaces such as a mobile header or a social media profile picture.
- An icon on its own for the browser tab and app-style uses.
- Light and dark variants, plus a single-colour version for stamps, embroidery or print jobs with one ink.
The icon matters more online than most owners expect. Google’s favicon guidelines ask for a square image at least 8 pixels on each side and recommend going above 48 pixels, in a format such as PNG or ICO, at a stable URL. If you add Organization markup to your homepage to help Google associate a logo with your business, Google asks for a minimum of 112 by 112 pixels and suggests checking how the logo looks on a plain white background, because light logos can disappear.
Colour: a small palette where every colour has a job
Most small businesses are better off with fewer colours than they think. A workable palette has one main colour that people associate with you, one or two supporting colours, a dark neutral for text and a light neutral for backgrounds. Add a single accent colour that is reserved for buttons and links, so that the one thing you want people to click is always the same colour.
Check the palette for readability before it is approved. The Web Content Accessibility Guidelines set a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text, where large means 18 point or 14 point bold and above. A pale grey on white that looks elegant on a designer’s monitor can fail this test, and it will be hard to read in sunlight on a phone. Text that forms part of a logo is exempt from the requirement, but body text and buttons are not.
Write each colour down in the formats you will need: a hex value for screens and the print references your printer asks for.
Type: two typefaces are plenty
Pick one typeface for headings and one for body text, or use a single family in two weights. State the sizes and spacing you use for headings, paragraphs and buttons so that a newsletter, a menu card and the website all look related.
On the web, fonts have a technical side. Custom fonts take time to download, and web.dev notes that font loading can cause a visible shift in the layout, which is why it suggests a close fallback font and a considered font-display setting. A brand typeface that needs four weights, each a separate file, costs speed on every page.
Voice: how the brand sounds when you are not in the room
Tone of voice is the part most often missing. It does not need a manifesto. Choose three adjectives, say what each one means in practice, and add a few before-and-after examples. “Friendly” might mean contractions, first names and no jargon. “Precise” might mean stating times and quantities instead of “soon” and “a few”.
Use real situations: how you answer an enquiry, how you confirm an appointment, how you apologise for a delay. The same voice should run through your website text, your replies to reviews and your social media captions.
Put it on one page
- Show the logo versions, with the minimum size you allow and some clear space around them.
- List the palette with hex values and a note on which colour is for what.
- Name the typefaces, with sizes for the main text styles.
- Add three voice adjectives with one example sentence each.
- Include two or three sample photographs that show the style you want, and the kind you avoid.
A page like this is enough to brief a designer, a printer or a freelancer without a meeting. It also makes your website easier to build, since the decisions are already made. For ideas on the site side, see our notes on a small business website.