Colour

Establish brand, intuitive guidance, create emotion.

Overview

Our colour system comprises of three palettes; Primary, Secondary and Tertiary (functional). 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

Using these weights from our brand font family provides visual contrast as well as consistency.

Primary colours

Abeille Assurances Yellow is a consistent presence in every brand communication, providing a feeling of optimism and immediate visual signifier of our brand.

Abeille Assurances Yellow

#FFD900

Abeille Assurances' primary colour should be used sparingly to denote its importance.

White

#FFFFFF

White is your best friend.

Secondary colours

The secondary colours help promote a confident, trustworthy and optimistic feel. They also provide flexibility across different communications, channels, audiences and territories.

Dark Teal

#005A6C

Warm Grey

#5C596D

Used for H1, H2, H3 and H4.

Bottle Green

#002F14

Abeille Assurances Blue

#004FB6

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

Plum

#4E1758

Dark Grey

#444444

Used for bold copy.

Defining Grey

#CCCCCC

Used for keylines and separating content.

Tertiary colours

The tertiary palette is for exclusive use across the digital estate where signposting or actions are required.

Positive Green

#3E812C

Used to affirm or reinforce a positive action.

Warning Orange

#FFA000

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

Error Red

#B10101

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

Guide Blue

#44C0FF

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

Light Grey

#F9F9F9

Used for background of modules.

Base Grey

#EEEEEE

Used for background of modules.

Base Blue

#E5EDF8

Used for background of modules.

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 primary palette as a base.
Add functional palette - these should dictate themselves, ie. links are blue, selected elements are green.
Finally add colours from the secondary 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.

Primary colours

Abeille Assurances Yellow

Light: #FFE340
Main: #FFD900
Dark: #FFC100

Secondary colours

Dark Teal

Light: #408291
Main: #005A6C
Dark: #00475A

Warm Grey

Light: #858392
Main: #5C596D
Dark: #4B485B

Bottle Green

Light: #40634F
Main: #0E573F
Dark: #001D0B

Abeille Assurances Blue

Light: #407BC9
Main: #004FB6
Dark: #00359D

Plum

Light: #7B5182
Main: #4E1758
Dark: #340D3D

Dark Grey

Light: #737373
Main: #444444
Dark: #2D2D2D

Tertiary colours

Light Grey

Light: #FBFBFB
Main: #F9F9F9
Dark: #F7F7F7

Base Grey

Light: #F3F3F3
Main: #EEEEEE
Dark: #E6E6E6

Base Blue

Light: #ECF2FA
Main: #E5EDF8
Dark: #D9E5F6

Generating shades for accent colours

The following methods would be used to get 25% lighter and 25% darker shades of any Abeille Assurances accent colour.

Lighter

Change the opacity of the colour to 75% on a white background.

Darker

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.