Color

Colour provides meaning and expression, and adds to a recognisable appearance. On a functional level, it’s there to support you by providing sufficient colour contrast or as an extra indication of (interactive) states.

Primary

Our primary palette consists of various shades of blue, composed to work for digital products and provide sufficient contrast (based on the usage). Lighter shades are mostly used for background elements. When the colour provides good enough contrast, it’s mostly used for foreground purposes. This starts at the Primary 500 shade.

Dark Mode / Primary

#373d47

100

Used for backgrounds

#14438b

300

Used for backgrounds

#b3c7e9

500

Used for primary actions and links

#e4ecfa

800

Used for subtitles and non-primary actions

#f5f8fd

900

Used for primary text

Accent

As the name states, this colour is only used for accents and extra indications. Just like the KLM Blue colour, it should be used with care since it doesn’t provide a good enough colour contrast to be accessible. Therefore, do not apply it to text or as a background colour behind text.

Dark Mode / Accent

#d40504

500

Use for accents and visuals

Grey

Our neutral colours consist of grey values and are meant for backgrounds, borders, and texts. Neutral colours are calm, easy to observe and give room for other colours to highlight the right elements. As you may notice from the hexadecimal values, our grey palette is not 100% grey. It contains a light touch of blue that, in terms of hue, matches the primary palette.

Dark Mode / Grey

#181b26

100

Use only as background colour

#0c0e13

200

Use only as background colour

#373c47

300

Use only as background colour

#646774

500

Use only as background colour

#8c8f9b

700

Used for tertiary text and caption

#e9e9eb

900

Used for secondary text

Blue

Used across information states.

Dark Mode / Blue

#324464

100

Generally used across informative states, as a background color. NOT similar to our Primary colors.

#80b0ff

300

Generally used across informative states, as a border color. NOT similar to our Primary colors.

#619bfb

500

Generally used across informative states, as a fill color for icons. NOT similar to our Primary colors.

#e0ecff

900

Used for informative states, as a text color on a Blue 100 background. NOT similar to our Primary colors.

Green

Used across success states.

Dark Mode / Green

#093c14

100

Generally used across success/ complete states, as a background colour

#6eb87e

300

Generally used across success/ complete states, as a border color

#1fc643

500

Generally used across success/ complete states, as a fill color for icons

#e8f8eb

900

Used for success/ complete states, as a text color on a Green 100 background

Red

Used across blocking or error states.

Dark Mode / Red

#421515

100

Generally used across blocking or error states, as a background color

#fd8282

300

Generally used across success/ complete states, as a border color

#ff5150

500

Generally used across blocking or error states, as a fill color for icons

#fee3e3

900

Used for blocking or error states, as text color on a Red 100 background

Yellow

Used across warning or incomplete states.

Dark Mode / Yellow

#483104

100

Generally used across warning, incomplete or pending states, as a border color. For other purposes: only use as a border or background color.

#ffd480

300

Generally used across warning, incomplete or pending states, as a border color. For other purposes: only use as a border or background color.

#ffa800

500

Generally used across warning, incomplete or pending states, as a fill color for icons

#ffe7b7

700

⚠️ Used for text on status label

#fff5e0

900

Used for warning, incomplete or pending states, as a text color on a Yellow 100 background

Neutral

Our neutral palette only contain black and white. For our dark theme the 100 and 900 colours are inverted compared to the original theme. However, in some situations it should stay white no matter the theme. For those cases the Neutral 0 is available.

Dark Mode / Neutral

#ffffff

This colour remains white whether in light or dark mode

#242731

100

White

#ffffff

900

Black

State colours

States communicate the status of a component, for example when pressing or clicking an interactive component. To visually indicate this state we use opacity styles as an overlay, on top of the default component colour.

Container/ component background colour

Opacity style as a state overlay

Component content

Opacity states come in different values and colours, which are applied to our components. The values are based on the type of state. The colours are based on the component colour or surface colour. These opacity states our part of our Base Colours library.

Dark Mode / Opacity / Primary

rgba(245,248,253,0.08)

Use for hover states on white surface

rgba(245,248,253,0.16)

Use for active states on white surface

Dark Mode / Opacity / Black

rgba(255,255,255,0.04)

Use for hover states on white surface

rgba(245,248,253,0.08)

Use for active states on white surface

rgba(245,248,253,0.16)

Use for hover states on colour surface

rgba(245,248,253,0.24)

Use for active states on colour surface

Dark Mode / Opacity / White

rgba(0,0,0,0.16)

Use for hover states on colour surface

rgba(0,0,0,0.24)

Use for active states on colour surface