Summary

Guidance on the colour palette employed for the mygov.scot site.


Defining the mygov.scot palette

The palette we use is inspired by the Scottish flag, and conforms to the wider branding of the Scottish Government. Colours include shades of blue with white and a variety of greys providing a flexible range of colour combinations. Options are also included for notifications and validation including red, green and yellow.

Printable Palette

A printable version of the colour palette is also available here: Printable Palette

Design theory

When used appropriately colour will help users to process, understand and navigate sites and services. Consistency of application is essential to establishing patterns and will help to meet the Digital First Service Standard for ‘consistent user experience’.

We use colour to indicate positive action throughout our services, making items such as drop-down menus and start or next buttons solid blue in their default state to draw the eye of the user. We also indicate negative actions such as a cancel or delete buttons through a lack of solid colour to set them apart from positive actions and help users to select progressive options.

Usage

As a general rule, we use colour in the following ways:

  • blue – for links and positive actions
  • white (grey outline) – for negative and retroactive actions
  • dark grey – for text
  • light greys – for layout
  • light blues – for active/selected states and layout
  • red – for error
  • green – for messages of success or validation
  • yellow – for warning or notifications.

Accessibility

Colours should always be used to ensure maximum readability through adequate contrast between text and the background. The colours defined in our palette are either dark in tone and used in combination with white text or light in tone and used with dark grey text - by avoiding the use of mid-tone colours we ensure legibility throughout all areas of our sites and services.

When defining your own palettes and colour it is important to consider users who are colour blind and therefore combinations such as red/green and blue/yellow should be avoided as these can render content unreadable.