Learning outcomes
- Explain how to define primary, secondary and functional colours.
- Complete the guided practice safely.
- Check that you can avoid inconsistent colour use.
Page Design and UX
Brand Colour System
Learn to define primary, secondary and functional colours and avoid inconsistent colour use in this beginner-friendly website development lesson.
Before you begin
Work on a practice copy, keep filenames lowercase and hyphenated, and create a backup before changing a live website.
Step-by-step instructions
- Open the relevant project page, file or WordPress screen and confirm you are working on a safe practice copy.
- Document an approved palette.
- Inspect the result using browser tools or WordPress Preview; do not publish yet.
- Check keyboard use, mobile layout, content accuracy, links, images and privacy where applicable.
- Confirm that you can avoid inconsistent colour use, then save a clearly named version or backup.
Ian's practical tip: Preview first, test at desktop and mobile sizes, and keep a recoverable copy before publishing.
Practical activity
Document an approved palette. The expected result is to avoid inconsistent colour use.