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. You’ll find the code, design assets, and documentation all in one place.

Stable and ready for production

GC Design System is stable, but not static. We continue to improve it in a thoughtful and predictable way, with versioned releases that help teams understand what kind of change to expect. We prioritize common components and patterns that most GC teams rely on to build digital services.

This design system is built for the long-term. A dedicated team at the Canadian Digital Service builds and maintains it, in consultation with the Canada.ca Experience Office. A growing number of teams building digital services also provides valuable input and contributions.

How GC Design System fits with other design systems

GC Design System coexists with design systems historically used across government. Teams can continue using existing systems as we work toward a more unified approach. Teams can also build local design systems on top of GC Design System to meet their needs, while maintaining a cohesive look and feel.

We share our roadmap openly to help you plan adoption based on your own timelines and needs.

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.
2026-02-17