Using colour within a Standard Toolkit application
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.
blue). This allows us to provide multiple different colour schemes for a variety of scenarios, whilst keeping them semantically correct.
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.
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.
State colours are used to improve the semantics of particular Actions. These palettes should be used sparingly, as they capture the user's attention.
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.
To reference colours and their shades, we have provided a
color() function. This function takes two values,
color: color("neutral", "500"); border: 1px solid color("danger", "300"); // Result color: #627d98; border: 1px solid #f36968;