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
pink
#DF1B88
blue
#003366
green
#00AB55
☝️ 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
green
#00AB55
red
#EE0000
orange
#FF6200
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
white
#FFFFFF
lightGrey
#F2F2F2
grey
#8293A3
darkGrey
#647485
black
#1F2D3D
Extended palette
- Tintier pink is used in focus states
- Other tints are used in charts, graphs and illustrations
Pink extended
shady
#C90070
tintish
#E94EA5
tinted
#EF7ABB
tintier
#F4A7D2
tintiest
#FAD3E8
Blue extended
shady
#001A4D
tintish
#335C85
tinted
#6685A3
tintier
#99ADC2
tintiest
#CCD6E0
light
#E5EAEF
Green extended
shady
#008746
shadier
#006635
tintish
#33BD77
tinted
#66CE99
tintier
#99DEBB
tintiest
#CCEFDD
Red extended
shady
#d00000
red
#EE0000
Grey extended
light
#CCCCCC
dark
#8C8C8C