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
C 0 M 88 Y 39 K 13
blue
#003366
C 100 M 83 Y 35 K 20
green
#00AB55
C 78 M 0 Y 83 K 0
☝️ 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
C 0 M 0 Y 0 K 0
{' '}
lightGrey
#F2F2F2
C 0 M 0 Y 0 K 5
grey
#8293A3
C 20 M 10 Y 0 K 36
darkGrey
#647485
C 25 M 13 Y 0 K 48
black
#1F2D3D
C 49 M 26 Y 0 K 76
Extended palette
- Tintier pink is used in focus states
- Other tints are used in charts, graphs and illustrations
Pink extended
shady
#C90070
C 0 M 100 Y 44 K 21
tintish
#E94EA5
C 10 M 80 Y 0 K 0
tinted
#EF7ABB
C 7 M 63 Y 0 K 0
tintier
#F4A7D2
C 3 M 45 Y 0 K 0
tintiest
#FAD3E8
C 0 M 25 Y 0 K 0
Blue extended
shady
#001A4D
C 100 M 90 Y 40 K 40
tintish
#335C85
C 85 M 60 Y 25 K 10
tinted
#6685A3
C 65 M 40 Y 20 K 5
tintier
#99ADC2
C 45 M 25 Y 15 K 0
tintiest
#CCD6E0
C 25 M 10 Y 10 K 0
light
#E5EAEF
C 4 M 2 Y 0 K 6
Green extended
shady
#008746
C 100 M 0 Y 48 K 47
shadier
#006635
C 53 M 0 Y 25 K 47
tintish
#33BD77
C 70 M 0 Y 67 K 0
tinted
#66CE99
C 60 M 0 Y 50 K 0
tintier
#99DEBB
C 45 M 0 Y 35 K 0
tintiest
#CCEFDD
C 25 M 0 Y 20 K 0
Red extended
shady
#d00000
red
#EE0000
Grey extended
light
#CCCCCC
C 0 M 0 Y 0 K 20
dark
#8C8C8C
C 0 M 0 Y 0 K 45