B.C. Design System product roadmap

Last updated on September 19, 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
Design tokens v3.0.0 Dependency Major update to design tokens package Released
Figma design library Platform Central repository for design specifications and documentation Released
Storybook UI workshop Platform Preview environment for UI components and developer docs Released
Documentation library Platform New content section to house component documentation Released
Header Component Basic implementation of a modular website header and navigation Released
Footer Component Modular secondary content and navigation area Released
Buttons Component Modular button with multiple variants Released
Select (dropdown menu) Component Collapsible menu with multiple variants Released
Tags Component Provides a method to categorise, label or filter content Released
Tooltip Component Displays a description or help text on hover or focus Released
Text field Component Flexible text input field Released
Text area Component Multi-line plain text input field Released
Form wrapper Component Semantic wrapper for input components (React only) Released
Design tokens v3.1.0 Dependency Minor update to design tokens package. (Issues: #350, #351, #386, #397) Released
Select (dropdown menu)  Enhancement Extend Select component to support a description/helper text field. (Issue: #417) Released
Tags Enhancement Add additional visual indicator for error state. (Issue: #418) Released
Inline alert Component Modular status indicator used to display an important message. (Issues: #433, #435) Released
Switch Component Enables a user to toggle a setting between binary states. (Issue: #438) Released
ButtonGroup Component Semantic wrapper for multiple buttons. (React only. Issue: #443) Released
Radio button Component Enables a user to select a single item from a list of options. (Issue: #464) Released
Checkbox Component Enables a user to select multiple items from a list of options. (Issue: #451) Released
Modal Component Displays additional content or actions overlaid over interface. (Issue: #473) Released
Dialog Component Generic content container for use with modal overlays. (Issue: #473) Released
Alert Dialog Component Precomposed dialog template suitable for common error or notification messages. (Issue: #473) Released
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
Callout Component Provides a method to visually emphasise important content Not started
Chips Component Alternative method to categorise, label or filter content Not started
Pagination Component Provides a method to navigate a long list of content or options Not started
Accordion Component Collapsible content area, used to organise content into sections 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: