Design System

Colours

The colors in our palette stem from the reliability of our product and the authenticity of our team.

Primary Colours

The primary colors are the core, used to define our brand. They should be used predominately in marketing our product.

Cerulean

400 #1e88e5
  • 100 #c3eafc
  • 200 #73d3ff
  • 300 #37b9f5
  • 400 #1e88e5
  • 500 #1565c0
  • 600 #104a8c
  • 700 #0d3960

Steel

500 #607d8b
  • 100 #eceff1
  • 200 #ced6db
  • 300 #b0bec5
  • 400 #78909c
  • 500 #607d8b
  • 600 #455a64
  • 700 #263238

Slate

500 #757575
  • 100 #f5f5f5
  • 200 #e5e5e5
  • 300 #c5c5c5
  • 400 #959595
  • 500 #757575
  • 600 #555555
  • 700 #252525

Isabelline

300 #efebe9
  • 100 #faf7f5
  • 200 #f3f0ef
  • 300 #efebe9

Secondary Colours

The secondary palette allows us to push our boundaries, while staying within the consistency of our brand guides. The secondary colors should be used to distinguish our products as unique while still being recognisably part of our family.

  • Bullion #c0a45b
  • Gold #ffbb00
  • Coquelicot #ff3d00
  • Coral #ff3b30
  • Harlequin #4cd964
  • Black #000000
  • White #ffffff

Accessibility of our Colour Palette

For all the colours above, black or white text is being used with them according to which has sufficient contrast to comply with WCAG standards.

In most cases, these colours will be used with black or white. However, our body text colour is Slate 500 and although most of our text sits against a white background there may be some instances in which we use a light grey background (Slate 100) instead (sponsored content spots are one of these). In these cases, a darker text colour, such as Slate 600, must be used instead.