GC Design System
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind 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.

Community and support

  • Check out our Get involved pageto learn about what we’re working on and how you can contribute.
  • Visit our GitHub repo to report an issue or make a suggestion.
  • See how teams use GC Design System across government.

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-09-02