Two typefaces, one accent colour: a type and colour system a small brand can actually keep

1.1Start with the body text, not the logo

People choose fonts by looking at their name set in large letters. That is the least useful test. Most of the text a customer reads is small: service descriptions, prices, hours, the paragraph that explains what happens when they book. Choose the body typeface first, and test it at 16 to 18 pixels in a real paragraph on a real phone.

What to look for in a body face:

• Open, even letterforms that stay legible when small.
• Clear distinction between similar characters: a capital I, a lowercase l and the number 1 should not be interchangeable when someone is reading a phone number.
• A full range of weights, at least regular, a medium or semibold, and bold. You will need them for hierarchy.
• A licence that covers the web and print. Many high-quality faces are released under open licences; commercial faces are licensed per use. Check before you commit, because changing fonts later means changing everything.

1.2Add one typeface for headings, or none

A second typeface earns its place only when it does a clearly different job. A serif for headings paired with a sans for body text is the classic combination because the contrast is obvious. Two similar sans-serifs side by side look like a mistake.

It is also completely legitimate to use one family for everything and create hierarchy with size, weight and spacing. Many strong brands do exactly that. What does not work is adding a third face “for personality”. Personality comes from how consistently the first two are used.

Keep scripts and heavily decorative faces for the logo, where they are drawn once and can be controlled. Set in running text on a website, they are hard to read and hard to maintain.

1.3Decide the scale once

Choose five or six text styles and name them: display, heading, subheading, body, small, label. Assign each a size, weight, line height and letter spacing. Then use only those. When someone later adds a page, they pick from the list instead of inventing a seventh size.

Two numbers make body text feel professional:

• Line height around 1.4 to 1.6 for body text, tighter for large headings.
• Line length of 45 to 90 characters, the range Practical Typography recommends. On a wide screen, that means capping the width of text columns rather than letting paragraphs run edge to edge.

1.4Colour: one neutral family, one accent, one of each signal

A palette a small business can keep has three parts.

1. Neutrals. A near-black for text, a background (white, off-white or a very light tint), and two or three greys for borders and secondary text. These carry most of every page.
2. One accent. The brand colour. Use it for the primary button, links and a few deliberate highlights. When the accent appears everywhere, it stops pointing at anything.
3. Functional colours. A red for errors, a green for success, perhaps an amber for warnings. They exist to communicate state, not decoration.

If the brand genuinely needs a second colour, make it a supporting colour with a limited, defined job, such as a background band behind testimonials. Write that job down.

1.5Test contrast, not taste

The most common accessibility failure on the web is also the most common colour mistake. WebAIM’s 2026 analysis of a million home pages found low-contrast text on 83.9% of them.

WCAG 2.2 sets the minimum at 4.5:1 for normal text and 3:1 for large text, defined as at least 18 point, or 14 point bold. Light grey text on white, white text on a pale brand colour and small type in a mid-tone accent fail constantly. Brand colours are often chosen from a logo on a large sign, where contrast hardly matters, and then applied to 14-pixel button labels, where it matters a great deal.

A practical approach: keep your exact brand colour for large elements and backgrounds, and create a darker variant of it specifically for text and small UI. Check every text-on-background pair once with a contrast checker and record the passing combinations. That list becomes your rule.

1.6Write it on one page

The whole system should fit on a single page that anyone can follow:

• Heading typeface, body typeface, and where each licence is kept
• The six text styles with sizes and weights
• Maximum text width
• Neutrals with hex values
• Accent colour, plus its darker text-safe variant
• Functional colours
• The approved text-and-background pairs

Pin it wherever work gets made: the shared drive, the wall above the printer, the notes of whoever posts on social media. A system nobody can find is not a system.

1.7The test that matters

Six months from now, somebody who is not you will make a flyer, a menu, a social post or a new page. If what they make looks like it came from the same business, the system worked. That is the entire point: not a beautiful mood board, but consistency that survives other people and busy weeks.

At UOVA, the AI website builder and creative studio I founded in Toronto, this is the kind of constraint I think a generated brand should arrive with, so an owner starts from a system rather than a pile of options. More notes at saltalash.vercel.app.