💡 Tips to improve your search
Ministries developing or updating digital products and websites must consider design features that affect the look and accessibility of their products.
The B.C. Design System promotes consistency and accessibility in B.C. government digital products. It provides an easy way to implement a common visual language, and a set of building blocks to help designers and developers prototype and build faster and more consistently.
The B.C. Design System comprises:
Design system assets are installed as dependencies (Figma libraries and npm packages), meaning that teams can hook into a maintained and version-controlled source of truth. Components are designed to be highly flexible and customisable.
Teams using the design system can significantly speed up their design and build process. The design system provides a common point of reference for designers and developers, to enable easier cross-functional collaboration.
Components go through automated and human accessibility testing before release. Validation for relevant Web Content Accessibility Guidelines (WCAG) Success Criteria is included in each component’s documentation.
There are no fees for using the design system.
The design system is maintained by the Online Service Solutions team at Service BC and Government Digital Experience. Assets and resources are provided as-is. The team welcomes feedback, feature requests and opportunities to collaborate.
The design system is an open source product, licensed under the Apache 2.0 licence. Source code is published on GitHub.
Design assets are published as components, variables and styles in a Figma library.
Code assets are published as:
The component library leverages Adobe’s open-source React Aria library, for its best-in-class accessibility features.
The B.C. Design System is available for all teams working on B.C. government digital products to use. Onboarding is entirely self-service.