We're currently working on the future of the Design system at Co-op

We'll start talking about this publicly as soon as we can. In the meantime this site will remain up to date with our current design patterns.

Links live

A link should be descriptive of the place it’s taking the user. For example: “Start making your will”.




<p><a href="#">Start making your will</a></p>


Design and content

A link should always be displayed as above unless it’s used on a background colour, in which case is can be black or white.

Links that are in context, for example within a header or footer — can be styled differently.

Links should:

  • be colour contrast checked.
  • be underlined regardless of what colour they are.
  • use the hand/pointer to indicate that the link is clickable.


Link text can be read out of context and should always tell the user where it’s taking them — never use ‘click here’. Find out how we write link text.

Find out how we write link text.

For more information see our general guide on accessibility.

Suggest a pattern or change

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change