About GC Design System

GC Design System offers basic building blocks and a pattern language to help you design and build a trusted, unified experience for the people using your services. Components and design tokens provide standard Government of Canada branding and experiences for any framework you're using.

We're prioritizing common components and patterns that most GC teams can use. ​​Right now, we're testing GC Design System in alpha, the first usable phase of a product. Use it as a starting point for a website or application and help us improve the design system for public servants.

The Canadian Digital Service builds and maintains GC Design System in consultation with the Canada.ca design system team.

How we're working with Canada.ca design system

GC Design System is incorporating the mandatory elements of Canada.ca. We're working together with the Digital Transformation Office at the Canadian Digital Service to evaluate the design system and add to the roadmap. They continue to provide guidance and support to web and digital practitioners in the GC.

Collaboration and support channels

Check out our Get involved page to learn about what we're working on and how you can contribute.

Visit our GitHub repo to report an issue or make a suggestion.

Ship faster with GC Design System

GC Design System helps you deliver faster in the framework of your choice. You'll reduce manual, repetitive work and meet Government of Canada requirements for digital service delivery, accessibility, and communication. Use GC design system to deliver experiences that are:

• Recognizable.

• Predictable.

• Accessible.

Recognizable: GC sites can be identified and trusted

With our web components and styles you get:

• A default to federal standards and usability best practice.

• The same end result in any framework or environment you're using.

• Reusable options for minimal coding and redefining of values – design tokens reduce manual updates.

Predictable: Interactions designed to support task success

We've united code, design, and guidance to give you:

• All the basics for creating the bilingual, equitable digital service experience Canadians expect.

• The flexibility to adjust components to meet the usability needs of your context.

• Figma assets for rapid high fidelity prototyping that translates faithfully to production.

Accessible: Putting accessibility first

• Accessibility's built in from the start for our design and code elements.

• Guidance for cognitive and physical considerations: from coding to clear requests and communicating errors.

• Ongoing accessibility testing and audits with people using assistive technology, as well as automated testing.