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

#E4228E

C 7 M 90 Y 0 K 0

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

lightGrey

#F2F2F2

grey

#CCCCCC

C 23 M 17 Y 18 K 0

darkGrey

#8C8C8C

C 46 M 36 Y 36 K 15

Extended palette

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

Pink extended

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

Green extended

shady

#00943C

C 85 M 10 Y 100 K 0

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