Colours

Main palette

Brand colours

• Pink is used for highlights
• Blue is used for text, in alternating backgrounds, and for pathway buttons
• Green is used in action buttons and links

☝️ Research insight: Members are shown a progress tracker to guide them through their switch to us. When testing this tracker, we found that pink drew users' attention to specific actions without feeling threatening.

UI Colours

• Green is positive
• Red is negative or destructive
• Orange is used in warnings and to draw attention

Grayscale

• Light grey is used for backgrounds
• Grey is used for borders
• Dark grey is used for hint text (e.g. text fiend label) and for disabled buttons

Extended palette

• Tintier pink is used in focus states
• Other tints are used in charts, graphs and illustrations

Pink extended

Blue extended

Green extended

Red extended

Grey extended