Government of Canada (GC) Design System Styles
This "Styles" section introduces design tokens that encode brand and design decisions for basic style elements like colors, typography, and spacing, ensuring consistency across Government of Canada digital services.
Design tokens in the GC Design System serve as the foundational elements, capturing brand and design decisions in code for basic style aspects such as colors, typography, and spacing.
These tokens facilitate a consistent visual experience by scaling design and brand decisions across components, ensuring predictable and trustworthy interactions for users. They also enhance communication between design and development teams by defining each style decision with a specific name and visual representation. The system categorizes tokens into color tokens, which store color values for styling components; spacing tokens, which help position elements onscreen and within components; and typography tokens, which encompass the style, arrangement, and appearance of letters, numbers, and symbols.
Share this Example:
Content related to this example:
Government of Canada (GC) Design System Page Templates
This "Page Templates" section offers pre-built, responsive page layouts that combine various components to ensure consistent, accessible, and user-friendly experiences across Government of Canada digital services.
Government of Canada (GC) Design System
The design system provides standardized components, templates, and design tokens to help developers and designers create consistent, accessible, and user-friendly Canadian government digital services.
Government of Canada (GC) Design System Figma Library
The Figma library offers designers a comprehensive set of pre-built components and templates to create consistent and accessible digital services for the Government of Canada.
Government of Canada (GC) Design System Components Repository
This is a monorepo managing the web components of the Government of Canada's Design System, facilitating the creation of consistent and accessible digital services.
