Argos colours

Colour palettes

Argos’ selection of colours are divided into distinct palettes. The available palettes are Brand, Interaction, Semantic and Monochrome.

Brand palettes

The brand palettes feature the core colours of the brand. They should be used in combination when designing Argos experiences.

Primary brand palette

The primary brand palette contains a variety of colours that should be used first when designing Argos experiences. These colours help every interaction feel on-brand and informative.

Secondary brand palette

The secondary brand palette contains colours that are associated with Argos by users. Use these distinctive colours in combination with the primary and tertiary brand palettes.

Tertiary brand palette

The tertiary brand palette is used sparingly to accent and identify important elements in the UI, such as buttons. When used with the primary palette, these colours help create heirachy in Argos experiences.

Interaction palettes

The following colour palettes represent how the brand colours are used in interaction states.

Primary interaction palette

Secondary interaction palette

Monochrome palette

The monochrome palette is a group of colours that can provide text contrast and neutrality to designs.

Semantic palette

The semantic palette is a shared group of colours that help communicate key messages like errors, warnings, successes and understanding next steps. The consistent use of semantic colours keeps cognitive load low and makes for a unified and engaging user experience across our brands.

Error

Info

Success

Warning

Colour accessibility

To comply with the Web Content Accessibility Guidelines AA standard contrast ratios, choose colours from the Argos palette that have sufficient color contrast between them so that people with low vision can see and use our products.

Primary palette accessibility

When using Red Base (#D42114), Green Base (#008542) or Blue Base (#0C509F) as a background colour, only use Monochrome White (#FFFFFF) for text.

When using Yellow Base (#EFC71D) as a background colour, only use Monochrome Black (#000000), Monochrome Darker (#262626) or Monochrome Dark (#404040) for text.

When using Red Base (#D42114), Green Base (#008542) or Blue Base (#0C509F) as a text colour on a monochrome background, only use Monochrome White (#FFFFFF) or Monochrome Lighter (#F2F2F2) as a background colour.

When using Red Base (#D42114), Green Base (#008542) or Blue Base (#0C509F) as a text colour on a coloured background, use the Light extended colour of the base colour for the background colour.

Further reading

• Accessibility guidance
• WCAG 2.2 colour contrast guidelines

Was this page helpful?