Colour

Colour tokens help maintain consistent use of colour throughout your app. Placer Toolkit provides palettes for theme colours and primitives that you can use as a foundation for your design system.

Colour tokens are referenced using the --pc-color-{name}-{n} CSS custom property, where {name} is the name of the palette and {n} is the numeric value of the desired swatch.

Theme tokens

Theme tokens give you a semantic way to reference colours in your app. The primary palette is typically based on an accent colour, whereas the success, neutral, warning and danger palettes are used to visualise actions that correspond to their respective meanings.

Colour primitives

Additional palettes are provided in the form of colour primitives. Use these when you need arbitrary colours that don’t have semantic meaning.