The GC web design system contains design system elements and instructions on how to use them in web projects to build content for Canada.ca pages and websites.

Design system elements

The design system includes components, templates, and design basics.

• Components are standardized reusable ways of organizing and displaying content within web pages
• Templates define how to lay out content, components, images and other design elements on a page or in a set of related pages
• Design basics contain rules on typography, spacing, colour usage and other design foundations that are used across all web content

Sources for elements

The design system directs you to the several resources for component usage guidance.

GC core elements

GC core elements are used across departments on Government of Canada websites. GC core elements direct you to two different sources:

Canada.ca design system

The Canada.ca design system is maintained by TBS. It includes mandatory elements, including key templates and standard design elements.

Web experience toolkit (WET)

This guide recommends elements of Web Experience Toolkit that are the most relevant to CRA websites and are not currently included in the Canada.ca design system. For example, guidance on border styling. Developers and coders use on the Web Experience Toolkit for detailed guidance on coding for several elements of the GC core library. It is maintained by principal publisher at Service Canada.

CRA-specific elements

Elements created and tested at the CRA and used specifically for CRA web pages. Those elements are hosted in the user-centred design guide directly.

CRA variant elements

A variant of GC components that add additional guidance or detail on the use of those components for CRA content. Those elements are hosted in the user-centred design guide directly.

How the design system is managed

The CRA creates new design system elements to improve the usability of web content and to establish a consistent and standard approach. We create and test new components and templates as part of content optimization projects and other web content improvement projects. Once we have enough user research to demonstrate the effectiveness of an element, we write instructions and code for its use and contribute it to the Canada.ca design system when appropriate.