Brand Guide

Color Palette

Our brand colors are cyan and magenta. The following palette should be used across user interfaces. Click a color to copy it to your clipboard.

#2196F3
#1E88E5
Blue
#716BF1
#5B55D4
Purple
#4ad3ac
#37bc9b
Green
#FFCE54
#FCBB42
Amber
#EF6C00
#E65101
Orange
#f96155
#e23f37
Red
#273444
#232C39
Blue Grey
#F9F9F9
#D9D9DE
Grey

While color can be used to differentiate information or add visual interest, some colors are used to communicate specific messages. For example, Yellow Orange is used for warnings or alerts, while Red generally means an error. Green indicates success, and blue is for primary actions and links.

Typography

Dark text on light backgrounds

For typography, black is used on light backgrounds with varying opacity to form hierarchy and direct focus. Headings or primary text is set darker, while secondary and less important text is lighter.

Dark Text (#000000) Opacity
Headings 70%
Secondary text 60%
Hint text or captions 40%

Light text on dark backgrounds

When white text is used on a darker background, opacity is used to blend the text with some of the background color in addition to creating a visual hierarchy. Use the table as a guideline for the percentage to use.

Light Text (#FFFFFF) Opacity
Headings 90%
Secondary text 80%
Hint text or captions 65%

Illustrations

When creating illustrations, a wider selection of colours and tonal variations can be used. Avoid using dull or muddy colours. Stick to bright flat areas of colour and do not use any textures. Using gray is fine as long as there are accents of colour. If you are using black in the design make sure it isn't 100% black (a very dark gray is preferred).

An example illustration
An example illustration
An example illustration