Colours

Secondary palette

Our secondary palette is used for text and designed to contrast with our primary and tertiary palettes.

Use:

• 'Navy', for heading text
• 'Black', for text on background colours where Text (#282828) does not have enough contrast
• 'Text', for headings and body text in Avenir
• 'Secondary text', for hints that appear under labels in forms

Use the offer reds where offers and discounts need to be highlighted.

Use:

• 'Offer red text', for content relating to price reductions or offers
• 'Offer red background', for squircles

Tertiary palette

Use mostly white and Co-op blue with accents of tertiary colour. We bring the warmth and depth to our identity with the tertiary palette, which features dark, light and tinted tones.

The tertiary colour palette helps us give personality to our products, but also serves a functional purpose in the way we design.

Use:

• white or a neutral colour tint when designing a large background area
• warm or cool colours to make a product seem more friendly
• muted colours to give a more functional feel
• tertiary colours to give emphasis to particular content areas
• give the impression of depth and layering — this can help structure content in a way that’s helpful to users
• evoke different moods and feelings, like calm or excitement
• create a greater sense of identity for a product or service

Do not:

• put a form on a brightly coloured background

Use dark tones only for text.

We currently have no digital usage guidelines or examples for dark tones. If you are considering using dark tones or have examples to share, contact the design team on our #experience-library-support Slack channel or email experiencelibrary@coop.co.uk.

Use light tones as backgrounds to highlight content in:

• sections of a page that contain editorial cards, feature cards or signpost navigation
• tags that highlight the section of the journey the user is in
• a background to a cut out image in signpost navigation

On light tones, use:

• 'Navy', 'Black', or 'Text', colours on light tones
• black link colour
• white primary buttons

Currently digital usage guidelines for light tones is limited. If you are considering using light tones or have examples to share, contact the design team on our #experience-library-support Slack channel or email experiencelibrary@coop.co.uk.

Use tints as backgrounds to highlight content in sections of a page that contain:

• editorial cards, feature cards or signpost navigation
• tags that highlight the section of the journey the user is in
• product features or secondary tasks

On tints, use:

• 'Navy', 'Black', or 'Text', colours on light tones
• black link colour
• primary and secondary green and blue buttons

Currently digital usage guidelines for tints is limited. If you are considering using tints or have examples to share, contact the design team on our #experience-library-support Slack channel or email experiencelibrary@coop.co.uk.

For most links, use the colours shown here.

If you’re using a link on a background colour, then the link text and underline must be black or white. This is to maintain the correct colour contrast.

Links inside an area of navigation, like the main header on a website, may also appear in a different colour (normally the same colour as the text). This is because these links are in context to something that a user can recognise as navigation.

Always apply the focus ring. The focus ring is used by keyboard users who do not have a cursor to tell them where they are on a page.

You should use the purple link focus colour. If the link is on a background colour where the purple would not meet colour contrast standards, change this to white or black.

Go to the design guidelines on links.

There are 4 buttons available, these are:

• green (used as primary and as the form submit button)
• white (can be used as primary when the button is on a coloured background)
• blue (used as primary if green is not appropriate, but not for the primary action on forms)
• grey (used as a secondary button)

Go to the design guidelines on buttons.

If the button is on a background colour, use white as the button colour.

Use 'Error red', for:

• borders around form elements and the form error message
• error red text for any content relating to the error
• the background for the background of the form error message

For an example of the error colours go to the form validation pattern.

The success and information colours are applied in the same way as the alert notification component.