NICE Design System home

Colour

We use design tokens to organise our colours.

What are design tokens?

In short, design tokens are variable names for colours. They allow us to make sure that:

  • colours are used consistently
  • the palette doesn't grow arbitrarily
  • design changes can be implemented without causing random knock-on effects

Here's a useful video that goes into more detail about why tokens are a good idea.

How are the tokens organised?

There are two types of token:

  • Global tokens, which specify the colours themselves. The global tokens include our corporate palette and other complementary colours.
  • Alias tokens, which give semantic meaning to the global tokens.

In code, you should always use alias tokens.

Global tokens

Primary palette

NameValueSwatch
$nice-teal#228096
$nice-cream#f7f4f1
$nice-blue#00436c
$white:#fff
$black:#000
$nice-black#0e0e0e

Secondary palette

NameValueSwatch
$yellow#ead054

Tertiary palette

NameValueSwatch
$nice-teal-tint-1#59a0b0
$nice-teal-tint-2#91c0cb
$nice-teal-tint-3#c8e0e6
$nice-blue-tint-1#407291
$nice-blue-tint-2#80a1b5
$nice-blue-tint-3#bfd0da
$nice-blue-tint-4#023452
$nice-cream-1#ded5ca
$nice-cream-2#e6e0d7
$nice-cream-3#eeeae4
$nice-cream-tint-1#fbfaf8
$black-tint-1#404040
$black-tint-2#808080
$black-tint-3#bfbfbf

Custom palette

NameValueSwatch
$custom-grey-1#adadad
$custom-grey-2#d6d6d6
$custom-grey-3#666
$custom-grey-4#e9e9e9
$custom-blue-1#005ea5
$custom-blue-2#003761
$custom-blue-3#3479d0
$custom-blue-3-tint#eff4fc
$custom-purple-1#4c2c92
$custom-red-1#b50f23
$custom-red-1-tint#f9eced
$custom-orange-1#dc8a07
$custom-orange-1-tint#fbf7f1
$custom-orange-2#bd5826
$custom-green-1#68c103
$custom-green-1-tint#f3faeb
$custom-yellow-shade#d6ba32
$custom-yellow-highlight#fff999
$custom-teal#0092a6
$custom-pink#d5367f

Alias tokens

Alias tokens are too numerous to document here; instead, try looking at the alias token SCSS file.

The idea is to tie a global token to a particular semantic meaning. For example, the default text colour is given the alias token of $text, which in turn is assigned the global token of $nice-black.

This isn't the only place that $nice-black is referenced; for example, it's also used in the $link-active alias token (i.e. the colour of active links) and the $btn-cta-text alias token (i.e. the text colour of CTA buttons).

This gives us two advantages:

  • We can update any element's colour (e.g. text, links, hero background etc.) and be confident that there won't be any horrible knock-on effects. For example, if we wanted text to be dark grey instead of black, we can update the text token without affecting other tokens that we want to remain black.
  • We can still change the underlying colour if we do want to make global changes. For example, if NICE black were to change from #0e0e0e to #0d0d0d, we can make that change in one place and have it cascade to all relevant alias tokens.

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you've got a question about the NICE Design System, contact the team.