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
Continuous improvement of web content
Choosing what to improve, organizing and preparing your team, research and prototyping, designing content, monitoring and measuring success
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 |
|---|---|---|
| The magic of using interactive questions | Blog post | This pattern is used to present people with a sequence of simple questions that leads to the specific answer they need to continue with or complete their task. |
| Maintaining and improving web content through its life cycle | Blog post | Small changes make a big difference to improve Canada.ca. Let’s continue the discussion on data to action. Here are 4 common issues and actions you can take. |
| The importance of working with call centres | Blog post | Using call center data can help you improve your web content and services with real people in mind. |
| Using data to make better content | Blog post | We wanted to share some of our most recent experiences with using data to make important content work better. |
| 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 |
| 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 |
- Date modified: