Skip to content


  • 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


  • 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 2 should always be the dark - light - dark direction.


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)


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.


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%);


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%);


    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%);


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%);