Colour

Contents

Introduction

Our colour palette is an important part of how we present ourselves. Our pages are kept clean and free from unnecessary colour to ensure focus is always on the content and its associated actions. Too much on a page can lead to confusion and cause users to overlook important information. Therefore, we have intentionally aimed to reduce the amount of "visual noise" by using our carefully considered palette, while adding splashes of colour to help with signposting and engagement.

Our palette is also aligned with the WCAG 2.1 accessibility requirements for colour contrast, so that users with visual impairments are able to perceive content on our pages. For more information, please refer to Accessibility.

Below you will find examples and explanations of the colours we have chosen to use in the Mosaic Design System.

Greyscale colours

The greyscale palette is our base palette and used for the default font colours and most UI elements, such as borders, dividers, surface backgrounds, etc. It comprises of 14 colours, including black and white. This provides an extremely flexible palette to work with:

All colours

Contextual colours

The contextual colours are used to support specific actions, statuses, or outcomes. They provide an additional layer of visual information to help users understand how a product has interpreted a decision, or to indicate how something will be interpreted. For example, an invalid input on a form would use the 'danger' contextual colour to indicate an error. However, contextual colours must always be accompanied by text labels or icons (or both!), as colour alone will not be conveyed to all users. For more information, please refer to Accessibility.

Our contextual colours are named:

• Primary
• Success
• Danger
• Warning
• Info

Primary

This colour is reserved for the main CTA on a page, like adding or importing. Wherever possible, there should only be one Primary coloured action on a page, dialog, or sheet.

Success

This colour is used to indicate positive items, like Save or Accept buttons or Completed indicators. It reinforces that the action or status is of a positive nature. For example, a message confirming that an import was performed successfully would use the Success colour.

Danger

This colour is used to indicate information about destructive activities or to validate form completion, where failure to take or avoid a specific action could result in the loss of data or the inability to submit a form. It should be clear to users that disregarding such a message may not be reversible, or that without correct form validation users must make the necessary changes to continue.

Warning

This colour is used to indicate information recommended for the completion of a task, which may require confirmation or a particular course of action. Users should be allowed to ignore warnings and still complete a task, but it must be made clear that doing so may have a negative impact. For example, a message warning that a file is bigger than the recommended size and may affect performance.

Info

This colour is used to indicate neutral or advisory information, which provide details that either apply to regular day-to-day usage or relates to special conditions. Users can ignore this context with no impact. For example, a message recommending the size for images before importing.