Colours

We have a built-in library of colours available.

Usage

Use CSS variables to access these colours - don’t use HEX codes directly:

.my-custom-button {
	background-color: var(--orange-dark);
	color: var(--white);
}

Default colours come in 7 variants per colour:

grey

grey-lightest

grey-lighter

grey-light

grey-dark

grey-darker

grey-darkest

blue

blue-lightest

blue-lighter

blue-light

blue-dark

blue-darker

blue-darkest

green

green-lightest

green-lighter

green-light

green-dark

green-darker

green-darkest

red

red-lightest

red-lighter

red-light

red-dark

red-darker

red-darkest

orange

orange-lightest

orange-lighter

orange-light

orange-dark

orange-darker

orange-darkest

In addition, we have a few CSS variables defined for default colors:

bg-color

black

white