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 start with the background template that comes with the Core Elements Kit. 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's how the new gradient style supports our pages:

• Transition between colours is smooth and understated.

• Avoids high contrast or harsh colour jumps.

• Feels calm and supporting, not distracting.

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.