Colours
- Use the primary colours as the main use or focus
- After primary use you may use at a tint, some values of key tints are provided
- Avoid stroke outlines
- Note: Greens do not translate well from rgb to cmyk, and will appear duller in print
- The vector colour palette has been provided in our
Brand Assets Folder
Primary Colours
Secondary 'Tint'
Light 'Tint'
Colour Hint
Hover & Accessibility
Gradients
- Gradients should be used sparingly to draw attention to CTAs and Features
- They should not appear touching other gradients or solid colours other than white.
- The class ending
2should always be the dark - light - dark direction.
Gradients
A two colour gradient may be:
- 1 x Primary Colour (60 Stop) 1 x 'Tint' (0 Stop)
- 1 x Primary Colour (40 Stop) 1 x 'Tint' (100 Stop)
Gradients
A three colour gradient may be:
- 0 Stop / 40 Stop / 90 Stop
You may use a primary colour twice in a 3 colour gradient but it must be the same colour repeated.
grad_blue
background: rgb(214,235,245);
background: linear-gradient(143deg, rgba(214,235,245,1) 0%, rgba(51,153,204,1) 40%, rgba(214,235,245,1) 90%);
background: rgb(51,153,204);
background: linear-gradient(143deg, rgba(51,153,204,1) 0%, rgba(214,235,245,1) 40%, rgba(51,153,204,1) 90%);grad_green
background: rgb(175,234,214);
background: linear-gradient(143deg, rgba(175,234,214,1) 0%, rgba(51,204,153,1) 40%, rgba(175,234,214,1) 90%);
background: rgb(51,204,153);
background: linear-gradient(143deg, rgba(51,204,153,1) 0%, rgba(175,234,214,1) 40%, rgba(51,204,153,1) 90%);grad_mixed
background: rgb(51,153,204);
background: linear-gradient(140deg, rgba(51,153,204,1) 0%, rgba(86,226,175,1) 100%);
background: rgb(86,226,175);
background: linear-gradient(140deg, rgba(86,226,175,1) 0%, rgba(51,153,204,1) 100%);grad_yellow
background: rgb(253,213,120);
background: linear-gradient(140deg, rgba(253,213,120,1) 0%, rgba(251,188,37,1) 40%, rgba(253,213,120,1) 90%);