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

Teams using GC Design System

See how government teams are using GC Design System to build accessible, consistent services faster.

Growing adoption across government

  • 90+

    Teams building services with GC Design System

  • 18+

    Departments and agencies across government

    •  Used by departments delivering high-volume, public-facing services, including:
    • Employment and Social Development Canada
    • Health Canada
    • The Royal Canadian Mounted Police
    • Transport Canada
    • Immigration, Refugees and Citizenship Canada
    • Fisheries and Oceans Canada

    Real services built with GC Design System

    GC Design System is supported by a growing community of public servants. Teams adopt GC Design System in ways that fit their existing technical environments. Here are some live examples of services built with it.

    Works across technical environments

    Some teams use framework-specific packages for React, Angular, or Vue. Others rely on the HTML package for broader use cases. Teams using the Drupal content management system can get started with the GC Design System theme.

    What teams say

    • “Our team’s use of GC Design System shaved weeks or months from delivering working software. The attention that CDS paid to cross-cutting issues such as browser compatibility and accessibility let my team focus on building a service portal for Canadians.”

      — Developer, Fisheries and Oceans Canada

    • “Finding the right design reference was such a time-consuming process for me, and exploring GC Design System gave me lots of time saving options.”

      — Designer, Veterans Affairs Canada

    • “I have noticed a big difference in terms of time saved on the implementation side. It’s now one-for-one of what I design and what developers are implementing. It’s much easier to validate the implementation and accelerates getting to production.”

      — UX Designer, Government of Canada

    Considering GC Design System?

    Attend a demo to get your questions answered from our team, or check our roadmap to help you decide when adopting GC Design System makes sense for you. Attend a demo Check our roadmap 2026-09-02