Colour Tokens

We use named colours (e.g. Neutral or Action) instead of colour literals (e.g. blue). Colour palettes represent functions, so that we can make interactions and contexts easy to distinguish.

1Base palettes

Our design system provides five core palettes and six supplementary palettes.

If using colour to convey information, you will need an accessible alternative.

According to the Colour Blindness Awareness Association, 1 in 12 men and 1 in 200 women are colourblind worldwide.

Neutral

Use the Neutral palette for application UI.

Neutral shades are the base for Royal Navy applications. Use this palette to build user interfaces (UIs) and most backgrounds, borders, text colour and shadows for components.

Action

Use the Action palette for primary actions.

Action shades indicate the primary action of a component or page, for example a Call To Action (CTA) button on a form.



Use the Action palette for components that need to stand out from the neutral background palette. 

Styling an Alert component with the Action palette gets the user’s attention but it will not have any of the associated connotations that the Success/Warning/Danger has.

Use the Action palette for focus and active states.

Show when for example a button or tab is active by using the Action palette to highlight these components.

2Call-out Palettes

Call-out colours are used to improve the semantics of particular Actions. Use these palettes sparingly as they capture the user’s attention.

We connect certain attention-grabbing colours to certain types of actions, so we can communicate types of actions through colours. For example, we represent Danger with red. Don’t overuse them, as this takes away the attention-grabbing potential.

Don’t stack Call-out colours.

It’s very confusing to, for example, put a Success text on a Danger background. It’s also likely to fail accessibility colour ratios.

Success

Use the Success palette for positive feedback.

Use the Success palette to confirm positive interactions.

By default, the Action palette will be the most appropriate colour choice. Only use it if there’s a clear need to affirm the action, for example to confirm a form is successfully submitted.

Warning

Use the Warning palette to indicate an action or message that may produce undesirable results.

Use the Warning palette to highlight potential problems to the user.

For example, use the Warning palette to highlight outliers when visualising data.

Don’t use the Warning palette for focus states.

Use the Action or Danger palette to highlight a focussed component.

Danger

Use the Danger palette for destructive actions.

Only use the Danger palette when the outcome may have negative effects, such as permanently deleting data.

Use the Danger palette to highlight error states that require the user’s attention.

Supplementary palettes

Use supplementary colours to support the main colour palettes only. They can be used for categorisation and data visualisation, but they don’t have any state associated with them.