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.
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.
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|
|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|
|Hint text or captions||65%|
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).