Foundations

Colours

Primary

This is the top-level colour palette. It’s a reflection of our brand, core to our brand identity and what our logo is made from.

Purple: Hex #674186

RGB 103, 65, 134

CMYK 72, 83, 12, 1

Pink: Hex #bf4a8e

RGB 191, 74, 142

CMYK 30, 82, 0, 0

Navy: Hex #003366

RGB 0, 51, 102

CMYK 96, 77, 37, 30

White: Hex #ffffff

RGB 255, 255, 255

CMYK 0, 0, 0, 0

Primary tints

Purple 140: Hex #291046

RGB 41, 16, 70

CMYK 97, 100, 37, 41

Purple 120: Hex #391c56

RGB 57, 28, 86

CMYK 92, 100, 31, 27

Purple 80: Hex #85679e

RGB 133, 103, 158

CMYK 57, 64, 11, 1

Purple 60: Hex #a48db6

RGB 164, 141, 182

CMYK 41, 47, 10, 0

Purple 40: Hex #c2b3cf

RGB 194, 179, 207

CMYK 28, 31, 7, 0

Purple 20: Hex #e0d9e7

RGB 224, 217, 231

CMYK 13, 16, 4, 0

Purple 10: Hex #eeecf1

RGB 238, 236, 241

CMYK 7, 7, 3, 0

Purple 5: Hex #f7f5f9

RGB 247, 245, 249

CMYK 4, 4, 1, 0

Pink 140: Hex #8f154f

RGB 143, 21, 79

CMYK 31, 100, 32, 29

Pink 120: Hex #9e2e6f

RGB 158, 46, 111

CMYK

Pink 80: Hex #cc6ea4

RGB 204, 110, 164

CMYK 20, 68, 4, 0

Pink 60: Hex #dfa5c8

RGB 223, 165, 200

CMYK 12, 44, 2, 0

Pink 40: Hex #eac5db

RGB 234, 197, 219

CMYK 8, 29, 3, 0

Pink 20: Hex #f2dbe8

RGB 242, 219, 232

CMYK 5, 18, 3, 0

Pink 10: Hex #f8ebf3

RGB 248, 235, 243

CMYK 2, 10, 2, 0

Pink 5: Hex #fcf6f9

RGB 252, 246, 249

CMYK 1, 5, 1, 0

Navy 140: Hex #001438

RGB 0, 20, 56

CMYK 100, 90, 45, 60

Navy 120: Hex #00254a

RGB 0, 37, 74

CMYK 100, 85, 43, 44

Navy 80: Hex #335c85

RGB 51, 92, 133

CMYK 85, 59, 27, 10

Navy 60: Hex #668bae

RGB 102, 139, 174

CMYK 64, 38, 18, 3

Navy 40: Hex #96b2d0

RGB 150, 178, 208

CMYK 46, 23, 10, 0

Navy 20: Hex #ccd9e7

RGB 204, 217, 231

CMYK 24, 10, 6, 0

Navy 10: Hex #e5eaef

RGB 229, 234, 239

CMYK 12, 6, 5, 0

Navy 5: Hex #f2f5f7

RGB 242, 245, 247

CMYK 6, 3, 3, 0

Semantic

The semantic colours are for a statuse or notification. They show our standard value states; good, bad, warning and FYI. Each of these colours has the same basic meaning in all contexts.

Mint: Hex #359791

RGB 53, 151, 145

CMYK

Positive

Peach: Hex #e17555

RGB 225, 117, 85

CMYK

Attention

Coral: Hex #e3596d

RGB 227, 89, 109

CMYK

Problem

Purple: Hex #674186

RGB 227, 89, 109

CMYK

Notification

Semantic shades

Mint 120: Hex #12514d

RGB 18, 81, 77

CMYK

Mint Neon: Hex #30dac6

RGB 48, 218, 198

CMYK

Mint 20: Hex #d5f2eb

RGB 213, 242, 235

CMYK

Mint 5: Hex #eaf8f5

RGB 234, 248, 245

CMYK

Peach 120: Hex #b44626

RGB 180, 70, 38

CMYK

Peach Neon: Hex #ff9f5d

RGB 255, 159, 93

CMYK

Peach 20: Hex #ffe5d4

RGB 255, 229, 212

CMYK

Peach 5: Hex #fcf3ea

RGB 252, 243, 234

CMYK

Coral 120: Hex #c22d42

RGB 194, 45, 66

CMYK

Coral Neon: Hex #ff4f68

RGB 255, 79, 104

CMYK

Coral 20: Hex #ffd8dd

RGB 255, 216, 221

CMYK

Coral 5: Hex #ffedee

RGB 255, 237, 238

CMYK

Purple 120: Hex #391c56

RGB 255, 237, 238

CMYK

Purple Neon: Hex #da9efd

RGB 218, 158, 253

CMYK

Purple 20: Hex #e0d9e7

RGB 218, 158, 253

CMYK

Purple 5: Hex #f7f5f9

RGB 218, 158, 253

CMYK

Monochrome

Black is used for shadows and the Charcoal variations are used for text.

Black: Hex #000000

RGB 0, 0, 0

CMYK

Charcoal: Hex #3d403d

RGB 61, 64, 61

CMYK 68, 59, 62, 48

Charcoal 80: Hex #646664

RGB 100, 102, 100

CMYK

Charcoal 30: Hex #c4c5c4

RGB 196, 197, 196

CMYK

Charcoal 20: Hex #d8d9d8

RGB 216, 217, 216

CMYK

Charcoal 10: Hex #ebebeb

RGB 235, 235, 235

CMYK

Charcoal 5: Hex #f5f5f5

RGB 245, 245, 245

CMYK

Gradients

Primary

The percentage values on each gradient represent the position of the tints.

Dusk: Purple
Pink
-

Emotional: Navy
Purple
Purple
Pink
-

Twilight: Purple 140
Purple 120
20%
Purple
40%
Purple 60
80%
Purple 20
-

Dawn: Pink 140
Pink 120
25%
Pink
40%
Pink 60
80%
Pink 20
-

Semantic

Mint Dusk: Purple
Mint
-

Peach Dusk: Purple
Peach
-

Coral Dusk: Purple
Coral
-

Accessibility

When large text is refered to it means any text above 18px or bold 14px and above.

Example

AAA for large text - 18pt

AAA for large text - 14pt bold

WCAG guidelines on contrast