Verified:GitHub

bc-design

Name: bc-design
Availability: InStock
Author: richfrem

Generates B.C. Government Design System interfaces and assets with WCAG accessibility using BC Sans typeface and tokenized CSS custom properties for Prototyping and Production UI kit components.

Updated Apr 20, 2026

Search Tags:#typography #branding #accessibility #design system #colors #UI kit #BC Government

Ready to run

npx skills add https://github.com/richfrem/claude-design-bc-gov-design-system --skill bc-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: bc-design
Source: https://github.com/richfrem/claude-design-bc-gov-design-system/tree/main/bc-design-system
Command: npx skills add https://github.com/richfrem/claude-design-bc-gov-design-system --skill bc-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires BCSans-*.woff2, colors_and_type.css, and includes assets (resource) and scripts (resource) and references (resource) and ui_kits (resource) components.

What problem does it solve?

This Skill provides comprehensive design guidelines, color/token systems, assets, and UI kit components for the B.C. Government Design System, enabling you to create consistent and accessible digital services for BC government websites and apps.

Core Features & Use Cases

Design Guidelines: Offers full brand guidelines, visual foundations, and content tone for consistent design.
Color/Type Tokens: Provides CSS custom properties for colors, typography, spacing, radius, shadows, and more.
Assets: Contains the official BC Government logo and BC Sans typeface files.
UI Kit Components: Includes a full interactive UI kit for prototyping or production with components like buttons, inputs, alerts, navigation, calendars, and more.
Use Case: For a web developer looking to build a government website or app, this Skill can provide the necessary tools and assets to ensure a consistent and accessible design in line with BC government standards.

Quick Start

Use the bc-design skill to build a well-branded BC government website using the provided UI kit components and design guidelines.

Frequently Asked Questions about bc-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a website interface that meets B.C. Government branding and accessibility standards?▼

To build interfaces meeting B.C. Government branding and accessibility standards, use this design system to generate well-branded interfaces utilizing the BC Sans typeface, color token systems, and interactive UI kit components for consistent web development.

What CSS custom properties are available for the B.C. Government design system colors and typography?▼

The B.C. Government design system provides CSS custom properties for colors, typography, spacing, radius, and shadows. These design tokens ensure visual consistency and accessible digital services across government websites.

Do I need the BC Sans font files to use the B.C. Government UI kit components?▼

Yes, you need the required BC Sans woff2 font files and design guidelines. The UI kit components rely on these dependencies to render typography correctly and maintain official B.C. Government branding compliance.

Can I use the B.C. Government UI kit components for production web apps?▼

Yes, the B.C. Government UI kit components can be used for prototyping or production web apps. It provides interactive elements like buttons, inputs, alerts, and navigation for developing accessible government digital services.

What assets are included for designing B.C. Government digital services?▼

Assets for designing B.C. Government digital services include the official BC Government logo and BC Sans typeface files. These are provided alongside full brand guidelines and content tone references for consistent visual design.