Using Colour With Intent

Most websites use too many colours. Every button, badge and highlight gets its own shade, and soon nothing stands out. Some of the strongest sites I build use a neutral base and a single accent, applied with discipline.

Neutrals do the heavy lifting

Backgrounds, text and borders make up most of a page. Getting those right — a warm or cool grey, a near-black instead of pure black, a soft divider colour — sets the mood long before the accent appears.

Give the accent a job

An accent colour should mean something. On this site, orange marks the thing to do next: an arrow, an active filter, a call to action. Because it’s used only for that, visitors learn its meaning without being told.

• Action. Primary buttons and links that move people forward.

• State. What’s active, selected or new.

• Emphasis. A small detail that ties sections together.

If the accent is everywhere, it isn’t an accent any more.

Check contrast early

Bright accents often fail contrast on white. I test text and icon combinations before the palette is approved, so accessibility isn’t a late compromise.

Name colours by role

In Framer I name colour styles by what they do — Primary, Secondary, Accent — rather than what they look like. That makes a future rebrand a five-minute change.