B.C. Design System product roadmap

Last updated on November 29, 2024

Learn what we're working on now, and what's planned for the future.

On this page:

Overview

The B.C. Design System is an open-source product. It is maintained by Service BC and Government Digital Experience (GDX), part of the Ministry of Citizens' Services. The GDX Online Service Solutions team also maintains gov.bc.ca, CMS Lite, the intranet and products like search and virtual assistants.

We are currently working on a complete replacement of the legacy design system. There are 3 major elements in the new B.C. Design System:

  • Design tokens: atomic style variables for the B.C. government's digital look and feel, published on Figma and in code
  • Component library: reusable user interface components, published on Figma and as an installable React package
  • Documentation hub: best practice guidance and technical documentation for the design system

We are releasing updated guidance and new resources for designers and developers as we build. The legacy design system is no longer supported and has been archived.

How we work

The design system will be open to contributions from the community. Learn more about contributing to the design system.

We prioritise which components and enhancements to work on based on:

  • Design, development and testing our team is doing for other products
  • Requests and feedback from the design and developer communities
  • Severity of technical, usability or accessibility issues identified
  • Complexity, measured in terms of time required to design, develop and test 

Components will be released one by one as they meet our definition of done.

To be released, a component must have:

  1. A design specification and component in Figma
  2. A reference implementation in React JavaScript
  3. Detailed user guidance and technical documentation

Each component must also undergo usability and accessibility review before release. 

Current backlog

This is a high-level view of what we're working on. It is subject to change, and there are no timelines for individual items to be released.

We are currently working towards a 'minimum viable product' (MVP) release of the new design system. This milestone includes:

  • Best-practice documentation for colour, branding, typography and spacing — complete
  • A tested and production-ready release of the design tokens package — complete
  • Approximately 20 individual user interface components, implemented in Figma and in React code — in progress
B.C. Design System backlog
Item Type Summary Status
Callout Component Provides a method to visually emphasise important content Ready for release
Alert banner Component Provides a method to display a high-priority, system-level message Ready for release
Accordion group Component Collapsible content area, used to organise content into sections Ready for release
Chips Enhancement Alternative visual style for tags Ready for release
Table Component Enables the user to view, sort and modify data presented in rows and columns In progress
Menu Component Dropdown menu for navigation and controls In progress
Navbar Component Add-on/extension of header to provide a secondary navigation menu Feature complete
Number field Component Enables the user to input numerical data into a form or interface Not started
Date picker Component Enables the user to input a date value into a form or interface Not started
Toast Component Displays a system message in a temporary popover Not started
Progress bar Component Visualises a user or process' progress towards completion Not started
Dividers Component Breaks up content within an interface into discrete sections Not started
Card Component Modular layout element for content or wayfinding Not started
Tabs Component Provides a method to organise content into sections Not started
Pagination Component Provides a method to navigate a long list of content or options Not started
Dark mode Enhancement Standardised dark visual theme for each component Not started
Expand All | Collapse All
 

What backlog statuses mean

  • Not started: item is in the backlog, but has not yet been selected for development
  • In progress: we are actively working on this item in our current sprint
  • On hold: item is blocked or waiting for attention
  • Feature complete: design and development is done, and we are working on documentation
  • Ready for release: item meets the definition of done, and is ready to ship
  • Released: item has been shipped

Latest releases

Design tokens

The latest release is v3.1.1, which released on August 23, 2024. 

Component library

The latest release is v0.4.0, which released on September 19, 2024.

Feedback and feature requests

To give feedback, ask a question or request a new component or enhancement, you can: