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

Start to use

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

Design

Use GC Design System library 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 library includes:

  • Accessible components
  • Quick-start page templates
  • Mandatory branding elements for Canada.ca

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.

Start designing

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.
Start developing 2025-10-01