Background colours & gradient

A consistent background helps learners immediately recognise our brand, while also supporting focus and readability. The background should complement — not compete with — the main content on the page.

By following a few simple principles, we keep our courseware looking clean, calm, and easy on the eyes.

To maintain alignment with our brand identity, the background colours used in our gradient — come directly from our official colour palette.

This ensures that every course page feels like part of the same visual family, no matter the topic or layout.

If you’re building or designing a new page, always refer to the approved brand palette to select the correct shades. Avoid introducing new blues or adjusting their intensity unless approved by the design team.

We use a soft, subtle gradient for our base background. The goal is not to make the gradient a feature on its own, but to use it as a gentle way to draw attention toward the centre of the screen — where the main course content lives.

Here are a few quick guidelines:

• Keep the transition between colours smooth and understated.

• Avoid high contrast or harsh colour jumps.

• The gradient should feel calm and supporting, not distracting.

• Always preview the gradient with overlaid text or interface elements to confirm readability.

As part of our visual refresh, we’ve introduced a new softer blue gridded background.

This updated version builds on the design of the previous grid, but with lighter lines and a gentler tone that better complements our modern gradient and brand colours.

The grid serves as a subtle visual structure — it adds depth and a sense of space without pulling attention away from the content.
Use this new gridded background wherever the courseware layout calls for a structured or “tech-inspired” aesthetic, ensuring it remains secondary to text and interactive elements.

The background gradient isn’t just decoration — it’s the foundation of our course pages. It sets the stage for everything that follows, creating a calm and consistent base on which all course content is built.

By beginning each design with this soft, brand-aligned gradient, we establish a unified visual language that ties all our learning materials together. It’s the first cue that learners are in our environment — professional, approachable, and thoughtfully designed.