B.C. Design System product roadmap

Last updated on July 16, 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 Government Digital Experience (GDX), a division of the Ministry of Citizens' Services. The Online Service Solutions team at GDX 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.

If you'd like to learn more about how we're approaching this work:

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 In progress
Storybook UI workshop Platform Preview environment for UI components and developer docs In progress
Documentation library Platform New content section to house component documentation In progress
Header Component Basic implementation of a modular website header and navigation Ready for release
Footer Component Modular secondary content and navigation area Ready for release
Buttons Component Modular button with multiple variants Ready for release
Select (dropdown menu) Component Collapsible menu with multiple variants Ready for release
Tags Component Provides a method to categorise, label or filter content Ready for release
Tooltips Component Displays a description or help text on hover or focus Ready for release
Text field Component Flexible text input field Ready for release
Text area Component Multi-line plain text input field In progress
Form wrapper Component Semantic wrapper for input components (React only) In progress
Dividers Component Breaks up content within an interface into discrete sections In progress
Card Component Modular layout element for content or wayfinding In progress
Tabs Component Provides a method to organise content into sections In progress
Modal dialogue Component Displays additional content or actions overlaid over interface Not started
Inline alert Component Modular status indicator used to display an important message 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
Radio button Component Enables a user to select a single item from a list of options Not started
Checkbox Component Enables a user to select multiple items from a list of options 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.0.0, which released on May 1, 2024. This is a stable release.

Component library

The latest release is v0.0.7, which released on July 16, 2024. This is a developer preview release. 

Feedback and feature requests

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