App

App palette

The app palette contains all primary colours, tints, shades and accents.

Follow the overall colour guidance to ensure brand coherence across channels.

The app palette has:

Blues

• Primary blue: RGB 29 112 184
• Primary blue: #1D70B8
• Blue tint 25%: RGB 86 148 202
• Blue tint 25%: #5694CA
• Blue tint 50%: RGB 142 184 220
• Blue tint 50%: #8EB8DC
• Blue tint 80%: RGB 210 226 241
• Blue tint 80%: #D2E2F1
• Blue tint 95%: RGB 244 248 251
• Blue tint 95%: #F4F8FB
• Blue shade 10%: RGB 26 101 166
• Blue shade 10%: #1A65A6
• Blue shade 25%: RGB 22 84 138
• Blue shade 25%: #16548A
• Blue shade 50%: RGB 15 56 92
• Blue shade 50%: #0F385C
• Accent blue: RGB 17 224 241
• Accent blue: #11E0F1
• Dark mode primary blue: RGB 55 163 255
• Dark mode primary blue: #37A3FF
• Dark mode blue shade 80%: RGB 6 22 37
• Dark mode blue shade 80%: #061625

Greens

• Primary green: RGB 15 122 82
• Primary green: #0F7A52
• Green tint 25%: RGB 75 155 125
• Green tint 25%: #4B9B7D
• Green tint 50%: RGB 135 188 168
• Green tint 50%: #87BCA8
• Green tint 80%: RGB 207 228 220
• Green tint 80%: #CFE4DC
• Green tint 95%: RGB 243 248 246
• Green tint 95%: #F3F8F6
• Green shade 25%: RGB 11 92 62
• Green shade 25%: #0B5C3E
• Green shade 50%: RGB 8 61 41
• Green shade 50%: #083D29
• Accent green: RGB 102 243 158
• Accent green: #66F39E

Teals

• Primary teal: RGB 21 129 135
• Primary teal: #158187
• Teal tint 25%: RGB 80 161 165
• Teal tint 25%: #50A1A5
• Teal tint 50%: RGB 138 192 195
• Teal tint 50%: #8AC0C3
• Teal tint 80%: RGB 208 230 231
• Teal tint 80%: #D0E6E7
• Teal tint 95%: RGB 243 249 249
• Teal tint 95%: #F3F9F9
• Teal shade 25%: RGB 16 97 101
• Teal shade 25%: #106165
• Teal shade 50%: RGB 11 65 68
• Teal shade 50%: #0B4144
• Accent teal: RGB 0 255 224
• Accent teal: #00FFE0

Purples

• Primary purple: RGB 84 49 159
• Primary purple: #54319F
• Purple tint 25%: RGB 127 101 183
• Purple tint 25%: #7F65B7
• Purple tint 50%: RGB 170 152 207
• Purple tint 50%: #AA98CF
• Purple tint 80%: RGB 221 214 236
• Purple tint 80%: #DDD6EC
• Purple tint 95%: RGB 246 245 250
• Purple tint 95%: #F6F5FA
• Purple shade 25%: RGB 63 37 119
• Purple shade 25%: #3F2577
• Purple shade 50%: RGB 42 25 80
• Purple shade 50%: #2A1950
• Accent purple: RGB 186 74 255
• Accent purple: #BA4AFF

Magentas

• Primary magenta: RGB 202 53 124
• Primary magenta: #CA357C
• Magenta tint 25%: RGB 215 104 157
• Magenta tint 25%: #D7689D
• Magenta tint 50%: RGB 229 154 190
• Magenta tint 50%: #E59ABE
• Magenta tint 80%: RGB 244 215 229
• Magenta tint 80%: #F4D7E5
• Magenta tint 95%: RGB 252 245 248
• Magenta tint 95%: #FCF5F8
• Magenta shade 25%: RGB 152 40 93
• Magenta shade 25%: #98285D
• Magenta shade 50%: RGB 101 27 62
• Magenta shade 50%: #651B3E
• Accent magenta: RGB 255 82 238
• Accent magenta: #FF52EE

Reds

• Primary red: RGB 202 53 53
• Primary red: #CA3535
• Red tint 25%: RGB 215 104 104
• Red tint 25%: #D76868
• Red tint 50%: RGB 229 154 154
• Red tint 50%: #E59A9A
• Red tint 80%: RGB 244 215 215
• Red tint 80%: #F4D7D7
• Red tint 95%: RGB 252 245 245
• Red tint 95%: #FCF5F5
• Red shade 25%: RGB 152 40 40
• Red shade 25%: #982828
• Red shade 50%: RGB 101 27 27
• Red shade 50%: #651B1B
• Accent red: RGB 255 94 94
• Accent red: #FF5E5E

Oranges

• Primary orange: RGB 244 119 56
• Primary orange: #F47738
• Orange tint 25%: RGB 247 153 106
• Orange tint 25%: #F7996A
• Orange tint 50%: RGB 250 187 156
• Orange tint 50%: #FABB9C
• Orange tint 80%: RGB 253 228 215
• Orange tint 80%: #FDE4D7
• Orange tint 95%: RGB 254 248 245
• Orange tint 95%: #FEF8F5
• Orange shade 25%: RGB 183 89 42
• Orange shade 25%: #B7592A
• Orange shade 50%: RGB 122 60 28
• Orange shade 50%: #7A3C1C
• Accent orange: RGB 255 175 74
• Accent orange: #FFAF4A

Yellows

• Primary yellow: RGB 255 221 0
• Primary yellow: #FFDD00
• Yellow tint 25%: RGB 255 230 64
• Yellow tint 25%: #FFE640
• Yellow tint 50%: RGB 255 238 128
• Yellow tint 50%: #FFEE80
• Yellow tint 80%: RGB 255 248 204
• Yellow tint 80%: #FFF8CC
• Yellow tint 95%: RGB 255 253 242
• Yellow tint 95%: #FFFDF2
• Yellow shade 25%: RGB 191 166 0
• Yellow shade 25%: #BFA600
• Yellow shade 50%: RGB 128 111 0
• Yellow shade 50%: #806F00
• Accent yellow: RGB 252 255 82
• Accent yellow: #FCFF52

Neutrals

• Black: RGB 11 12 12
• Black: #0B0C0C
• Black tint 25%: RGB 72 73 73
• Black tint 25%: #484949
• Black tint 50%: RGB 133 134 134
• Black tint 50%: #858686
• Black tint 80%: RGB 206 206 206
• Black tint 80%: #CECECE
• Black tint 95%: RGB 243 243 243
• Black tint 95%: #F3F3F3
• White: RGB 255 255 255
• White: #FFFFFF

App header

For coherence with web, the app also uses the blue header throughout key screens. This also adds visual hierarchy and aids brand recognition.

Indicative examples for illustrative purposes only.

Mobile web header

App header

Indicative examples for illustrative purposes only.

Examples

Within app we lead with the Primary blue and Accent teal, from splash screen to core components.

Where appropriate we can introduce harmonious colours to aid with structure and hierarchy of content – such as tints within cards or contextual colours that enhances navigation.

Colour should be applied in a way that does not add visual complexity or reduce accessibility.

Indicative examples for illustrative purposes only.