Esplora la tipografia, i token semantici e i componenti web nativi di GC Design System con una guida completa e consultabile per la preparazione, dotata di sezioni a scomparsa e gestione degli stati vuoti.
Componenti attuali e ambito del sistema di progettazione sistema di design Canada.ca
Usa lo spazio dei nomi attuale
GC Design System è il sistema di componenti usato in questa risorsa Canada.ca. L’esempio usa la versione 1.6.0 di @gcds-core/components e registra i custom element autonomi input, details e button. Gli esempi meno recenti potrebbero usare lo spazio dei nomi @cdssnc. Attieniti alla versione del pacchetto effettivamente installata, senza mescolare codice di registrazione di release diverse.
Tieni lo studio dei contenuti separato da un servizio
L’esempio presenta sei argomenti di preparazione redatti. Non include il marchio del Governo del Canada, integrazioni per le prenotazioni né affermazioni sui documenti obbligatori. Il suo scopo è mostrare un pattern di divulgazione ricercabile e realistico. Riutilizzare i componenti non significa che un’applicazione sia un servizio ufficiale o che i suoi contenuti soddisfino tutti i requisiti di Canada.ca.
Tipografia e ritmo di lettura sistema di design Canada.ca
Carica entrambe le famiglie di caratteri
I titoli usano Lato e il testo corrente Noto Sans. Il ruolo pubblicato per il testo desktop è 1.25rem con un’interlinea del 160%; il riferimento esportato per la larghezza di lettura è 65ch. Questi valori creano un ritmo di lettura decisamente più arioso rispetto a una dashboard compatta. L’anteprima locale incorpora i file dei caratteri pubblicati, così un errore nel caricamento di un font esterno non può modificare il risultato senza che te ne accorga.
Rispetta l’intera dichiarazione abbreviata del font
La tabella dei token include la dichiarazione abbreviata effettiva del font di CSS, non solo le dimensioni nominali in pixel. Peso, interlinea e famiglia sono tutti importanti. Il titolo principale usa una breve sottolineatura rossa come dettaglio compositivo originale ispirato a Canada.ca; la larghezza di 72px non è presentata come token di spaziatura generale di GC. A viewport ridotta, il layout passa a una colonna mantenendo leggibile il testo.
Colore semantico e comportamento del focus sistema di design Canada.ca
Usa i ruoli pubblici per gli stati significativi
Il testo principale è #333, quello secondario è #595959 e il ruolo per la superficie blu attenuata è #26374a. Nell’esportazione di CSS, link, focus e stato di errore hanno ruoli distinti. Un link non si distingue solo cambiandone il colore: anche l’elemento details nativo offre un’indicazione visiva e uno stato di espansione accessibile.
Non rimuovere l’indicatore di focus visibile
L’input e i pulsanti nativi forniscono il comportamento di focus dei rispettivi componenti. CSS gestisce il layout circostante senza accedere agli shadow root per rimuovere i contorni. Il ripristino riporta il focus al campo di ricerca, così chi usa la tastiera può affinare subito la query. Lo Shadow DOM modifica l’applicazione delle regole di stile e visibilità personalizzate: esamina quindi il componente renderizzato invece di supporre che i selettori degli elementi ordinari coprano ogni stato.
Contenuti dei dettagli e priorità delle informazioni sistema di design Canada.ca
Riserva gli elementi espandibili alle spiegazioni di supporto
Ogni gcds-details nativo riceve details-title e il testo di supporto nel suo slot predefinito. Le istruzioni essenziali restano nella barra laterale visibile. Orario, indirizzo o requisito di un appuntamento reale non devono essere disponibili solo dopo aver espanso un pannello. I sei argomenti di esempio sono volutamente informativi: non raccolgono dati identificativi né simulano una prenotazione completata.
Mantieni visibili le informazioni essenziali sul servizio senza richiedere l’espansione.
Usa un titolo breve e specifico per l’elemento details.
Evita elementi espandibili annidati che rendono difficile trovare i contenuti.
Mantieni lo stato degli elementi espandibili durante il filtraggio
Sistema di design Canada.ca Stato della ricerca e recupero quando non ci sono risultati
Ascolta l'evento personalizzato documentato
gcds-input richiede label, input-id e name. Il suo evento gcdsInput fornisce il nuovo valore in event.detail. L'applicazione confronta la query, dopo aver rimosso gli spazi iniziali e finali e convertito il testo in minuscolo, con i titoli e il corpo degli argomenti. Un messaggio di stato aggiornato dinamicamente comunica il numero di risultati visibili; se non ci sono corrispondenze, mostra un messaggio utile per riprendere la ricerca invece di lasciare un'area vuota senza spiegazioni.
Fai in modo che il ripristino completi l'intera transizione
Il pulsante secondario nativo svuota il valore del componente, ripristina tutte e sei le voci e porta il focus sull'input interno. Non modifica l'eventuale argomento già aperto dal lettore. Questa separazione rende prevedibili lo stato della query e quello di lettura. Una ricerca di produzione su un set di dati remoto richiederebbe anche regole per il caricamento, gli errori delle richieste e l'ordinamento dei risultati; per questo filtro locale a sei voci non è necessario dichiarare nessuna di queste funzionalità.
Sistema di design Canada.ca Integrazione completa JavaScript
Ricrea l'esempio funzionante
Crea un progetto vanilla con Vite, installa la versione bloccata del pacchetto del componente e sostituisci il file d'ingresso con il seguente JavaScript completo. Salva canada.css accanto al file e mantieni un elemento root per il montaggio. I punti d'ingresso degli elementi personalizzati registrano le dipendenze necessarie; il pacchetto CSS fornisce il livello dei token. Il sorgente include il set di dati completo, la registrazione, il filtro e il comportamento di ripristino.
Installa la versione bloccata del pacchetto in un progetto vanilla con Vite.
Salva il file d'ingresso completo e canada.css, mantenendo l'elemento root per il montaggio.
Cerca una parola senza corrispondenze e verifica che venga mostrato il messaggio di recupero.
Ripristina, espandi un argomento e applica di nuovo un filtro per verificare che lo stato di lettura venga mantenuto.
Nascondi i contenitori dei risultati senza perdere lo stato degli elementi espandibili
Inserisci ogni gcds-details in un normale contenitore e, quando applichi un filtro, attiva o disattiva lo stato hidden del contenitore. In caso contrario, le regole display dell'elemento personalizzato potrebbero vanificare le ipotesi fatte sui selettori generici CSS. Mantieni le istanze montate affinché un argomento espanso riappaia nello stesso stato quando la query viene cancellata.
La ricerca e l'espansione sono controlli distinti. Leggi la query da event.detail dell'evento gcdsInput, comunica il numero di risultati e lascia che l'elemento details nativo gestisca il proprio stato di espansione. Il ripristino deve aggiornare il valore del componente oltre al modello della query, quindi riportare il focus sull'input; ricreare l'intera area dei risultati farebbe perdere al lettore la posizione raggiunta.
Sistema di design Canada.ca Esempi di componenti del sistema di design
main.js — filtro nativo completo degli argomenti
File d'ingresso completo con registrazione del componente, argomenti definiti nel codice, filtro, mantenimento dello stato di espansione e ripristino.
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();
Salva come src/main.js insieme a un elemento root per il montaggio. Il pacchetto pubblicato CSS carica gli URL predefiniti dei font; questa anteprima locale incorpora gli stessi font pubblici.
canada.css — impaginazione reattiva dei contenuti
Layout originale della pagina attorno agli stili del componente nativo.
Il punto di interruzione del layout e la geometria della sottolineatura del titolo sono scelte specifiche dell'esempio, non token ufficiali aggiuntivi.
04
Sistema di design Canada.ca Configurazione dell'agente AI
Punto di partenza per l’implementazione
L'anteprima locale esegue gli elementi personalizzati nella versione bloccata; non è richiesto alcun servizio remoto né alcuna credenziale.
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
Un prompt per il tuo progetto
Prompt per l’agente
Realizza la guida di preparazione con sei argomenti usando GC Design System 1.6.0. Carica la tipografia e i token CSS originali, usa i componenti nativi input/details/button, mantieni lo stato di espansione durante l'applicazione dei filtri, comunica il numero di risultati e implementa un ripristino completo. Mantieni visibili i contenuti essenziali e distingui le spiegazioni di esempio dai requisiti ufficiali del servizio.
05
Sistema di design Canada.ca Fonti e ambito
Studio applicativo per Canada.ca realizzato con OpenDesign e GC Design System 1.6.0. Gli argomenti di esempio sono indicazioni fittizie, non requisiti governativi né un servizio ufficiale di prenotazione.
