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