Gc Design System

GC Design System Website Builder

Build accessible, bilingual Government of Canada websites using GCDS web components + Tailwind CSS for gaps.

Quick Start

1. Pick implementation mode:

• Non-React: HTML/Web Components (starter in assets/basic-page-template.html)
• React: @gcds-core/components-react wrappers

1. Add required GCDS component styles and CSS shortcuts
2. Build standard UI with GCDS components (see [references/components.md](references/components.md))
3. Use Tailwind CSS (tw- prefix) for advanced components (see [references/tailwind-gap-components.md](references/tailwind-gap-components.md))

Non-React Setup (HTML / Web Components)

CDN setup (``)

For Tailwind gap components, also add:

Configure Tailwind with tw- prefix to avoid GCDS class conflicts. See [references/tailwind-gap-components.md](references/tailwind-gap-components.md) for the full config block.

npm setup

npm install @gcds-core/components @gcds-core/css-shortcuts

Then load styles/scripts:

React Setup

Install:

npm install @gcds-core/components @gcds-core/components-react @gcds-core/css-shortcuts

Import styles and use React wrappers:

import '@gcds-core/components-react/gcds.css';
import '@gcds-core/css-shortcuts/dist/gcds-css-shortcuts.min.css';
import { GcdsButton, GcdsContainer } from '@gcds-core/components-react';

export function Example() {
  return (
    
      Continue
    
  );
}

Page Structure (mandatory)

Every GC page MUST have:

     ← GC branded header (required)
     ← Search slot
   ← Breadcrumb slot

   ← Content wrapper
    Content here
  
   ← Last update date

     ← GC branded footer (required)

Component Decision Guide

Use GCDS components for:

Header, Footer, Breadcrumbs, Buttons, Forms (Input, Textarea, Select, Checkboxes, Radios, File Upload, Date Input), Cards (basic link cards), Grid layout, Container, Navigation (Top Nav, Side Nav), Pagination, Notice/Alerts, Details (accordion), Stepper, Heading, Text, Link, Icon, Search, Error handling, Signature, Language Toggle

Use Tailwind (tw- prefix) for:

• Enhanced Cards — multi-action, complex content cards
• Data Tables — sortable/striped tables
• Modal Dialogs — using native `` element
• Toast Notifications — dismissible snackbar messages
• Tabs — tabbed content panels
• Badges/Tags — status indicators
• Stats/Metric Cards — dashboard number displays
• Hero Sections — full-width banner areas
• Any custom layout not covered by GCDS

Key Rules

1. Accessibility first — All GCDS components are WCAG 2.1 AA. Keep custom Tailwind components accessible (aria roles, keyboard nav, focus management).
2. Bilingual — Set lang="en" or lang="fr" on `. Use lang-href` on header for language toggle.
3. GC branding — Never modify the GC signature or wordmark. Always use ` and (or GcdsHeader/GcdsFooter` in React).
4. Tailwind prefix — Always use tw- prefix on Tailwind classes to avoid conflicts with GCDS CSS shortcuts.
5. Responsive — Use ` with columns, columns-tablet, columns-desktop for responsive layouts. GCDS CSS shortcuts support xs:, sm:, md:, lg:, xl:` breakpoint prefixes.

References

| File | When to Read | |------|-------------| | [references/components.md](references/components.md) | Building any page — full component inventory with tags, attributes, and examples | | [references/css-shortcuts.md](references/css-shortcuts.md) | Styling custom HTML — utility classes for spacing, typography, layout, colours | | [references/tailwind-gap-components.md](references/tailwind-gap-components.md) | Need Table, Modal, Toast, Tabs, enhanced Card, Hero, Stats, or Badge | | [references/design-tokens.md](references/design-tokens.md) | Writing custom CSS — all colour, spacing, typography token values |

Assets

| File | Purpose | |------|---------| | [assets/basic-page-template.html](assets/basic-page-template.html) | Copy as starting point for any new GC page |

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: cds-yiwei
• Source: cds-yiwei/agent-skills
• License: MIT

Install and usage instructions live in the source repository linked above.