Colours

Using colour within a Standard Toolkit application

Colours

A consistent and well-named colour system provides a strong basis for all Royal Navy Design System applications. We have provided several base colours and modifier shades that allow you to design and build a variety of User Interfaces (UIs) whilst maintaining consistency across the platform.

Default Colour Palette

Out-of-the-box Royal Navy Design System provides five base colours. We use functional names for colours, rather than their literal colour names (e.g. red or blue). This allows us to provide multiple different colour schemes for a variety of scenarios, whilst keeping them semantically correct.

Neutral

Neutral shades provide the base of Royal Navy Design System applications. They should be used to build UIs and mostly mostly serve as background, text colour, and border shades for the components. The majority of colours for an application will be from the Neutral Palette.

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

The Action shades are mostly used to indicate the main action of a component. By default, use the Action shades instead of the named state colours (Success, Warning, or Danger) for the majority of actions.

Another use for the Action palette is for the components that need to stand out from their neutral background palette. Styling an Alert component with the Action palette will get the user’s attention but it will not have any of the associated connotations that the Success/Warning/Danger has.

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

State Colours

State colours are used to improve the semantics of particular Actions. These palettes should be used sparingly, as they capture the user's attention.

Success

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

Warning

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

Danger

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

Supplementary colours

As the name describes, Supplementary colours are there to supplement the main colour palette. They can be used for categories and data visualation for example, but don't have any state associated with them.

Sup A

900#343160
800#3b3985
700#4248b6
600#4e5cd3
500#5b73e6
400#7392f3
300#99b7f9
200#bbd5fe
100#deebff
000#e8f2ff

Sup B

900#3b2d6e
800#4b358f
700#603fb8
600#744fd0
500#936fe8
400#ad89f1
300#d0b5f9
200#e5d3fd
100#f2e9ff
000#f9f3ff

Sup C

900#6c2d6e
800#8c358f
700#b43fb8
600#cc4fd0
500#e46fe8
400#ee89f1
300#f7b5f9
200#fcd3fd
100#fee9ff
000#fff3ff

Sup D

900#702232
800#972b41
700#c43854
600#d84b67
500#f35d7b
400#f77f97
300#ffa2b5
200#ffcce5
100#ffe1f0
000#ffeef6

Sup E

900#853a0c
800#9d4712
700#c25c1d
600#e0712c
500#f48b49
400#fca975
300#fecaa9
200#fee2d1
100#fef2ea
000#fff8f3

Sup F

900#1f4a35
800#245c40
700#297a4f
600#31975e
500#3fb26d
400#5dcd86
300#8fe2ab
200#bff4cf
100#dfffe9
000#eefff2

Using Colours

To reference colours and their shades, we have provided a color() function. This function takes two values, color and shade.

color: color("neutral", "500");
border: 1px solid color("danger", "300");
// Result
color: #627d98;
border: 1px solid #f36968;