Canada.ca design system

Use this design system to provide a more usable, consistent and trustworthy online experience for people who access Government of Canada digital services.

Template and design pattern library

User-tested templates, page layouts, design patterns, guidelines, and code samples

Canada.ca Content Style guide

Writing principles and techniques to make content clear and accessible to all

Canada.ca Content and Information Architecture Specification

Who has to use the Canada.ca design system, mandatory elements, how to organize content and design principles

Designing content

How to design content for Canada.ca

Canada.ca blog

Evidence and insights on improving information and services on Canada.ca.

Latest changes to the Canada.ca design system

Latest changes to the design system, templates and patterns, style guide and other tools

Find guidance

Name Source Description
Silver linings from 2020 Blog post It almost feels like an understatement to say that 2020 has been a challenging year filled with a lot of change. Despite the challenges, there have been many silver linings.
Using interactive checklists to simplify eligibility criteria Blog post How interactive checklists can help people slow down and pay attention to eligibility criteria.
Choosing the right button for task success Blog post How using the right button style in the right situation can help people succeed better on your web page.
Increasing transparency on Canada.ca Blog post We launched a new transparency template in the GC Design System.
Using graphics to bridge language gaps Blog post The Northwest Territories (NWT) shared how they use illustrations to make COVID-19 web content and communications products more accessible to all their communities.
Collect feedback, find issues Blog post In May 2020, a few teams collaborated to launch a pilot study of a widget for getting people’s feedback on Canada.ca pages.
Labelling study: which words work best Blog post The public depends on us to choose the right words for the category and link labels to ensure that they can find answers quickly and easily on Canada.ca.
Using expand/collapse for making choices Blog post Using the expand/collapse design pattern to present a choice between mutually exclusive answers
How we identify top tasks for Canada.ca Blog post How we identiy top tasks to help prioritize work
How we're optimizing Canada.ca top tasks Blog post Optimization projects are a way to make meaningful improvements for Canadians.
Dates matter: Trust and older content on Canada.ca Blog post In a recent usability study, we saw people disregarding Canada.ca search results that seemed too old. Find out how you can validate your content and show that it's still current.
Optimize your content for voice search Blog post What we learned about improving voice services for Canadians
Finding the right method to measure online task success Blog post What we learned about exit surveys, usability testing and analytics funnels
Avoiding FAQs, with one exception Blog post Why FAQs are an ineffective content design choice most of the time, and when they can actually work
A case for descriptive link text Blog post Clear link text can help thousands more people get to the Canada.ca content they need quickly and easily.
Designing for accessibility during COVID-19 Blog post Designing digital government services with accessibility in mind is key to ensuring that everyone can get the services they need quickly and easily.
Institutions subject to the Canada.ca design system Designing content List of Government of Canada institutions subject to the Canada.ca design system
Theme and audience lead departments Designing content Departments responsible for the 15 themes and 3 audience pages on Canada.ca
Topic tree and content types Designing content Canada.ca taxonomies: theme and topic structure and content types
Canada.ca alerts and service disruptions Designing content These recommendations will help bring consistency to each department's communications on service disruptions during a crisis.
Adding structured data on Canada.ca pages Designing content How to add structured data to enhance search results
Who has to use this design system Content and Information Architecture Specification Which institutions must use the Canada.ca design system for their public-facing web presence
Mandatory elements Content and Information Architecture Specification What every institution must follow: colours, typography, header and footer, and mandatory templates
User navigation Content and Information Architecture Specification How people find tasks on Canada.ca
User-need categories for destination content Content and Information Architecture Specification How people find tasks on Canada.ca
URL model Content and Information Architecture Specification Canada.ca URL model
Design principles Content and Information Architecture Specification Design principles of Canada.ca
Crisis communications content design checklist Designing content Tips on how design content during a crisis
Contextual alerts Template and pattern library Alerts are notices for important new information that needs to appear on a page.
Checkboxes and radio buttons Template and pattern library Checkboxes and radio buttons are form controls. They help people select an answer to a question or confirm completion.
Theme and topic page Template and pattern library Theme and topic pages provide access to topics and destination pages that support task completion.
Institutional landing page Template and pattern library Use as the landing page for Government of Canada institutions and organizations
Act profile page Template and pattern library Gives a 1 or 2 sentence description of the act, allows people to read the legislation, and relates an act to topics, institutions, ministers and other legislation
Basic page layout Template and pattern library The basic layout for Canada.ca pages
Breadcrumb trail Template and pattern library Represents the location of the current page as it stands in relation to the site’s user navigation model
Buttons Template and pattern library Buttons are clickable objects intended to encourage a person to take action.
Campaign page Template and pattern library Gives information to support a promotional campaign - use to support institutional, theme or GC-wide promotional campaigns that last for a set period of time
Canada.ca domain Template and pattern library The primary domain for the Government of Canada's public-facing web presence.
Carousels Template and pattern library Use this component for situations such as image or video galleries.
Charts and graphs Template and pattern library Use as visualization techniques for communicating data or statistics
Colours Template and pattern library Colours for Canada.ca
Consultation profile page Template and pattern library Describes a consultation or engagement activity
Contact information Template and pattern library Use to present contact information on Canada.ca page
Contact us page Template and pattern library Provides models for contact options on Canada.ca - use to present contact information for a person, an office, an organization or an emergency
Context-specific features Template and pattern library Use to promote activities, initiatives, programs, and services
Contributors Template and pattern library Use to link to institutions or organizations that support the content on the page
Data tables Template and pattern library Use to communicate data
Date modified Template and pattern library Indicates how recently the content of a web page has been updated
Departments and agencies page Template and pattern library Provides links to all federal government institutions
Privacy disclaimer Template and pattern library Use this component to present privacy disclaimers.
Download links Template and pattern library Use to reference and link to non-HTML file
Expand/Collapse Template and pattern library The expand/collapse pattern (also known as accordion) allows content to be hidden until requested.
Faceted finder page Template and pattern library Use to present a list of 100+ related links that can be filtered - shows the number of results using facets
Finder page Template and pattern library Use to present a list of 100+ related links that can be filtered
Global header Template and pattern library The global (site-wide) header at the top of each web page
Government of Canada signature Template and pattern library The Government of Canada signature as specified in Federal Identity Program (FIP) policy instruments
Government-wide audience page Template and pattern library Gives access to information and services relevant to a government-wide audience
Guidance on legislation profile page Template and pattern library Gives access to guidance on legislation, details and related materials
Home page Template and pattern library Shows the Government of Canada’s most visited and important products and services
Icons Template and pattern library Use as symbols to communicate actions or states
Images Template and pattern library Use to complement or enhance text
In-page table of contents Template and pattern library List of links that lead to subsections of the same page
Institutional byline Template and pattern library Use to link to the institution responsible for the content
Institutional service performance reporting page Template and pattern library Use to present all service standards from an institution, as per the requirements in the Policy on Service
Interactive questions Template and pattern library Use to present a sequence of simple questions that leads to answer needed to continue or complete task
Language toggle link Template and pattern library Gives people access to site content in either French or English
Labels Template and pattern library Labels are visual indicators that assign a tag to items such as events, products, programs or services
Latest news link Template and pattern library Use to feature the most recent news items
Layouts Template and pattern library Layouts for Canada.ca
Long index page Template and pattern library Use to present a list of 50+ related links without descriptions
Ministerial profile page Template and pattern library Gives an overview of the biography and links to the minister’s recent activities and announcements, and social media channels
More information for Template and pattern library Use to connect to a related government-wide audience
Most requested Template and pattern library Use to feature top tasks related to the page it is on
Multimedia (video and audio) Template and pattern library Use to complement or enhance text
News landing page Template and pattern library Gives access to Government of Canada’s news products
News product page Template and pattern library Allows people to read a news product
News results page Template and pattern library Enables people to efficiently find a specific news product by quickly filtering results based on keywords and pre-set metadata fields
Ordered multi-page navigation Template and pattern library Set of links to a group of several pages intended to be read in a preferred order
Partnering and collaborative arrangement profile page Template and pattern library Gives an overview of the mandate and information and services of partnering or collaborative arrangement agreements
Program description page Template and pattern library Offers details about a program and gives access to services related to the program - use to give background information about a program
Promotional events page Template and pattern library Describes an official government event that occurs in a promotional context, gives information such as date, time, location and target audience
Promotional feature banner Template and pattern library Use to promote government-wide and institution-specific activities, initiatives, programs, and services
Regulation profile page Template and pattern library Gives a 1 or 2 sentence description of the regulation, allows people to read the regulation, and relates a regulation to topics, institutions, ministers and other legislation.
Related links Template and pattern library A list of links to content that is related to the page
Report a problem Template and pattern library Allows people to provide feedback via a form for any problems that may have happened
Search page Template and pattern library Provides the template for the search engine on Canada.ca
Service initiation page Template and pattern library Gives people the information they need before starting the task, such as explaining eligibility criteria or steps to follow
Services and information Template and pattern library Use to present sets of links with accompanying descriptions
Share this page Template and pattern library Allows people to share the content of the page to other users
Short index page Template and pattern library Use to present a list of 10 to 50 related links without text descriptions
Site footer Template and pattern library The global (site-wide) footer at the bottom of each web page
Site search box Template and pattern library Gives the ability to search all content from the Government of Canada
Social media channels block (follow box) Template and pattern library Use to allow people to follow official Government of Canada social media accounts from various social media platforms
Social media feeds widget Template and pattern library Use to embed the latest posts from official Government of Canada social media accounts
Tabbed interface Template and pattern library Separates related content into different panes that are viewable one at a time
Subway navigation Template and pattern library Break up long and complex content into sections that each focus on a step or specific answer people need before moving to the next step or section.
Theme and topic menu Template and pattern library Use on all Canada.ca web page as the main theme-based navigation
Transparency and corporate reporting Template and pattern library A corporate reporting page provides proactive disclosure of information offered by that institution.
Typography Template and pattern library Typography and fonts for Canada.ca
What we are doing Template and pattern library Use to link to content that provides background or explanations of GC activities in support of creating or improving public policy
Writing principles for web content Content Style Guide Writing principles that reflect how people read and use web content
Plain language Content Style Guide Use plain language to makes information readable and understandable for everyone.
Writing tone Content Style Guide Guidelines on the right tone to use when designing content for Canada.ca
Writing style Content Style Guide Detailed rules on the formatting and style to use on Canada.ca
Capitalization and punctuation Content Style Guide Use these styles for capitalization and punctuation of content in text, links and applications.
Underlining, bold and italics Content Style Guide When to use underline, bold and italics on Canada.ca
Symbols Content Style Guide When to use symbols such as & and % on Canada.ca
Abbreviations and acronyms Content Style Guide Don't use an abbreviation or acronym unless it's better known to the widest audience than its long-form equivalent
Contractions Content Style Guide Use contractions that people use when they speak.
Numbers Content Style Guide How to write numbers on Canada.ca
Dates Content Style Guide How to write dates on Canada.ca
Times Content Style Guide How to write times on Canada.ca
Phone numbers Content Style Guide How to write phone numbers on Canada.ca
Addresses Content Style Guide How to write addresses on Canada.ca
Words and expressions in transition Content Style Guide Special rules for Words and expressions commonly written in 2 or more different ways (like webpage and web page)
Content structure Content Style Guide How to organize the structure and layout of content components to help people find what they need quickly
Page titles and headings Content Style Guide Write titles and headings that are meaningful and help people scan the page
Lists Content Style Guide How to write lists that help people scan
Tables Content Style Guide How to design tables to organize data
Images and videos Content Style Guide How to use images and videos in your content
Links Content Style Guide How to use links on Canada.ca
Report a problem or mistake on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, contact us.

Date modified: