Colour

Our distinct core colour palette is supported by a vibrant complementary palette, helping us tailor our communication to different mediums and audiences.

Core palette

Overview

Our colour palette strikes a sense of warmth and openess. Our colour system is divided into two palettes - Customer and Broker. Both palettes have a hero colour which is supported by harmonious tones.

Terracotta

Lead colour
High brand level moments

R 255 G 153 B 31
C 0 M 50 Y 95 K 0
Hex: FF991F
Pantone: 150C

Glass

Supporting colour
Secondary moments

R 214 G 245 B 255
C 30 M 2 Y 7 K 0
Hex: D6F5FF
Pantone: 2707C

Limestone

Functional colour
Type and backgrounds

R 246 G 246 B 241
C 7 M 5 Y 12 K 0
Hex: F6F6F1
Pantone: Cool Gray 1C

Monstera

Supporting colour
Secondary moments

R 6 G 61 B 57
C 94 M 35 Y 52 K 63
Hex: 063D39
Pantone: 330C

Granite

Functional colour
Type and backgrounds

R 29 G 29 B 27
C 40 M 40 Y 40 K 100
Hex: 1D1D1B
Pantone: 0000

Terrazzo

Lead colour
High brand level moments

R 37 G 193 B 163
C 72 M 0 Y 43 K 0
Hex: 25C1A3
Pantone: 3255C

Glass

Supporting colour
Secondary moments

R 214 G 245 B 255
C 30 M 2 Y 7 K 0
Hex: D6F5FF
Pantone: 2707C

Limestone

Functional colour
Type and backgrounds

R 246 G 246 B 241
C 7 M 5 Y 12 K 0
Hex: F6F6F1
Pantone: Cool Gray 1C

Monstera

Supporting colour
Secondary moments

R 6 G 61 B 57
C 94 M 35 Y 52 K 63
Hex: 063D39
Pantone: 330C

Granite

Functional colour
Type and backgrounds

R 29 G 29 B 27
C 40 M 40 Y 40 K 100
Hex: 1D1D1B
Pantone: 0000

Glass

Lead colour
High brand level moments

R 214 G 245 B 255
C 30 M 2 Y 7 K 0
Hex: D6F5FF
Pantone: 2707C

Terracotta

Supporting colour
Secondary moments

R 255 G 153 B 31
C 0 M 50 Y 95 K 0
Hex: FF991F
Pantone: 150C

Limestone

Functional colour
Type and backgrounds

R 246 G 246 B 241
C 7 M 5 Y 12 K 0
Hex: F6F6F1
Pantone: Cool Gray 1C

Monstera

Supporting colour
Secondary moments

R 6 G 61 B 57
C 94 M 35 Y 52 K 63
Hex: 063D39
Pantone: 330C

Granite

Functional colour
Type and backgrounds

R 29 G 29 B 27
C 40 M 40 Y 40 K 100
Hex: 1D1D1B
Pantone: 0000

Customer Broker Mortgage

Tints

Our tints help to extend our colour palette and allow for ultimate flexibility across UI and infographic applications.

Terracotta

80%
Hex: FFAD4C

60%
Hex: FFC279

40%
Hex: FFD6A5

20%
Hex: FFEBD2

Glass

80%
Hex: DEF7FF

60%
Hex: E6F9FF

40%
Hex: EFFBFF

20%
Hex: F7FDFF

Monstera

80%
Hex: 386461

60%
Hex: 6A8B88

40%
Hex: 9BB1B0

20%
Hex: CDD8D7

Terrazzo

80%
Hex: 51CDB5

60%
Hex: 7CDAC8

40%
Hex: A8E6DA

20%
Hex: D3F3ED

Glass

80%
Hex: DEF7FF

60%
Hex: E6F9FF

40%
Hex: EFFBFF

20%
Hex: F7FDFF

Monstera

80%
Hex: 386461

60%
Hex: 6A8B88

40%
Hex: 9BB1B0

20%
Hex: CDD8D7

Glass

80%
Hex: DEF7FF

60%
Hex: E6F9FF

40%
Hex: EFFBFF

20%
Hex: F7FDFF

Terracotta

80%
Hex: FFAD4C

60%
Hex: FFC279

40%
Hex: FFD6A5

20%
Hex: FFEBD2

Monstera

80%
Hex: 386461

60%
Hex: 6A8B88

40%
Hex: 9BB1B0

20%
Hex: CDD8D7

Customer Broker Mortgage

Hierarchy

Follow this guidance to make sure all of our Customer and Broker communications are impactful and consistent.
Customer Broker Mortgage

In use

In comms

Below are examples of our usage for Customer and Broker. 
In Customer applications we hero Terracotta, whilst Broker applications use Terazzo as the lead colour.
Customer Broker Mortgage

Product

For Product uses, we should lead with our White and Off-White colour. Terracotta and Terrazzo should be used sparingly to create visual impact.
Customer Broker Mortgage

Illustration

Illustration should always be Charcoal on all of our colour tones apart from Monstera. When illustration is used on Monstera the line work must be granite.

Things to avoid

01

Do not use colours outside our palette.

02

Do not combine colours.

03

Do not use gradients.

04

Do not use unspecified tints.

Next section Typography