Colours

For your everyday use we chose a selection of functional colour tokens. They should be sufficient for most cases in your daily work. Detailed instructions on how to colour specific elements can be found below. Under Colour Scales for Advanced Use, you will learn how to use SDX colours beyond the default settings.

How to colour

Surfaces

Surface colours form the foundation of every layout. They define the background layer of your UI and help establish visual hierarchy across your product.

You have three standard surfaces at your disposal: white as the default, plus two grey values to layer depth into your designs. For more immersive moments, the inverse surfaces flip the palette into dark territory. And when you want to draw attention or add some character, the gradient options give you the tools to make key surfaces stand out.

See background guidelines on a detailed view on how to colour your surfaces.

 

---

 

Interactions

With our interaction blue, we communicate what's clickable, what's active, and what's not - giving users clear visual feedback as they navigate our products.

 

---

 

Borders and dividers

Border colours define edges, separate content, and give form to interactive elements. They should function as your quiet structural layer that holds your layouts together.

Two neutral greys handle the bulk of the work, drawing clear lines between elements and shape forms without drawing too much attention. For interactive elements, a deeper shade steps in, providing enough contrast against the surface to make the element's state immediately legible.

 

---

 

Text and icons

The text and icon colours are in synch so that they can be added as a combination at any time. Navy leads as the primary colour for headings, giving titles their weight and presence. Dark grey takes over for body content, keeping long-form text comfortable to read.

From there, the scale steps down: muted for secondary information, inactive for anything unavailable. And for text or icons sitting on emphasised or coloured surfaces, the onEmphasis variant ensures legibility is never compromised.

 

---

 

Notifications and states

For notifications, we have a very fixed set of colours to maintain accessibility in all cases.
The provided colours should only be used in the given token range. See the notification guidelines for a deeper view into how and when to use them.

• Accessibility first: Always use the provided notification colours to maintain contrast ratios as defined in our accessibility standards (minimum AA level).
• Strict token assignment: The defined tokens must not be repurposed outside their designated notification use cases.
• Avoid blending or creating custom tints or shades of these colours for notifications.

Notfications in action

States

• If you need coloured text for state communication:
• Use green to represent positive states or success.
• Use orange to represent negative states or errors.
• Do not use blue or yellow for text states:
• Blue is reserved for interactive elements (links, buttons).
• Yellow is not accessible when used for standalone text.

 

---

 

Promotions

Colour your promotional elements according to the brand guidelines.
In the digital channels we use the following options from a very salesy and agressive “value” tone, to a more softer and premium feel.

Use the respective colour mixes as seen above: white text on all colour options except “onDark” and “salesFallback” (this one uses white text in offline media, but is not accessible like that digitally). For the latter two options we use navy-900.

 

Colour Cheatsheet

Here you will find a rough overview of the primarily used colours in the system and how you can ideally use them.