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

Start to use

Whether you’re designing or building in code, get started using GC Design System.

Design

Use the GC Design System libraries in Figma to create consistent and accessible front-end experiences for Government of Canada tools and services. Our components are designed for both static sites and dynamic applications. The component library is available in English and French, so you can work in the language of your choice. It includes:
  • Accessible components
  • Quick-start page templates
  • Mandatory branding elements for Canada.ca
An optional token library is also available. It includes the foundational design tokens used across our components, such as colour, spacing, typography, and more.

How it works

GC Design System uses Figma to host our component designs. Figma is a tool that lets you create clickable prototypes of apps and websites using the GC Design System library. Set up a Figma library

Develop

Use GC Design System whether you’re building static HTML pages or dynamic applications using a JavaScript framework.
  • Simplify your digital delivery.
  • Work in the framework you want to work in.
  • Create recognizable and trusted Government of Canada service experiences.
  • Build products that meet or exceed GC accessibility standards.

How it works

GC Design System provides reusable and customizable web components. The components are self-contained, combining their own HTML, CSS, and JavaScript for encapsulation and reuse.
  • The components are tech-agnostic and can be used in any web project, regardless of the underlying framework.
  • The design system uses design tokens to capture brand and design decisions in code for style elements like colours, typography, and spacing.
  • Changes come in a single-version update with tokens, components, and (usually) non-breaking changes.
  • The design system is independent of the Web Experience Toolkit (WET) and GCWeb.
Install GC Design System 2026-09-02