Colour Guidelines
Colour is an important tool to communicate what actions are possible to a user and the relative priority of each element on the page. The following guidelines are based on the Brand Hub and are meant to extend that guidance to digital products.
How we use colour to enhance usability
-
We use colour intentionally. We use neutral colours for web components and patterns. Occassionally we use our core colours (and their varying shades). This is because UI components and patterns need to work with a wide array of supporting colours, photography, and illustrations. Keeping to a limited palette ensures these designs will be effective in varying contexts.
-
We never use colours in isolation to convey meaning. As part of our commitment to accessibility, we never create a design that relies solely on colour to communicate essential information. This means for graphs, diagrams, and notices, we always include text or iconography to indicate states (e.g. success, danger, caution).
-
We use colour consistently We ensure that we use colour consistently across our products. If we use the colour ‘red’ to indicate a warning in one product we do not use ‘yellow’ in another product.
Colour palette for digital products
Core colours
For each colour you can see acceptable shade variations as well as the accessibility of each shade on light or dark backgrounds.