skills.rest
richfrem
richfremCOMMUNITY
Explore all skills by this author →
GitHub

bc-design

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
One-click install
npx skills add https://github.com/richfrem/claude-design-bc-gov-design-system --skill bc-design
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
richfremrichfrem

bc-gov-design-system

Integrate BC Government Design System components with BC Sans font and color palette.

Community
Advanced
skatedduskateddu
27

frontend-design

Generate frontend interfaces with HTML/CSS/JS for React, Vue, or plain websites.

Community
Advanced
The13thNodeThe13thNode
3

css-design-system

Enforce standardized CSS design tokens as custom properties in component styles.

Community
Intermediate
qdzshqdzsh
12

frontend-design

Design and implement production-grade frontend interfaces with cohesive visual language.

Community
Advanced