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 Foundations overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

GC Design System

An official, production-ready design system for the Government of Canada. Build modern, accessible, human government services people can use. Start to use Attend a demo

Choose GC Design System

GC Design System helps public servants deliver Government of Canada websites and products. Build faster without compromising brand identity, accessibility, or bilingualism. Find production-ready code, design assets, and documentation in one place.

Learn more

Learn about us, the teams using GC Design System, our regular accessibility testing, and how you can improve accessibility in your products and websites.

Get involved

We’re continuously scaling our product to better meet your needs and offer you more options. Get involved

A set of tools for common problems

Apply or combine these tools to address common service scenarios. Design and build trusted, unified experiences faster. Three separate shapes, a pink rectangle beside a green and a yellow square, form the outline of a larger square.
Components Meet common service interaction needs with the code, design, and guidance for user interface components.
A vertical rectangle with pink that fades to blue.
Page templates Start your project with pre-built page layouts that provide a consistent, recognizable Canada.ca experience.
A badge in the top left with the word new. Three slightly overlapping, horizontal dots in darkening shades of blue.
CSS Shortcuts (New) Apply pre-defined styles and layouts by adding our custom CSS utility classes to your HTML.
A cluster of four dots in purple, blue, green, and yellow.
Foundations Explore coded brand and design decisions that shape a consistent visual experience.

What’s new

Browse the latest code additions and features in the GitHub changelog. Recent releases:
  • Components: New table component and new ISO date format for date input
  • Documentation: New code examples for attributes and slots for all components, and new form validation guidance

What’s up next

Explore our roadmap to follow our progress and check out what we’re working on next.

Connect with us

Reach out to us if you have questions, want to get involved, or want to join our mailing list. Contact us
2026-10-27