In September 2019, the Digital Transformation Office (DTO) and collaborators from across the Government of Canada came together to propel the vision of building a Government of Canada Design System into reality.

Talented people from across the Government of Canada, including the Aurora and Clone (Talent Cloud) design systems, the Canadian Digital Service, Digital Academy, the Web Experience Toolkit, Innovation, Science and Economic Development Canada, Canada Revenue Agency, Immigration, Refugees and Citizenship Canada, and National Defence participated in the day.

It was a fantastic example of collaboration as we worked to shape a vision for a unified design system. We discussed the principles we wanted to work toward including finding the balance between flexibility and consistency. We also looked at what would be needed to manage this idea long-term, and what technology questions might need to be addressed.

Everyone agreed that an overarching design system would make it easier for departments to build a modern digital presence that helps people get the information and services they need.

So what exactly is a design system anyway?

Design system defined

There are many definitions of a design system out there. Here’s our take on it:

A design system is a collection of flexible and reusable design and code elements, supported by research and clear guidelines. It gives teams the building blocks they need to design their online presence in a way that supports task success and trust among users.

In other words, a design system should make it easier and faster to design effective content within a coherent digital experience.

Design systems usually include:

  • a library of reusable design elements, along with the code to create them
  • best practices and guidance, based on evidence, for how to use those design elements
  • design principles
  • a writing style guide
  • guidance on branding

There are a lot of great examples to start from. Large Canadian companies like Shopify, as well as other governments like the UK and Australia, have launched successful design systems.

Why we need a Government of Canada design system

When people can easily predict how to navigate your online presence, readily understand how to interact with your content and confidently identify the source of that content, they are more successful completing tasks online.

A Government of Canada design system will support this predictability and brand recognition. The result? Millions of Canadians will complete online interactions with the government more successfully every day.

Build trust through a consistent experience

When using online services, people want to know who they’re dealing with. The Government of Canada, through the Federal Identity Program, has a very strong brand. It’s recognized the world over. Our web presence needs to take advantage of that strong brand to foster trust.

But a strong brand in the digital world is about more than logos and symbols. It needs to include an overall experience that’s consistent and integrated. That’s why the design system includes global styles for typography, colours and layouts, as well as a common header and footer.

Help build better, usable services faster

Why try to solve an issue that somebody else has already solved?

The design system will include a rich library of design and layout options. It will offer advice on best practices, instead of emphasizing “one-size-fits-all” templates and rules.

This will help you fast-track design decisions, building with elements that have already been proven to be effective. While this doesn’t eliminate the need to test what you build with your users, it means you’re starting from a solid foundation. You don’t need to spend time working out basic issues of visual style or accessibility compliance. Your valuable time can go to creating high quality content that helps people complete their tasks.

Enable continuous improvement through experimentation

While previous lessons learned and tested patterns are a great starting point, they should in no way be considered perfect and “final”. They need to evolve based on new evidence.

The design system will be community driven - drawing on the collective creativity and innovative ideas of colleagues across departments. Have an idea for a better way to display information in a table or create an interactive wizard? Our alpha environment will allow for prototyping and testing as well as community feedback and collaboration. Patterns that turn out to be effective at solving design issues will be added to the design system library for others to use.

This model will allow for faster, iterative updates, and will support ongoing improvement to service design.

Bringing the vision to reality

Momentum on the Government of Canada design system is building. Since September, we have continued to bring people, ideas and action together to drive progress.

The Design System Working Group meets every 2 weeks. We are making concrete progress daily toward making the Government of Canada Design System a reality.

Build it with us!

This open-source, community-based project will be as strong as the community behind it.

Get in on the conversation and share your ideas and feedback:

  • What do you think a Government of Canada Design System should do for you?
  • What should it do for your users?
  • How could you pitch in and help build this?

If you’re interested in testing the new documentation style, or if you’d like to contribute something to the design system, reach out to us:

We will be sharing more updates from the Government of Canada Design System in future blog posts. Sign up for the Digital Transformation Office mailing list to get the blog delivered to your inbox.

Learn more

Connect with the Digital Transformation Office at Treasury Board Secretariat