💡 Tips to improve your search
- Check your spelling
- Use fewer keywords
- Try a simpler phrase
Featured topics
Digital Plan Progress Report
The Digital Plan supports the transformation of services. Our 2024 progress report shares stories from teams who are building inclusive, accessible and connected solutions.
Artificial intelligence
The B.C. government is exploring the possibilities of artificial intelligence (AI) to provide better, faster and more efficient services for people in the province.
DigitalBC blog
Our blog explores the challenges and impacts of the digital transformation efforts happening in the B.C. government.
B.C. Design System
Service BC and Government Digital Experience
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:
- A library of design tokens (Figma, CSS and JavaScript variables), providing a flexible set of standardised options covering basic design decisions like colour, typography and layout
- A library of common user interface components (built in Figma and React), enabling designers and developers to design and build user interfaces that are highly accessible and consistent with other B.C. government digital services
- Detailed design guidance and technical documentation for components and foundational concepts like typography and use of colour
Why should I use this
Ease of use
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.
Efficiency
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.
Accessibility
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.
About this component
Price
Free
There are no fees for using the design system.Price details
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. Service level support
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. Additional technical information
Getting started
The B.C. Design System is available for all teams working on B.C. government digital products to use. Onboarding is entirely self-service.
https://gov.bc.ca/designsystem
Support
If you have a comment, question or problem, you can: