Colour

Primary Colour Palettes

Primary colour palettes are the main colours used on your application. These colours are used on all major components that make up your application including buttons, badges, progress indicators etc. You want the use of these colours to be consistent across your application. For example, all primary buttons in an application should use the same hue.

A primary colour palette typically includes 2-3 main colour swatches, with varying shades of these swatches (lighter and darker) to allow for flexibility when building your application. These additional shades can be created by changing the saturation level or brightness of the main colour swatch. See the Aurora Borealis section below for an example of a full colour palette.

For Government of Canada applications it is required that all colours meet the WCAG AA accessibility level for contrast, though AAA is ideal. You can use online contrast checkers to ensure that the colours you choose meet accessibility standards when combined with text.

Once chosen, you can apply your own colours simply by modifying the hex codes in your CSS for various elements.

Swatch Families

Swatch families consist of an array of colours that are used consistently within your particular application. Swatch families include a set of hues that work well together and that can be combined to create a full colour palette.These colours are used to add variety and visual appeal to the main components of your application.

To build a full colour palette, choose 2-3 colour swatches as your base. From there, these hues can be modified to provide lighter or darker shades, gradients, and other variants. Combined with standard alert colours, light and dark themes, and text colours, all of these hues create a full colour palette to be used in an application.

Below are some sample swatch families:

Aurora Borealis

The main colour swatches used for the Government of Canada's Open and Accessible Digital Workspace (GCTools).

#002D42
#137991
#6DD2DA
#15A3A6
#92CC6F

Canada.ca Theme

The official hues for Canada.ca web pages and other external-facing applications. Provides lots of neutrals, and a signature blue and red used for accents , headers and footers.

#333000
#26374A
#AF3C43
#F5F5F5
#FFFFFF

Thunder and Lightning

Optional swatch family. Neutrals with a signature yellow for a small pop of colour.

#002D42
#4D5D6C
#96A8B2
#CECECE
#FEC04F

Blue Complimentary

Optional swatch family that uses a complimentary colour scheme. Blue is used to convey trust, while orange and yellow provides a small splash of colour to applications.

#0D467D
#137991
#6DD2DA
#FF9F40
#FEC04F

Triad

Optional swatch family. A versatile set of colours that provides lots of options for a colourful but sophisticated application.

#7E0C33
#024571
#5DC1BE
#F6CF22
#EDDB7C

Green and Blue

Optional swatch family. A bright cool-toned colour palette that provides a fresh look for web applications.

#0278A4
#4E4741
#83C3F2
#C9DF61
#C1D699

Secondary or Complementary swatches

Secondary colour swatches are completely optional and may provide designers with additional colours to play with on an application. These secondary swatches are often used in small quantities to draw attention to key pieces on web pages and for visual diversity and aesthetic purposes.

These colours should only be applied to visual elements that enhance the appearance of the page. They should never be used on elements which communicate information visually, either for task completion or the structure of the page.

If you choose to include secondary colour swatches to your application, here are some places where you can use these additional colours:

  • Logos or Icons
  • Images
  • Graphics
  • Other elements used for visual enhancements

Basic Interface Colours

Black Text

Text in this design system is displayed in an off-black colour. Black text can be used on any light background (see: Light Theme) or any button or element that uses a light colour. When adding text to any background that is not black it is essential to check the contrast for accessibility. Significant contrast between the background/element colour and the text ensures readability, even for those with visual impairments such as colour blindness.

Please see Typography for more information about using text colour.

#252525



White Text

Light text in this design system is displayed in an off-white colour. White text can be used on any dark background (see: Dark Theme) or any button or element that uses a dark or light colour.

When adding white text it is essential to check the contrast for accessibility. Significant contrast between the background/element colour and the text ensures readability, even for those with visual impairments such as colour blindness.

Please see Typography for more information about using text colour.

#FFFFFF



Muted Text

Muted text is used for secondary text elements such as captions, placeholder text and timestamps. This muted text colour only works on light backgrounds (see: Light Theme) or light-coloured elements. For dark backgrounds or bright/dark elements, use white text.

Please see Typography for more information about using text colour.

#666666



Light Theme

By default, most applications will follow the light theme. This theme includes various shades of white for different background/foreground levels. For the majority of applications #FAFAFA is a good shade to use as a background colour, with white (#FFFFFF) as the container or card colour.

#CCCCCC
#F5F5F5
#FAFAFA
#FFFFFF



Dark Theme

Some applications may wish to also incorporate a dark theme. This theme includes various shades of black and grey for different background/foreground levels.

#000000
#212121
#303030
#424242



Error Colours

Error colours are used to indicate system failures and malfunctions.You should use colours users associate with the level of severity. Do not reuse the specific shade for error colours anywhere else on the application.

#923534
#D3080C
#F3E9E8



Warning Colours

Warning colours are used for notices that require the user’s acknowledgement.

#66512C
#FF9900
#F9F4D4



Success Colours

Success colours are used when confirming that the user’s input was successful.

#2B542C
#278400
#D8EECA



Info Colours

Info colours are used when providing additional information and notes to the user.

#245269
#269ABC
#D7FAFF



Colours Used in Aurora

Elements in this system use a clean and colourful swatch family that communicates the brand and the values of the Open and Accessible Digital Workspace.

Our colour swatches include a mix of blue and green hues that communicate trust but adds a colourful pop to our collaboration and productivity applications.

The primary swatch family used in this system is titled Aurora Borealis and uses the following hex codes:

#002D42
#137991
#6DD2DA
#15A3A6
#92CC6F

Full Palette

Using the above swatches, Aurora Borealis was developed into a full colour palette to use in applications. This palette includes a lighter variants of the base hue, darker variants, and gradient samples. Below are also some examples of palette variations being used on an application header.

#002D42
#175573
#4285A6
#82BDD9
#CCEFFF
#F3F8FA
#137991
#3993A8
#6BB2C2
#8ECDDB
#B5E7F2
#F7FEFF
#6DD2DA
#87DAE0
#A1E1E6
#B2E9ED
#C2EFF2
#F7FEFF
#15A3A6
#41BCBF
#77D6D9
#B6F0F2
#E6FEFF
#F7FFFF
#92CC6F
#9FD47F
#B2DB99
#C7E3B5
#DFEDD5
#FAFFF7

Gradient Examples





CSS
Gradient 1
background: rgb(11,65,77);
background: linear-gradient(76deg, rgba(11,65,77,1) 2%, rgba(19,121,145,1) 40%, rgba(247,254,255,1) 100%);

Gradient 2
background: rgb(19,121,145);
background: linear-gradient(90deg, rgba(19,121,145,1) 0%, rgba(21,163,166,1) 55%, rgba(109,210,218,1) 100%);

Gradient 3
background: rgb(0,166,154);
background: linear-gradient(90deg, rgba(0,166,154,1) 0%, rgba(105,217,163,1) 100%);

Gradient 4
background: rgb(19,121,145);
background: linear-gradient(90deg, rgba(19,121,145,1) 0%, rgba(21,163,166,1) 40%, rgba(146,204,111,1) 100%);

Creative Accent Colours

Since the Open and Accessible Digital Workspace is a full suite of tools, multiple secondary swatches may be used across the workspace to add visual diversity to particular applications. Within our team, we have an unwritten rule that the lead designer on each application is responsible for choosing one accent hue that can be used for fun visual elements within that application.

This accent colour is used for aesthetic elements only, and major UI elements still follow the Aurora Borealis swatch family.