“By using the GC Design System, web and application teams across government will be able to leverage modern features to scale delivery. These features include a prototyping tool (Figma), code builder, web components, design tokens, and the flexibility to work in the programming language of their choice. GC Design System will also help teams meet GC standards for digital service delivery and communication, by embedding these requirements in the code and design, and offering guidance.”
– Blog: A path toward a unified design system for the Government of Canada

A design system is a collection of reusable guidelines, user interface components, and tools that provide consistency and efficiency in the design and development process. Design systems are a single source of truth for design, code, and guidance.

The Directive on the Management of Communications and Federal Identity requires external-facing federal government websites and applications to follow the Canada.ca Specifications. This includes applying brand elements so people can recognize and identify Government of Canada content. The standardized header and footer contain those required brand elements.  

Style is also part of the GC brand. Teams need to apply consistent typography, spacing, and colours across their sites, as well as standardized content and layouts. This way, the public can trust that your site is an official Government of Canada space.   

In this blog, we’re (Amy Morris, Design Lead, GC Design System and Chelsey Donohue, Chief, Guidance and Standards) sharing about our teams’ work on aligning GC Design System with the Canada.ca specifications to enable consistency and improve the user experience across various frameworks public servants are using. 

A cohesive design system is the key to brand consistency across Canada.ca and other digital services. That’s where work on GC Design System comes in. Using the GC Design System, a team can get the same brand elements, look and feel, and experiences without having to have the same backend code. It aims to replace existing design systems, offering a more scalable, predictable, and inclusive user experience. GC Design System has built in many Canada.ca and FIP rules as a default, so teams in the GC can confidently use it, knowing it meets Canada.ca design requirements.

As part of this effort, CDS teams (GC Design System and the Digital Transformation Office (DTO) worked on the alignment of required brand components with Principal Publisher, who manages GCWeb.

What brand components are required for Canada.ca content?

GC Design System components are user interface building blocks that address different user objectives. Each comes with reusable code, prototyping assets, best practice advice, and accessibility tips.

To keep it simple: components are pathways, roads, and signage to get around. They facilitate navigation and act as channels for communication with the person using the service. We communicate with brand and messaging components and people can communicate back. They might use a checkbox to give consent, fill in a form field, or give an instruction or command using a button.

While there are optional components, like file uploader and radio buttons, there are mandatory elements all Government of Canada sites and products must use to ensure brand consistency:

Why alignment is important 

The Directive on the Management of Communications requires that external-facing web pages and applications, managed by or on behalf of the Government of Canada, meet the Canada.ca Specifications. Mandatory design elements in the Specifications establish identifiable Government of Canada web content and global navigation elements.  

In the past for teams (outside of GCWeb/AEM) to comply, they’d have to replicate or approximate visual styles and pattern behaviours in the Canada.ca Specifications. Now – without guesswork or extensive research – teams using GC Design System can get a match in the framework they’re using. 

Our goal in doing this alignment work was to ensure that any sites or products using the GC Design System or GCWeb are successfully applying the mandatory elements of the Canada.ca Specifications and can provide a consistent experience for the people using our sites and products. 

But this is about more than just following the rules. It’s about a path where public servants can work together across disciplines and tech stacks to build services that work for the people we serve, so all those who need to can find, understand, and use those services.

While the Canada.ca website acts as the front door for accessing GC services and information, the delivery of digital experiences in each department varies. This shows up in our collective web presence as brand inconsistency. It degrades trust and makes it harder for visitors to find what they’re looking for. 

We should be able to use different systems, frameworks, and implementation strategies while maintaining common interfaces and experiences. Not all government offices work the same way in the background, yet they all have common signage and visual elements when you walk through the door. A visitor immediately knows they’re in a trusted environment. 

We did this alignment work to provide tools and resources that will help address inconsistencies in brand elements across GC sites. Some teams haven’t had the resources or capacity to get aligned. Departments can be confident that they’re meeting requirements when using the GC Design System.  

What does this mean for the GC digital community? 

Creating new brand-compliant Canada.ca content

If you’re building a new website or application, we encourage you to use GC Design System. We recently published a basic page template with all the standard and required components in place. Teams can use this to start prototyping or coding and then add their content and any other gcds-components they may need on the page. This gives you a solid starting point, instead of starting from scratch, potentially cutting your development time in more than half.

Integrating GC Design System components into existing web content

Even if you’re not starting from scratch, you can still start using GC Design System components alongside other frameworks you’re using. Browse our growing collection of components to see if any can help with user objectives for your content. 

Things to note

• There may still be slight style differences between GC Design System and GCWeb. We’re aiming for a visual equivalency rather than a pixel-to-pixel match. The teams are continuing work to review the HTML structure of components so people using adaptive technology have a consistent content and navigation experience.  
• If you’re using GCWeb, apply version 16.6.1 or later of GCWeb to fix the few inconsistency issues between both frameworks, like the font size. 
• Integration with the managed web service, AEM, is ongoing. Currently, the card component is available. Look for updates in the GC Design System newsletter as more components are released for use in AEM. 
• Many teams are already prototyping and delivering services with GC Design System, while others continue to use GCWeb and WET and other platforms. GC Design System can be used alongside GCWeb. 

Stay updated on what’s next for GC Design System

Moving forward, teams at GC Design System, the Digital Transformation Office (DTO), and Principal Publisher will continue collaborating. Principal Publisher is updating patterns in GCWeb to further align with GC Design System components and will be migrating gcds-components into AEM. We’re also continuing to work towards integrating other Canada.ca components and templates into GC Design System.

Get updates and information from us:

• Interested in learning more about how to use GC Design System? Register for an upcoming demo (there’s a Q&A session at the end with the product team).
• Curious about the open code or providing feedback on the components? Check out our GitHub.
• Want updates right to your inbox? Sign up for the GC Design System mailing list. You can also subscribe to CDS’s newsletter for more GC digital content/updates.