Canada.ca design system overview
On this page
Who has to use this design system
The Canada.ca Content and Information Architecture Specification is the design system for Canada.ca. It is referenced in the Directive on the Management of Communications. Its requirements apply to departments and other portions of the federal public administration listed in Schedules I, I.1 and II of the Financial Administration Act.
These organizations must apply Canada.ca design requirements for all their public-facing websites or digital services, regardless of the technology, domain name (both canada.ca and gc.ca) or publishing platform through which these are delivered.
The Canada.ca global header and footer design may not be applied or replicated in the following situations:
- internal-facing websites or digital services
- Government of Canada institutions that are not subject to the Directive on the Management of Communications
- enterprises and organizations that are not part of the Government of Canada
Using the Web Experience Toolkit
All institutions are encouraged to use the components in the Web Experience Toolkit for both their internal and external web products. These components are open source and free. They reflect the results of ongoing usability testing. They make it easier to meet accessibility requirements and provide responsive design for a variety of devices with a range of screen sizes.
Adapting the Web Experience Toolkit for out-of-scope situations
If you are out of scope for the Canada.ca design system, but wish to use the Web Experience Toolkit for your website or service, make the following minimum modifications.
- change the contents of the global navigation menu so that they are clearly different from the menu labels used on Canada.ca
- change the main colour used in the global navigation menu so that it is clearly contrasted from the main colour used in the global Canada.ca header
- change the links in the global footer so that they are clearly different from the links used in the footer navigation menu on Canada.ca
- change the background colour used in the global footer so that it is clearly contrasted from the background colour used in the footer navigation menu on Canada.ca
These modifications help users distinguish between different sites, and they ensure that the overall Canada.ca design remains unique.
Design principles behind Canada.ca
Canada.ca is based on the following principles.
Open, collaborative concept design
The rules and concepts presented in this design system have been developed in collaboration with Government of Canada Theme lead departments. Other departments and agencies have also provided input.
We are actively engaging with the community in several ways:
- a social media presence, through the use of #Canadadotca
- a blog that presents our work
- regular meetings with the Theme lead departments
- events and presentations for all departments and agencies
The rules and concepts presented here have been designed and revised based on evidence of people’s needs and their success on the site.
The Canada.ca IA, templates and patterns have been adjusted since 2013. This reflects the outcomes of user research and usability testing with thousands of Canadians. Usability tests have been performed in English and French, on mobile, tablet, and desktop environments, and with assistive technologies.
As new research and testing is undertaken and departments try new ideas, this design system will continue to be updated.
This system is a living and evolving toolbox. Its role is to help departments save time and money by using existing patterns and styles for their specific content. It provides a consistent framework for the Government of Canada web presence, while being flexible enough to allow innovative design solutions.
Canada.ca is based on user needs. It ensures that the most in-demand information and services are easy to find, understand and use.
Non-priority content must not interfere with someone’s ability to find what they are looking for. Content must be organized to present a government-wide perspective to users, wherever possible. For example, information from multiple departments on the same topic of public interest must be grouped together. When duplicated content is identified, it should be removed.
Canada.ca must provide current, relevant, accurate, unique and authentic information about the Government of Canada’s programs and services. This reduces confusion for people.
Content for which the Government of Canada is not clearly the authoritative source must not be published on Canada.ca. Instead, Canada.ca can refer to this content by providing links to an external source.
To ensure content is always current, it must be actively managed throughout its life cycle. This is required by the Government of Canada Information Management policy requirements.
People visit Canada.ca to complete a task. A task is something a person has set out to do. To accomplish a task, a person may need to read a web page or undertake a complex transaction online. All content supporting a task should be simple, consistent and predictable.
The Canada.ca design system provides people with consistent navigation, content labels, templates and patterns. Whether they enter Canada.ca pages directly through Internet search engines or by way of social media or direct traffic, consistency helps ensure users can find, begin, and complete the most in-demand tasks.
Optimized for mobile devices
Canadians are increasingly using mobile devices, including tablets and smart phones.
The existing Canada.ca design helps people easily find the same content on either their mobile or desktop environment. The design system, including Web Experience Toolkit (WET) templates and design components, have been tested and verified as mobile-friendly.
A separate mobile instance of the site is not needed.
To perform well on mobile devices, the IA is as simple and as flat as possible. In-page navigation is more effective than menus and page sizes must be limited. The content specifications and writing guidance take this mobile context into account. They also specify how to create content that will be easily downloaded on mobile devices. This allows people to access information quickly while on the go.
Integrated with search
The IA must be well integrated with the site’s search function. This integrated approach:
- provides people with the necessary navigation cues, when search doesn’t take them to the right place
- ensures filters are based on the underlying IA, such as the topic structure, to improve overall search precision and relevance
Report a problem or mistake on this page
- Date modified: