Colour

Placer Toolkit’s colour system is made up of CSS custom properties to help with consistent colour usage throughout your project.

Colours are organised in three main categories:

• Colour scales that give you a full spectrum of hues to work with.
• Foundational colours that lay the groundwork for your theme.
• Semantic colours that draw attention and convey meaning.

Colour scales are determined by your colour palette and are made up of the lowest level colour tokens in your theme. Each token is identified by a name, like red and blue, and numerical tint based on the colour’s lightness. On this scale, 95 is close to pure white and 05 is close to pure black.

You can use these tints to ensure accessible colour contrast per WCAG 2.2 success criteria:

• A difference of 40 ensures a minimum 3∶1 contrast ratio, suitable for large text and icons (AA)
• A difference of 50 ensures a minimum 4,5∶1 contrast ratio, suitable for normal text (AA) and large text (AAA)
• A difference of 60 ensures a minimum 7∶1 contrast ratio, suitable for all text (AAA)

The default palette defines 10 hues each with a scale of 11 tints using the format --pc-color-{hue}-{tint}.

Any hue can be mapped to neutral, primary, success, warning and danger scales. Like the tokens in the colour scale, each token is identified by its semantic group and a numerical tint using the format --pc-color-{group}-{tint}.

Foundational colours lay the groundwork for the content and structure of your project. These colours are named according to their role in your theme.

Surfaces are background layers that other content rests on. Surface colours convey visual hierarchy through a sense of elevation. For example, --pc-color-surface-raised appears closest to the user and is used for elements like dialogs and popup menus, while --pc-color-surface-lowered appears farther away and is used for passive containers such as inset sections or grouped form areas.

Text colours are used for standard text. We recommend a minimum 4,5∶1 contrast ratio between text and surface colours.

Overlays provide a backdrop to isolate content, often allowing background context to show through.

Placer Toolkit uses a single colour for all shadows. This is used alongside other shadow tokens to construct your theme’s shadows.

Placer Toolkit uses a single focus colour for predictable keyboard navigation. This is used along other focus tokens to construct --pc-focus-ring. We recommend a minimum 3∶1 contrast ratio against surface and background colours wherever possible.

Placer Toolkit leverages color-mix() to achieve consistent hover and active states across components without the need for untold numbers of handpicked colours. Through color-mix(), these custom properties contextually generate hover and active colours based on the colour of the component.

Semantic colours reinforce a specific message, intended use or expected results through familiar and meaningful hues. Each colour is identified by its semantic group, role and attention using the --pc-color-{group}-{role}-{attention} format. There are five groups of semantic colours:

• Primary to emphasise your accent colour.
• Success for validity or confirmation.
• Neutral for ordinary or inactive content.
• Warning for caution or uncertainty.
• Danger for errors or risk.

Each group defines colours for specific roles so that colours can be easily assembled with predictable results and readable contrast. There are three roles:

• Fill for background colours or areas larger than a few pixels.
• Border for borders, dividers and other stroke‐width elements.
• On for content displayed on a fill, paired with the same attention.

Finally, each colour is named according to how much attention it draws. Here, we use noise as an analogy: A loud noise draws more attention than a quiet one. There are three levels of attention:

• Quiet draws the least attention.
• Normal draws some attention.
• Loud draws the most attention.