Boxes and ribbons are essential tools for structuring information in our courseware. They help us group related content, create visual rhythm, and make complex information easier to follow. By using them consistently, we can maintain clarity across pages while giving each piece of content its own defined space.
26-10-25
Christopher D'Esposito, Graphic Designer
Building blocks of clarity
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.
How to build our boxes
Every standard box includes two parts: the container and the rail:
The Container The container uses asoft 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 7px 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.
Margins and spacing standards
To keep boxed content balanced, a standardised margin defines how text and visuals sit within each box. This ensures content always feels comfortable — never too tight or too loose.
Designers can choose between two margin standards to best suit the box’s size and content density:
45px margin for larger boxes or layouts containing more text and imagery.
25px margin for smaller boxes or concise pieces of information.
These options allow flexibility while maintaining visual consistency, ensuring every box feels cohesive and well-proportioned across all course layouts.
Ribbons: a wider expression
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.
Ribbons are boxes that extend from the edge of the artboard. They do not use a rail like regular boxes but still observe the same margin rules.
Designing for consistency and flow
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.
