GC Design System
Home Start to use Page templates overview Basic page Components overview Breadcrumbs Button Card Checkboxes Container Date input Date modified Details Error message Error summary Fieldset File uploader Footer Grid Header Heading Icon Input Language toggle Link Notice Pagination Radios Screenreader-only Search Select Side navigation Signature Stepper Text Textarea Theme and topic menu Top navigation CSS shortcuts overview Reset styles Responsive layout State Box sizing Container sizing Display Overflow Position Visibility Font Font family Font size Font style Font weight Line height Link colour Link size Link text decoration List style Text align Text colour Text overflow Text transform Word break Margin Padding Align content Align items Align self Flex Flex direction Flex grow Flex shrink Flex wrap Gap Grid columns Grid rows Justify content Justify items Justify self Order Place content Place items Place self Background colour Border colour Border radius Border style Border width Icon names Icon size Image Cursor Pointer events Transition Styles overview Design tokens Colour tokens Spacing tokens Typography tokens Contact us Get involved Find a demo

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.
2025-10-24