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
Name | Value | Swatch |
---|---|---|
$nice-teal | #228096 | |
$nice-cream | #f7f4f1 | |
$nice-blue | #00436c | |
$white: | #fff | |
$black: | #000 | |
$nice-black | #0e0e0e |
Secondary palette
Name | Value | Swatch |
---|---|---|
$yellow | #ead054 |
Tertiary palette
Name | Value | Swatch |
---|---|---|
$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
Name | Value | Swatch |
---|---|---|
$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.
- If you work for NICE, ask us a question in our Teams channel
- If you work outside of NICE, you can get in touch with us via Github discussions