Bc Gov Design System

BC Gov Design System — React Skill

Correct usage of the official BC Government Design System packages in React/Vite applications.

npm Packages

Three packages are required for a compliant BC Gov React frontend:

npm install @bcgov/design-system-react-components @bcgov/bc-sans @bcgov/design-tokens

Never import fonts from fonts2.gov.bc.ca — that external URL will be blocked in network-restricted or air-gapped environments. Always load BC Sans from the npm package.

main.jsx — Required Import Order

CSS imports must appear in this exact order so design token variables are available before component styles, and component styles are available before app overrides:

import '@bcgov/bc-sans/css/BC_Sans.css';
import '@bcgov/design-tokens/css/variables.css';
import './index.css';   // app-level overrides last

Header Component

Header renders the official blue BC Gov banner with the BC logo built in via its internal SvgBcLogo component — no static SVG asset is needed in public/.

import { Header } from '@bcgov/design-system-react-components';

<Header
  title="My Application"
  skipLinks={[<a key="main" href="#main-content">Skip to main content</a>]}
/>

Key props:

Footer Component

import { Footer, FooterLinks } from '@bcgov/design-system-react-components';

<Footer
  links={[
    <FooterLinks
      key="about"
      title="BC Government"
      links={[
        <a key="disclaimer"    href="https://www2.gov.bc.ca/gov/content/home/disclaimer">Disclaimer</a>,
        <a key="privacy"       href="https://www2.gov.bc.ca/gov/content/home/privacy">Privacy</a>,
        <a key="accessibility" href="https://www2.gov.bc.ca/gov/content/home/accessibility">Accessibility</a>,
        <a key="copyright"     href="https://www2.gov.bc.ca/gov/content/home/copyright">Copyright</a>,
      ]}
    />,
  ]}
/>

FooterLinks props: title (string), links (array of React elements — <a> nodes, NOT { label, href } objects). Passing plain objects to links causes "Objects are not valid as a React child" and a blank page. Footer also accepts acknowledgement (string), hideCopyright (bool), contact (ReactNode).

Design Tokens — CSS Variables

Always use these var(--...) references with a hard-coded hex fallback. Import @bcgov/design-tokens/css/variables.css in main.jsx before app CSS.

Colour Tokens

Layout Tokens

Navigation Pattern (DSC / HNW Standard)

BC Gov Design System navigation is white background with blue text — not the old dark-blue/yellow-stripe style. Use BEM class names on <NavLink> elements:

/* White nav bar with bottom border */
.hnw-nav {
  background: var(--surface-color-secondary-default, #fff);
  border-bottom: 1px solid var(--surface-color-border-default, #d8d8d8);
  padding: 0 var(--layout-padding-large, 24px);
}

.hnw-nav__link {
  color: var(--surface-color-primary-default, #013366);
  border-bottom: 3px solid transparent;
}

.hnw-nav__link:hover {
  border-bottom-color: var(--surface-color-primary-hover, #1e5189);
  background-color: var(--surface-color-secondary-hover, #edebe9);
}

.hnw-nav__link--active {
  border-bottom-color: var(--surface-color-primary-default, #013366);
  font-weight: 700;
}

In React Router, apply the active class via:

<NavLink
  to="/route"
  className={({ isActive }) =>
    isActive ? 'hnw-nav__link hnw-nav__link--active' : 'hnw-nav__link'
  }
>
  Label
</NavLink>

Body Font Setup

Set on body in index.css — use the token with a complete fallback stack:

body {
  font-family: var(
    --typography-font-families-bc-sans,
    "BC Sans", "Noto Sans", Verdana, Arial, sans-serif
  );
}

What NOT To Do

Verified Version Matrix

References

• BC Gov Design System
• NPM: @bcgov/design-system-react-components
• NPM: @bcgov/bc-sans
• NPM: @bcgov/design-tokens