Version
has been released! Read the upgrade guide

Colour Tokens

Brand new guidance

We strongly encourage our community to follow this guidance. It’s not mandatory yet, but it will become part of the MOD Service Assessments in due time. Questions? Contact your friendly MOD Design System team: design-system@digital.mod.uk.

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 MOD.UK applications. Use this palette to build user interfaces (UIs) and most backgrounds, borders, text colour and shadows for components.

900#0a141b
800#0c1720
700#12202b
600#1c2d39
500#233745
400#3e5667
300#748999
200#b8c7d2
100#e2e9ee
000#f8fafc
Black#0a141b
White#FFFFFF

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.

900#253b5b
800#274776
700#2661a7
600#2a77c7
500#3a8fdd
400#58aae9
300#85c6f2
200#b7dff7
100#ddf4ff
000#ecf8ff

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.

900#3b612c
800#3b6f33
700#479442
600#60b255
500#76c767
400#8fd57f
300#abe39b
200#c6f3b5
100#e5ffd9
000#f4ffef

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.

900#693a12
800#8c4f17
700#ae6d1d
600#cf9328
500#e8c242
400#f5db54
300#faed7e
200#fefbb8
100#fffddc
000#ffffee

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.

900#841c1b
800#b22820
700#d53229
600#ec4138
500#f45249
400#fc7c75
300#fea9a9
200#fed1d1
100#feeaec
000#fff3f4

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.

900#343160
800#3b3985
700#4248b6
600#4e5cd3
500#5b73e6
400#7392f3
300#99b7f9
200#bbd5fe
100#deebff
000#e8f2ff
900#3b2d6e
800#4b358f
700#603fb8
600#744fd0
500#936fe8
400#ad89f1
300#d0b5f9
200#e5d3fd
100#f2e9ff
000#f9f3ff
900#6c2d6e
800#8c358f
700#b43fb8
600#cc4fd0
500#e46fe8
400#ee89f1
300#f7b5f9
200#fcd3fd
100#fee9ff
000#fff3ff
900#702232
800#972b41
700#c43854
600#d84b67
500#f35d7b
400#f77f97
300#ffa2b5
200#ffcce5
100#ffe1f0
000#ffeef6
900#853a0c
800#9d4712
700#c25c1d
600#e0712c
500#f48b49
400#fca975
300#fecaa9
200#fee2d1
100#fef2ea
000#fff8f3
900#1f4a35
800#245c40
700#297a4f
600#31975e
500#3fb26d
400#5dcd86
300#8fe2ab
200#bff4cf
100#dfffe9
000#eefff2

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright