Skip to content
ShannonTucker edited this page Jan 26, 2022 · 3 revisions

Colour - Current

4A - Alter & Augment

We imported the Core GC Design Library colours into the Extended GC Design Library - DECD, then altered them by replacing the "functional names" with generic colour names. We also augmented the existing colours by including new shades. The full list of colours were grouped under multi- vs specific-use scenarios, which provides flexibility to future product designers.

Research Doc - Colour

Usage

Start by checking out the Canada.ca design system guidance on using colours. There are two colour palettes in the Extended GC Design Library - DECD: a multi-use colour palette and specific-use only colour palette. Multi-use colours can be used for components or styles that have flexible colour guidelines (e.g., a background colour). Specific-use only colours can only be used in the component highlighted in the colour mapping below (e.g., red 50 can only be used for a danger button in its default state).

Details

The full colours list can be found in the DECD Design System Extended Figma Library

Below is a mapping of the new generic colour names that are used in the Extended GC Design Library - DECD to the functional names in the Core GC Design Library. For specific-use only colours the Design system core name (third label for each colour) in the mapping is the use case for each colour.

Colour mapping anatomy Colour mapping