Explore GC Design System typography, semantic tokens and native web components through a complete searchable preparation guide with disclosure and empty-state behavior.
Canada.ca Design System Current Components and Package Scope
Use the current namespace
GC Design System is the component system used in this Canada.ca resource. The specimen pins @gcds-core/components 1.6.0 and registers the standalone input, details and button custom elements. Older examples may use the @cdssnc namespace. Follow the package version actually installed rather than mixing registration code from a different release.
Keep the content study separate from a service
The example presents six authored preparation topics. It has no Government of Canada signature, booking integration or mandatory-document claims. Its purpose is to demonstrate a real searchable disclosure pattern. Reusing the components does not establish that an application is an official service or that its content meets every Canada.ca requirement.
Canada.ca Design System Typography and Reading Rhythm
Load both font families
Headings use Lato and ordinary text uses Noto Sans. The published desktop body role is 1.25rem with 160% line height; the exported readable-width reference is 65ch. Those values create a substantially more open reading rhythm than a compact dashboard. The local preview embeds the published font files so a failed external font request cannot silently change the result.
Respect the complete font shorthand
The token table includes the actual CSS font shorthand, not just nominal pixel sizes. Weight, line height and family matter together. The main title uses a short red underline as an authored Canada.ca-inspired composition detail; its 72px width is not presented as a general GC spacing token. At a narrow viewport the layout becomes one column while retaining readable body text.
Canada.ca Design System Semantic Color and Focus Behavior
Use public roles for meaningful states
Primary text is #333, secondary text is #595959, and the muted blue surface role is #26374a. Links, focus and danger have distinct roles in the exported CSS. A link is not identified solely by changing its color: the native details disclosure also has an affordance and an accessible expanded state.
Do not remove the visible focus treatment
The native input and buttons supply their component focus behavior. Application CSS handles the surrounding layout without reaching into shadow roots to erase outlines. Reset returns focus to the search field so a keyboard user can immediately refine the query. Shadow DOM changes how custom styling and visibility rules apply, so inspect the rendered component instead of assuming ordinary element selectors cover every state.
Canada.ca Design System Details Content and Information Priority
Reserve disclosure for supporting explanations
Each native gcds-details receives details-title and supporting text in its default slot. Essential instructions remain in the visible sidebar. A real appointment time, address or requirement must not be available only after expanding a panel. The six sample topics are deliberately informational; they do not collect identity details or simulate a completed booking.
Keep critical service information visible without expansion.
Use a short, specific details title.
Avoid nested disclosures that make content difficult to discover.
Preserve disclosure state across filtering
Canada.ca Design System Search State and Empty Recovery
Listen to the documented custom event
gcds-input requires label, input-id and name. Its gcdsInput event provides the new value in event.detail. The application compares a trimmed, lowercased query against topic titles and body text. A live status reports the visible count; no match reveals a useful recovery message instead of leaving an unexplained blank region.
Make reset a complete transition
The secondary native button clears the component value, restores all six entries and focuses the internal input. It does not reset which disclosure a reader previously opened. This separation keeps query state and reading state predictable. A production search over a remote dataset would additionally need loading, request failure and result-order rules; this local six-item filter needs none of those claims.
Canada.ca Design System Complete JavaScript Integration
Reproduce the working specimen
Create a Vite vanilla project, install the pinned component package, and replace the entry with the full JavaScript below. Save canada.css beside it and keep a root mount element. Direct custom-element entrypoints register their required dependencies; the package CSS supplies the token layer. The source contains the full dataset, registration, filtering and reset behavior.
Install the pinned package in a Vite vanilla project.
Save the full entry and canada.css, keeping the root mount.
Search for a word with no match and verify the recovery message.
Reset, expand a topic and filter again to check reading-state retention.
Hide result wrappers without destroying disclosure state
Place each gcds-details inside an ordinary wrapper and toggle that wrapper’s hidden state when filtering. A custom element’s own display rules can otherwise defeat assumptions made by generic CSS selectors. Keep the instances mounted so an expanded topic returns in the same state when the query is cleared.
Search and disclosure are separate controls. Read the query from gcdsInput event.detail, announce the resulting count, and leave the native details element responsible for its own expanded state. Reset should update the component value as well as the query model, then restore input focus; recreating the whole result region would discard the reader’s position.
Canada.ca Design System Design System Component Examples
main.js — complete native topic filter
Full entry with component registration, authored topics, filtering, disclosure retention and reset.
javascript
import {defineCustomElement as input} from '@gcds-core/components/dist/components/gcds-input.js';
import {defineCustomElement as details} from '@gcds-core/components/dist/components/gcds-details.js';
import {defineCustomElement as button} from '@gcds-core/components/dist/components/gcds-button.js';
import '@gcds-core/components/dist/gcds/gcds.css';
import './canada.css';
input();details();button();
document.getElementById('root').innerHTML=`<main><p class="eyebrow">GC DESIGN SYSTEM / ORIGINAL CONTENT STUDY</p><h1>Prepare for an appointment</h1><p class="lead">Find a preparation topic in this fictional service guide. These are sample explanations, not government requirements.</p><div class="search-row"><gcds-input id="filter" input-id="topic-search" name="topic-search" label="Filter preparation topics" hint="Try time, access or documents." type="search"></gcds-input><gcds-button id="reset" button-role="secondary" type="button">Reset filter</gcds-button></div><div class="layout"><section aria-labelledby="topic-heading"><h2 id="topic-heading">Preparation topics</h2><p id="count" role="status"></p><div id="topics"></div><div id="empty" hidden><h3>No matching topic</h3><p>Try a shorter word or reset the filter.</p></div></section><aside><h2>Before you continue</h2><p>Important information stays visible. Expandable details are reserved for supporting explanations.</p><ol><li>Confirm the purpose of the appointment with the real service.</li><li>Check its current requirements and contact information.</li><li>Ask for help if an instruction is unclear.</li></ol><p class="small">Native GC Design System components 1.6.0. No official identity marks or real service claims are used.</p></aside></div></main>`;
const topics=[['Confirm the time','Check the time and time zone shown in a real booking confirmation. This sample does not contain a live appointment.'],['Review the location','A real service should provide an address or joining instructions. A location belongs in visible booking details, not only inside a collapsed panel.'],['Plan access needs','Ask the service about accessibility arrangements through its official contact route. This sample demonstrates disclosure behavior and does not promise a particular accommodation.'],['Check documents','Follow the actual service’s published document requirements. This authored example intentionally does not invent a list of mandatory identity documents.'],['Keep a reference','If the service provides a booking reference, keep it with your confirmation. Do not paste personal reference numbers into this public specimen.'],['Prepare questions','Write down what you want to understand. In a real service, clear preparation content can reduce the need to remember questions during the appointment.']];const $=id=>document.getElementById(id);const entries=topics.map(([title,text])=>{const el=document.createElement('gcds-details');el.setAttribute('details-title',title);const p=document.createElement('p');p.textContent=text;el.append(p);const wrapper=document.createElement('div');wrapper.append(el);$('topics').append(wrapper);return{el,wrapper,title,text}});function render(q=''){let count=0;for(const item of entries){item.wrapper.hidden=!(item.title+' '+item.text).toLowerCase().includes(q.trim().toLowerCase());if(!item.wrapper.hidden)count++}$('count').textContent=count+' of '+topics.length+' sample topics';$('empty').hidden=count>0}$('filter').addEventListener('gcdsInput',e=>render(e.detail));$('reset').addEventListener('click',()=>{$('filter').value='';render();$('filter').shadowRoot.querySelector('input')?.focus()});render();
The layout breakpoint and title underline geometry are specimen decisions, not additional official tokens.
04
Canada.ca Design System Agent Setup
Implementation Starting Point
The local preview runs the pinned custom elements; no remote service or credential is required.
sh
npm create vite@latest gc-topics -- --template vanilla
cd gc-topics
npm install
npm install @gcds-core/[email protected]
# Replace src/main.js and add src/canada.css; keep <div id="root"></div>.
npm run dev
A Prompt for Your Project
Agent Prompt
Build the six-topic preparation guide with GC Design System 1.6.0. Load the genuine typography and token CSS, use native input/details/button components, retain disclosure state across filters, announce result count and provide complete reset behavior. Keep essential content visible and distinguish sample explanations from official service requirements.
05
Canada.ca Design System Sources and Scope
An OpenDesign-authored Canada.ca application study using GC Design System 1.6.0. The sample topics are fictional guidance, not government requirements or an official booking service.
