🎨 Colour

Colours are used to set a visual tone, communicate meaning, and create a cohesive experience between Nulogy products and the physical environment. We are committed to complying with WCAG AA contrast ratios.

View colours in Figma | View theme file

Text & Interactive Colours

These colours are used for text, links and other interactive elements.

Name: black

Hex: #011e38

Usage: The default text colour.

Name: blackBlue

Hex: #122b47

Name: darkBlue

Hex: #00438f

Name: blue

Hex: #216beb

Usage: The default link colour.

Name: lightBlue

Hex: #e1ebfa

UI & Background Colours

These colours are generally used to build out the backgrounds and layers in our user interfaces.

Name: darkGrey

Hex: #434d59

Name: midGrey

Hex: #6c7784

Name: grey

Hex: #c0c8d1

Name: lightGrey

Hex: #e4e7eb

Name: whiteGrey

Hex: #f0f2f5

Name: white

Hex: #ffffff

Contextual colours

For providing meaning. For accessibility reasons, make sure the colour is not the sole way of doing this.

Name: red

Hex: #cc1439

Usage: For dangerous and destructive actions

Name: lightRed

Hex: #fae6ea

Usage: Danger accent colour

Name: green

Hex: #008059

Usage: To communicate success

Name: lightGreen

Hex: #e9f7f2

Usage: Success accent colour

Name: yellow

Hex: #ffbb00

Usage: To warn about something non-destructive

Name: lightYellow

Hex: #fcf5e3

Usage: Warning accent colour

Categorical colours

These are used for charting and other data visualization. See Data Visualization for more information.

Name: aqua

Hex: #19c4e6

Name: purple

Hex: #8033cc

Name: pink

Hex: #e372d0

Name: turquoise

Hex: #55ddb0

Name: orange

Hex: #ee5513

Name: avocado

Hex: #d3d322