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.
Our primary colour palette establishes brand, usage for typography and user interface Framework elements.
Aviva's primary colour should be used sparingly to denote its importance.
White is your best friend.
Body Copy Grey
Used for bold copy.
Used for H1, H2, H3 & H4.
Used for keylines and separating content.
Used for background of modules.
Used as the form field fill.
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.
Used for actions and links, anything clickable should have an element of this blue.
Used to affirm or reinforce a positive action. Only AA compliant when type is over 18pt (or 16pt if bold).
Used to highlight user choices and guide the user. For example, focus states on fields and selected radio buttons.
Used for displaying errors or warnings that the user must take action on.
Used for displaying warnings that the user doesn't need to take immediate take action on.
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.
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.
Accent colour shades and how to create them
25% light and darker shades of our accents colours will be required for interaction states etc. The light and dark shades for all the accent colours have been calculated for you.
Generating shades for accent colours
The following methods would be used to get 25% lighter and 25% darker shades of any Aviva accent colour.
Change the opacity of the colour to 75% on a white background.
Duplicate layer, change opacity to multiply and reduce the percentage to 25%, then duplicate multiply layer again.
All shades should be generated using Sketch with a colour profile of sRGB IEC61966-2.1 and captured using the Sketch eyedropper.