Colours

Guidelines

Don’t decorate - Communicate!

At all times colours should be used as communicate and nudge the user towards certain actions. Using colour for the sake of decoration can cause hinder to the user achieving certain goals

Colours support inclusiveness

The use of colour enables users who do not speak one of our provided languages to understand certain actions within our application. When choosing colours take into consideration that they do not hinder users that are colour blind from achieving their goals.

Colours indicate hierarchy

Colours should help bring attention to the most important parts of the screen.

Colour palette

Our color palette is based on our core identity. Lighter variants of the Brand and Accent colours are calculated with increments of 20% opacity. For our Semantics and Neutrals lighter and darker variants of this colour are calculated using the Material Design's Color Tool.

Brand 🔥

Semantics

Neutrals

Accents

Colour combinations

Here will come some examples of some best and bad practices for using colours.

Accessibility

Here will come some examples of some best and bad practices regarding contrast ratios.

Resources

Here's how you can use these in a Sass file:

.element-one {
    color: theme-color(primary);
    border-color: theme-color-dark(primary);
    background-color: theme-color-light(primary);
}

.element-two {
    color: accent-color(light-blue, 400);
    border-color: accent-color(primary-blue, 300);
    background-color: accent-color(dark-blue, 200);
}

The theme color system is based on our Brand Guidelines, Material Design's color system and Daemonite Material's color palette. Make sure to also read Applying color to UI.