Colour

Colour system

The Parsley Design System utilises a colour system based on defined brand colours and is a collection of carefully considered tokens designed to work in unison. The colour tokens have assigned roles which instill a semantic meaning based on how they are used within content and functionality.

Colour system rules

• Use the default or primary colour tokens per colour set in the first instance, then consider the additional colour tokens within the colour set.
• For text use the primary text colour by default, subdued is to be used on less important or optional text.
• For interactivity the backup secondary and secondary-inverse are available to use when a background colour impacts the contrast requirements of text or non-text elements or focus states.
• Use selected states that are clearly different to non-selected or inactive states and apply that consistency throughout.
• Colour plays a key role in creating the overall hierarchy of a screen. Using the subdued text token or background layer tokens can help change the hierarchy of content.

Accessibility of the colour system

The colour system is applied throughout all colour tokens and consider accessibility contrast requirements. All default state text colours are compatible with default state background colours, additionally all inverse text colours are compatible with inverse background colours. This ensures consumers of the design system can use the defined colours confidently.

Dark mode

Dark mode focuses on light text on dark backgrounds. It provides a less saturated and intense interface experience for users. Dark mode can be easier to read both in dark and light settings. Dark mode may lower or eliminate screen flickering, potentially increasing focus. Dark mode is intended to reduce blue light exposure and help with eye strain that comes with prolonged screen time. The reduction in blue light may reduce any squinting or strain associated with high amounts of brightness. While many users prefer dark mode it can cause issues for users with myopia or astigmatism where halation causes light text on a dark background to appear foggy or blurry for these users.

• Use the background tokens to help elevate content
• Saturated colours from light mode are replaced with less saturated gray scale colours
• The colour token operate in the same way as light mode in that the semantic colour sets meet contrast requirements for text and non-text colours on the background tokens.

Dark mode rules

• Don’t use black as a background colour, the background tokens in dark mode are not solid black.
• For data visualisation only use backgroundPrimary" and background-secondary. Background-tertiary doesn’t meet contrast requirements with the data visualisation colours.
• To maximise readability and legibility use light text colours on the defined background tokens.
• Avoid saturated colours, instead utilise desaturated colours and stick to gray scale colours where possible, this provides a more calming experience. The dark mode colour system contains gray scale colour swatches.
• Ensure colour is not the only visual indicator to convey specific content or functionality.

Accessibility requirements considered for colour

• Text on backgrounds are above the 4.5:1 contrast ratio
• Non-text content and user interface controls on backgrounds are above the 3:1 ratio
• Use of Colour where colour alone is used to identify visual meaning
• Focus visible
• Focus not obscured (minimum)
• Focus not obscured (enhanced)
• Focus appearance

Approach to colour

The approach to colour and how colour contributes to design follows a design hierarchy of priority whereby other elements are considered of higher importance before colour:

Position

Size

Shape

Contrast

Colour

Form