Colour

Establish brand, intuitive guidance, create emotion.

Overview

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

#FFD900

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

White

#FFFFFF

White is your best friend.

Body Copy Grey

#444444

Used for bold copy.

Heading Grey

#5C596D

Used for H1, H2, H3 & H4.

Defining Grey

#CCCCCC

Used for keylines and separating content.

Light Grey

#EEEEEE

Used for background of modules.

Lightest Grey

#F9F9F9

Used for background of modules and form fields.

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

#004FB6

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

Positive Green

#4F9F31

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

Positive Green Tint

#EEF7EB

Used in combination with Positive Green.

Guide Blue

#44C0FF

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

Guide Blue Tint

#E5EDF8

Used in combination with Guide Blue.

Error Red

#BD2624

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

Warning Orange

#FFA000

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

#FFD900

Dark Blue

#001E60

Light Blue

#1A61BD

Dark Green

#0E573F

Dark Purple

#421B67

Light Purple

#87378E

Pink

#C01B83

Teal

#009AB1

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.