Colours

The use of colour in our interfaces help convey meaning, hierarchy, and accessibility to our products.

Colour is purposeful

When using colour, we value communication over aesethetics. Although aesethetics are still a factor, we place emphasis on conveying meaning through colour over decoration. It is also important to note that colour alone is not always enough to convey meaning but it can help support the intended message.

Colour - Purposeful

Colour - Accessible

Colour is accessible

We strive to comply with AA standard contrast ratios when using combinations of text colours in our product interfaces. This helps to provide accessible interfaces for a wide range of our users, increasing usability and readability. If you see a AA Compliant colour listed below, this means the text of this colour contrasts well against a white background.

Colour supports hierarchy

Using large amounts of colour within an interface can often hamper the visual hierarchy. We use colour sparingly and purposefully to draw focus and attention for the user.

Colour - Hierarchy

Primary Brand

Our primary colour is purple, and it's used for links and to highlight elements on the page like focused form elements and selected table rows.

Example
  • AA Compliant
    $brand-primary
    #8241AA
  • $brand-primary-lighter
    #A476C1

UI Palette

The UI palette is used for action buttons, alert messages, labels, tags, badges and form validation.

Example
  • $brand-success
    #00AA65
  • AA Compliant
    $brand-info
    #2B74DF
  • $brand-warning
    #E6C543
  • AA Compliant
    $brand-danger
    #CE2554

UI Gray Palette

This is our gray palette to define typography, background colours and strokes.

Example
  • AA Compliant
    $gray-base
    #2E3E4F
  • AA Compliant
    $gray-darker
    #515E6D
  • AA Compliant
    $gray-dark
    #687480
  • $gray
    #969EA7
  • $gray-light
    #C5C9CE
  • $gray-lighter
    #DCDFE1
  • $gray-lighter-1
    #E8EAEC
  • $gray-lighter-2
    #F3F4F5