Install GC Design System

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 digital Government of Canada 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, but it’s aligned with Canada.ca Specifications.

Get started: select your framework

Select the framework you use to get instructions on how to install GC Design System components into your project.