B.C. Design System

Note

May 2024: The B.C. Design System is currently in active development. If you have questions, contact the design system team or open an issue.

The B.C. Design System will give design and software development teams the building blocks to deliver intuitive, accessible digital services.

The B.C. Design System comprises 4 core elements:

• Design tokens
• React component library (in development)
• Design library in Figma (in development)
• Documentation hub

The new design system replaces the legacy design system, which has now been archived.

B.C. Design Tokens

The B.C. Design Tokens package is the first release as part of the new design system.

Design tokens provide a method to quickly and consistently implement the province's look and feel for digital services. They offer a set of standardized options to help developers style user interfaces in a consistent and future-proof way.

• Installable package on npm
• Source code
• Figma library

Component library

The component library will provide an inventory of reusable UI components, including:

• Reusable components in Figma
• Reference implementations in React

Support for other languages and frameworks is currently out-of-scope.

The component library is currently in active development. A developer preview of the React library is published on npm.

Contact

The B.C. Design System is maintained by Government Digital Experience (GDX), a division of the Ministry of Citizens' Services. You can contact the design system team by email at designsystem@gov.bc.ca, or open an issue.

Legacy documentation

Warning

The previous B.C. government design system is no longer supported and has been archived. These resources are provided for reference only.

Documentation and components for the legacy design system are accessible in this repo and on Classic DevHub:

• Developer documentation
• Source code