Framing our course content

Boxes are one of the most flexible layout elements in our design system. They can contain anything from short notes to detailed explanations, and their consistent style helps learners immediately recognise key content areas.

To make this work across the many types of content we produce, our boxes follow a few simple but important rules that balance flexibility with visual consistency.

Every standard box includes two parts: the container and the rail:

The Container
The container uses a soft vertical gradient background with a 90% transparency, giving it a subtle layered appearance that sits naturally within the page.

The Rail
Along its left edge, a 10px rail adds a defining accent — a branded line that acts as the starting point for box animations and helps anchor the box visually.

Together, these two components create a distinct look that feels light, modern, and unmistakably part of our design system.

To keep boxed content balanced, a standardised set of margins defines how text and visuals are placed inside. This prevents content from feeling either too cramped or too spread out.

Each box includes two invisible zones:

1. A magenta margin area — content must stay outside this space to avoid visual crowding.

2. A green content height zone — sets the top and bottom boundaries for the content inside.

Two margin standards are available to suit different content densities, offering flexibility without sacrificing consistency. These measurements ensure every box feels orderly, regardless of its size or complexity.

Ribbons are a variation of our box system designed to extend to the edge of a page. They omit the rail but follow the same internal margin rules as standard boxes.

This design makes ribbons ideal for highlighted summaries, or broad thematic statements. Their unique presentation gives them strong visual impact, helping important content stand out without disrupting the page structure.

Whether it’s a compact info box or a bold ribbon banner, these components provide designers with an efficient, repeatable way to organise content. They minimise time spent on manual layout decisions while keeping the learner’s focus exactly where it belongs — on the information itself.

By using boxes and ribbons thoughtfully, we create courses that are easier to read, easier to build, and unmistakably ours.