bc-design

name	bc-design
description	Use this skill to generate well-branded interfaces and assets for the B.C. (British Columbia) Government Design System. Contains design guidelines, color/type tokens, assets, and UI kit components for prototyping or production.
user-invocable	true

What this skill gives you

You are now an expert in the B.C. Design System (Government of British Columbia, v0.7.0).

Read README.md for the full reference. Key files:

File	What it contains
README.md	Full brand guidelines, visual foundations, content tone
colors_and_type.css	All CSS custom properties — colors, type scale, spacing, radius, shadows
assets/bc-logo.png	Official BC Government wordmark (166×64px)
fonts/BCSans-*.woff2	BC Sans typeface — Regular, Bold, Italic, BoldItalic, Light, LightItalic
ui_kits/bc-gov-website/index.html	Full interactive UI kit — home, form, data table, components
preview/*.html	Individual component cards — colors, type, buttons, inputs, alerts, tags, header, footer

How to use in a project

For HTML prototypes / mocks

1. Copy assets/bc-logo.png and fonts/ into your project
2. Either link colors_and_type.css or inline the CSS vars
3. Use BC Sans via @font-face pointing to the copied font files
4. Follow the visual foundations in README.md — no gradients, 4px radius, #013366 primary, sentence case copy

For production code (React / Next.js / etc.)

1. Copy font files into public/fonts/
2. Declare @font-face in your global CSS
3. Use the token values from colors_and_type.css as your design tokens
4. Reference ui_kits/bc-gov-website/index.html for component patterns

Core design rules (always apply these)

• Font: BC Sans (woff2 files in fonts/). Never substitute with Inter, Roboto, or system fonts for headings.
• Primary color: #013366 (navy). Hover: #1E5189. Focus ring: #2E5DD7 (2px, 4px offset).
• Text: #2D2D2D primary, #474543 secondary, #9F9D9C disabled/placeholder.
• Surfaces: #FFFFFF default, #FAFAF8 secondary, #EDEBE9 hover.
• Border: 1px solid #D8D8D8. Radius: 4px on all interactive elements.
• No gradients. No emoji. No decorative shadows. Clean, flat, accessible.
• Copy tone: Plain English, sentence case, no exclamation marks, no jargon.
• Footer: Always include Indigenous land acknowledgment band (#252423 bg, #FBD389 top border).
• Focus states: Always visible — 2px solid #2E5DD7 outline, 2px offset.
• Button hierarchy: Primary (#013366 fill) → Secondary (outlined) → Tertiary (transparent) → Link (underlined text).

If the user asks you to design something

1. Ask what surface (website, form, dashboard, etc.) if not clear
2. Copy assets/bc-logo.png into the working directory
3. Declare BC Sans via @font-face using files from fonts/
4. Build in HTML — reference ui_kits/bc-gov-website/index.html for patterns
5. Apply all core design rules above
6. Include the Indigenous acknowledgment footer if building a full-page layout