Establish brand, intuitive guidance, create emotion.


Our colour system comprises of three palettes; Core, Functional and Accent. These combined create a clear visual style that communicates our brand, dictates visual language and evokes emotion through a balanced use of vibrant highlights.

Colour Palettes

Core palette

Our primary colour palette establishes brand, usage for typography and user interface framework elements.

Aviva yellow


Aviva's primary colour should be used sparingly to denote its importance.



White is your best friend.

Body Copy Grey


Used for bold copy.

Heading Grey


Used for H1, H2, H3 & H4.

Defining Grey


Used for keylines and separating content.

Light Grey


Used for background of modules.

Lightest Grey


Used as the form field fill.

Functional palette

We utilise our functional palette to create visual language systems that our users can relate to and rely on throughout any Aviva digital journey and experience.

Aviva blue


Used for actions and links, anything clickable should have an element of this blue.

Positive Green


Used to affirm or reinforce a positive action. Only AA compliant when type is over 18pt (or 16pt if bold).

Guide Blue


Used to highlight user choices and guide the user. For example, focus states on fields and selected radio buttons.

Error Red


Used for displaying errors or warnings that the user must take action on.

Warning Orange


Used for displaying warnings that the user doesn't need to take immediate take action on.

Accent palette

Used primarily in content, our accent palette evokes emotion and creates focus. Used intelligently and sparingly so as not to overwhelm, it enables us to bring life to our creative.

Aviva yellow


Dark Blue


Light Blue


Lightest Blue


Dark Green


Dark Purple


Light Purple






Dark Grey


How to apply colour

While colours can be applied in many ways, it is more effective to work through our palettes one at a time to add depth as you progress

  • Start with the core palette as a base.

  • Add functional palette - these should dictate themselves, ie. links are blue, selected elements are green.

  • Finally add colours from the accent palette to highlight content and bring the design to life.