GC Design System
GC Design System 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 Table 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

Roadmap

This roadmap shows planned work for GC Design System. While the system is stable and suitable for production use, improvements continue. You can use this roadmap to help you decide when adopting GC Design System makes sense for your service.

Themes for 2026/2027

  1. Strengthen trust and reliability for GC Design System users
  2. Reduce the cost required for teams to adopt GC Design System
  3. Ensure continued support for real service needs across government

Here's what we'll be focusing on in each quarter.

Quarter 1: April to June 2026

  1. [ 🟢 Done] Research, design, and development of a table component
  2. [ 🟢 Done] Add coded examples and guidance to each component page
  3. [ 🟢 Done] Add detailed validation guidance for adding custom validation to GC Design System form components
  4. [ 🟡 In Progress] Develop a GC Design System plugin/extension for code display that will enable self-serve accessibility checks on components
  5. [ 🟡 In Progress] Add the sign in button to the header component

Quarter 2: July to September 2026

  1. [ 🟡 In Progress] Publish the Alert component
  2. [ 🟡 In Progress] Research, design, and development of a Pill/Tag component
  3. [ 🟢 Done] Add a React starter app
  4. [ 🟡 In Progress] Add an HTML starter app
  5. [ 🟡 In Progress] A Command Line Interface (CLI) tool for quickly generating app templates from GCDS starter apps
  6. [ 🟢 Done] Research on the accessibility and usability of the table component
  7. [ 🟡 In Progress] Focus on community contributions and feature requests

Quarter 3: October to December 2026

  1. Research, design, and development of a modal component (based on community contribution)
  2. Develop an HTML starter app template
  3. Add an Angular starter app (based on community contributions)
  4. Research and development to better integrate with web analytics tools (like Adobe Analytics)
  5. Conduct accessibility and usability research
  6. Publish a space for GCDS Extensions and Plugins - community components, patterns, templates, and frameworks
  7. Support for Server Side Rendering (SSR)

Quarter 4:

  1. Support for Dark mode
  2. Conduct accessibility and usability research

Completed in 2025/2026

  • Launched GC Design System version 1.0, officially going live with semantic versioning
  • Added CSS Shortcuts which allows applying GC Design System styles to HTML
  • Aligned component properties, behaviours, and names between Figma and code to ensure consistency
  • Improved onboarding flows for designers and developers with tailored guidance for installation and using Figma
  • Added better validation support for form input components
  • Benchmarked client satisfaction prior to going live
  • Completed 6 rounds of accessibility testing with Fable
  • Conducted usability testing of GC Design System icons
  • Performed ongoing support ticket analysis
  • Delivered 4 public "GC Design System Forum" events with 978 total attendees
  • Hosted 6 public demos with 652 total attendees
  • Collaborated with Natural Resources Canada on the MapML plugin
  • Added a testimonials page
  • Added 3 GC Design System components into Adobe Experience Manager as part of the integration with Canada.ca

Completed in 2024/2025

  • Aligned the mandatory elements with Canada.ca
  • Added support for NextJS
  • Released a bilingual design library
  • Released a full VueJS package
  • Improved the Angular package
  • Added new and updated components: Card, Fieldset, Icons, Stepper, Date input, Notice
  • Deployed the Card component on Adobe Experience Manager for Canada.ca
  • Released the basic page template
  • Provided an introduction and path to GC Design System from design.canada.ca
  • Conducted a GC design community market survey
  • Created new pages about accessibility information and testing of GC Design System
  • Completed accessibility testing with 30 people
  • Completed 5 usability research activities
  • Established a contribution model
  • Conducted post demo surveys
  • Created the GC Design System mailing list and quarterly newsletters
  • Created recurring demos with self sign up

Community and support

  • Check out our Get involved page to learn about what we're working on and how you can contribute.
  • Visit our GitHub repo to report an issue or make a suggestion.
  • See how teams use GC Design System across government.

Change is expected

Our product roadmap can change based on shifting priorities, resource availability, and unforeseen dependencies. Any item that has not yet started may be reprioritized or replaced by a higher-value initiative. Items currently in progress could be delayed as we navigate challenges and learn along the way.

We share this roadmap to foster transparency, encourage collaboration, and align with our stakeholders. We welcome your feedback and contributions as we refine our path forward.

2026-08-27