Overview

Styles control the look and feel of the user interface.

Adjusting colours, images, graphic devices and typography are the primary methods of adapting the design system to the specific aesthetic of your brand. Grids, spacing and layout form the foundations of how all components are positioned on the page.

  • Colour

    Our versatile and accessible colour matrix is designed to establish a cohesive visual identity.

  • Typography

    Typography essentials, such as font, headings style, text classes and line heights.

  • Iconography

    Icons depict activities, convey current conditions, signal potential interactions, and highlight significant details.

  • Images

    Images help tell a story, clarify complex messages that are difficult to express with words, and to show users how to perform an action.

  • Grids

    A grid is a framework of cells laid out and aligned vertically and horizontally using a responsive, scrollable column structure.

  • Spacing

    The Design System uses consistent pattern for spacing elements vertically that ensures all content follows the same vertical rhythm across all pages

  • Underlines

    Underlines visibly show users what is a hyperlink when there are no other common UI patterns to show this (ie buttons).

  • Flexbox utilities

    Classes to manage an item’s flexbox properties.

Last updated: May 2024