https://github.com/bcgov/design-system
The B.C. Design System helps public sector design and development teams build consistent, accessible products
https://github.com/bcgov/design-system
citz component-library design-system design-tokens react
Last synced: 2 months ago
JSON representation
The B.C. Design System helps public sector design and development teams build consistent, accessible products
- Host: GitHub
- URL: https://github.com/bcgov/design-system
- Owner: bcgov
- License: apache-2.0
- Created: 2018-10-10T19:06:06.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-11-27T18:21:02.000Z (11 months ago)
- Last Synced: 2024-11-27T19:26:52.727Z (11 months ago)
- Topics: citz, component-library, design-system, design-tokens, react
- Language: TypeScript
- Homepage: https://gov.bc.ca/designsystem
- Size: 19.1 MB
- Stars: 59
- Watchers: 19
- Forks: 38
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# B.C. Design System [](https://github.com/bcgov/repomountie/blob/master/doc/lifecycle-badges.md)
> [!WARNING]
> Effective February 7, 2025, development of the design system is paused. You can continue to use the packages in your projects, but they are not currently being updated. The team are monitoring issues, and will reassess resourcing options in FY2025/26. If you have questions, email [designsystem@gov.bc.ca](mailto:designsystem@gov.bc.ca).
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:
- [Design tokens](#bc-design-tokens)
- [Figma and React component libraries](#component-library)
- [Documentation hub](https://gov.bc.ca/designsystem)
The new design system replaces [the legacy design system](#legacy-documentation), which has now been archived.
## B.C. Design Tokens
The [B.C. Design Tokens package](https://github.com/bcgov/design-system/tree/docs/packages/design-tokens) 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 consistent and future-proof way.
- [Installable package on npm](https://www.npmjs.com/package/@bcgov/design-tokens)
- [Source code](https://github.com/bcgov/design-system/tree/main/packages/design-tokens)
- [Figma library](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers)
- [Design tokens docs](https://www2.gov.bc.ca/gov/content?id=5993A3D597F1454CB0E5DFA02DBB2EB7)
## Component library
The component library provides an inventory 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.
- [Installable package on npm](https://www.npmjs.com/package/@bcgov/design-system-react-components)
- [Source code](https://github.com/bcgov/design-system/tree/main/packages/react-components)
- [Storybook UI workshop](https://designsystem.gov.bc.ca/react-components/)
- [Figma library](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers)
- [Component docs](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43)
## Contact
The B.C. Design System is maintained by Service BC and Government Digital Experience (GDX), part of the Ministry of Citizens' Services. You can contact the design system team by email at [designsystem@gov.bc.ca](mailto:designsystem@gov.bc.ca), or [open an issue](https://github.com/bcgov/design-system/issues/new/choose).
## 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](https://classic.developer.gov.bc.ca/Design-System/About-the-Design-System)
- [Source code](https://github.com/bcgov/design-system/tree/main/components)