The B.C. Design System gives design and software development teams the building blocks to deliver intuitive, accessible digital services.
The B.C. Design System comprises 4 core elements:
The new design system replaces the legacy design system, which has now been archived.
Each library ships an AGENTS.md file to help AI agents make effective use of the B.C. Design System.
Add the B.C. Design System boilerplate from AGENTS.example.md to an AGENTS.md file at the root of your project. This directs agents to load the package-specific instructions for each library.
The @bcgov/design-tokens package provides 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 coherent and future-proof way.
You can install the design tokens library via:
To learn more about the design tokens:
The @bcgov/design-system-react-components package provides a library of reusable UI components, implemented in Figma and React. Support for other languages and frameworks is currently out-of-scope.
The component library is currently in active development. New components are added when both Figma and React implementations are complete and fully documented.
You can install the component library via:
Additional information and documentation:
The B.C. Design System is maintained by the Everyday Life Events Common Capabilities & AI Platforms branch at Connected Services BC, part of the Ministry of Citizens' Services. To get in touch: