Colours
#
Why we use colour?Colour plays an important role in defining our visual identity. You can use our full suite of colours to create a real sense of brand recognition.
#
Our brand coloursWe use our colours to add energy and warmth to our visual identity. They also play a key role in creating strong brand recognition for our customers.
At our core, we’re a blue and white brand. Our blues and white should always take center stage to create a crisp, clean and functional digital experience.
Secondary colours can be introduced in many ways, primarily through our illustrations and colour accents in our decorations and backgrounds.
Please use our brand colour palette across all digital products.
#
Primary- Cyan
- #0093F5
- Lime
- #7FCC00
- Navy
- #002F87
#
Secondary- Blue
- #004ECC
- Forest
- #00A33E
- Slate
- #111518
- Orange
- #FF7A00
- Red
- #D50032
- Yellow
- #FFC72C
#
Greys- White
- #FFFFFF
- Grey light
- #F3F5F7
- Grey medium
- #C3CED5
- Grey dark
- #435460
#
Our system coloursOur system colours are used to support and enhance communication to users throughout their journeys. Please be aware that system colours are always associated with a meaning and be careful not to create confusion by using these colours, or similar brand colours, inappropriately. Never use system colours as the only means of providing information or requesting an action.
- Info
- #1192E8
- Success
- #1BA158
- Warning
- #E3660E
- Danger
- #E60F41
- Neutral
- #767676
#
AccessibilityAlways be mindful of how colour contrast many impact accessibility when dealing with type online and use our range of tools to ensure that your colour combinations are fully WCAG AA compliant (we follow version 2.1 of the guidelines and will be checking for any required updates when 2.2 is published)
Please refer to our accessiblity section for more detail on colour and accessibility.
#
Best practice💚 Do's | 💔 Dont's |
---|---|
Do use our brand blues and white primarily for a crisp and clean branded experience | Don’t use colour combinations that are not complementary or jarring |
Do use our secondary colours and gradients to inject warmth and personality | Don’t use colour combinations for type that are not WCAG AA accessible |
Do ensure that your colour combinations are accessible to everyone | Do not use system colours for branded content |