Crea una guida articolata in più sezioni in stile Ontario, con tipografia, spaziature e valori cromatici pubblicati, comportamento nativo dell’accordion e codice sorgente completo e corrispondente alla versione.
Ontario 9.1.0, CSS e script per l’accordion pubblicati, font locali inclusi nel pacchetto, contenuti originali e gestore per l’apertura collegata. · Riferimento per l’implementazione
02
Sistema di design Ontario Riferimento di design
Design token di Ontario e complete-styles 9.1.0; percorsi di esportazione effettivi del pacchetto, SCSS dell’accordion e script pubblicato verificati in locale.
Esportazione effettiva dei token 9.1.0. Il componente CSS compilato risolve questi ruoli nei rispettivi valori; importare un token da solo non crea un componente.
--ontario-colour-greyscale-black
#1A1A1A
Esportazione effettiva dei token 9.1.0. Il componente CSS compilato risolve questi ruoli nei rispettivi valori; importare un token da solo non crea un componente.
--ontario-colour-greyscale-greyscale5
#F2F2F2
Esportazione effettiva dei token 9.1.0. Il componente CSS compilato risolve questi ruoli nei rispettivi valori; importare un token da solo non crea un componente.
--ontario-colour-greyscale-greyscale20
#CCCCCC
Esportazione effettiva dei token 9.1.0. Il componente CSS compilato risolve questi ruoli nei rispettivi valori; importare un token da solo non crea un componente.
--ontario-colour-system-link
#0066CC
Esportazione effettiva dei token 9.1.0. Il componente CSS compilato risolve questi ruoli nei rispettivi valori; importare un token da solo non crea un componente.
--ontario-colour-system-link-hover
#00478F
Esportazione effettiva dei token 9.1.0. Il componente CSS compilato risolve questi ruoli nei rispettivi valori; importare un token da solo non crea un componente.
--ontario-colour-system-link-active
#002142
Esportazione effettiva dei token 9.1.0. Il componente CSS compilato risolve questi ruoli nei rispettivi valori; importare un token da solo non crea un componente.
--ontario-colour-system-link-visited
#551A8B
Esportazione effettiva dei token 9.1.0. Il componente CSS compilato risolve questi ruoli nei rispettivi valori; importare un token da solo non crea un componente.
--ontario-colour-system-focus
#009ADB
Esportazione effettiva dei token 9.1.0. Il componente CSS compilato risolve questi ruoli nei rispettivi valori; importare un token da solo non crea un componente.
--ontario-colour-system-alert
#CD0000
Esportazione effettiva dei token 9.1.0. Il componente CSS compilato risolve questi ruoli nei rispettivi valori; importare un token da solo non crea un componente.
--ontario-colour-system-success
#118847
Esportazione effettiva dei token 9.1.0. Il componente CSS compilato risolve questi ruoli nei rispettivi valori; importare un token da solo non crea un componente.
--ontario-colour-system-information
#1080A6
Esportazione effettiva dei token 9.1.0. Il componente CSS compilato risolve questi ruoli nei rispettivi valori; importare un token da solo non crea un componente.
Valore del token pubblicato; i valori della griglia senza unità descrivono il sistema di origine e vanno interpretati in base all’implementazione della griglia pertinente.
--ontario-font-sizes-standard-body-text
1rem
Valore del token pubblicato; i valori della griglia senza unità descrivono il sistema di origine e vanno interpretati in base all’implementazione della griglia pertinente.
--ontario-font-sizes-large
1.25rem
Valore del token pubblicato; i valori della griglia senza unità descrivono il sistema di origine e vanno interpretati in base all’implementazione della griglia pertinente.
--ontario-font-sizes-x-large
1.5rem
Valore del token pubblicato; i valori della griglia senza unità descrivono il sistema di origine e vanno interpretati in base all’implementazione della griglia pertinente.
--ontario-breakpoints-small
40em
Valore del token pubblicato; i valori della griglia senza unità descrivono il sistema di origine e vanno interpretati in base all’implementazione della griglia pertinente.
--ontario-breakpoints-medium
73em
Valore del token pubblicato; i valori della griglia senza unità descrivono il sistema di origine e vanno interpretati in base all’implementazione della griglia pertinente.
--ontario-grid-columns-total-columns
12
Valore del token pubblicato; i valori della griglia senza unità descrivono il sistema di origine e vanno interpretati in base all’implementazione della griglia pertinente.
--ontario-grid-columns-row-width
1152
Valore del token pubblicato; i valori della griglia senza unità descrivono il sistema di origine e vanno interpretati in base all’implementazione della griglia pertinente.
--ontario-grid-columns-column-gutter
32
Valore del token pubblicato; i valori della griglia senza unità descrivono il sistema di origine e vanno interpretati in base all’implementazione della griglia pertinente.
03
Sistema di design Ontario Guida completa
Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.
DESIGN-ontario.md
Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.
Sistema di design Ontario Esportazioni del pacchetto e stili dei componenti
Usa in modo consapevole il pacchetto degli stili completo
L’esempio fissa la versione @ongov/ontario-design-system-complete-styles 9.1.0 e usa lo script di espansione/compressione pubblicato. È un’implementazione HTML/CSS, non il runtime separato dei web component Ontario. La mappa delle esportazioni del pacchetto espone il tema compilato tramite styles/css/compiled/ontario-theme.min.css; un deep import ipotizzato con un prefisso dist aggiuntivo non funziona nei bundler moderni.
Includi le regole dell’accordion
Nel pacchetto 9.1.0 esaminato, il tema compilato non include i selettori dell’accordion usati in questo esempio. La pagina include quindi le regole compilate dal file ontario-accordion.scss del pacchetto stesso, fornite in CSS. Lo script viene copiato dalla directory dist/scripts pubblicata, perché quel percorso JavaScript interno non è esportato. Sono requisiti concreti di compilazione, non ritocchi estetici facoltativi.
Sistema di design Ontario Tipografia e gerarchia Ontario
Mantieni l’abbinamento tipografico previsto
Il tema pubblicato fornisce Raleway Modified per i titoli e Open Sans per il testo corrente. L’anteprima include i pesi normali 400 e 700 usati dalla pagina. In questo modo si mantengono le forme distintive dei titoli senza dipendere da font remoti. La tipografia va esaminata dopo il caricamento dei font: il rendering con i font di fallback può modificare sia le interruzioni di riga sia il peso relativo dei titoli della fisarmonica.
Rendi le fasi facili da consultare
Il titolo introduce un’attività, il testo introduttivo spiega come usare la guida e i tre titoli delle fasi presentano una sequenza chiara. I paragrafi di supporto e gli elenchi sono all’interno di ciascun pannello. La nota adiacente rimane visibile perché le informazioni essenziali su come unirsi e partecipare non dovrebbero dipendere dalla scoperta di un pannello nascosto. La gerarchia fa parte del modello dei contenuti, ma non è un motivo per trasformare ogni frase in un titolo.
Sistema di design Ontario Ruoli dei colori e affordance dei componenti
Assegna funzioni diverse a link e focus
Il colore dei link esportato è #0066CC, con colori distinti per gli stati hover, active e visited. Il focus usa #009ADB. La fisarmonica combina un’etichetta visibile, un’icona direzionale e lo stato di espansione: il solo testo blu non ne spiega il comportamento. Il bordo grigio distingue le fasi senza trasformare ogni paragrafo in una scheda.
Usa la progressione di spaziatura pubblicata
La tabella di spaziatura va da zero a cinque rem, con passaggi intermedi denominati. L’esempio applica un layout a due colonne definito appositamente, insieme alle regole ufficiali del componente. Il punto di passaggio a 760px è una scelta compositiva per questa guida incorporata e non viene presentato come un nuovo breakpoint di Ontario. I breakpoint ufficiali sono elencati separatamente nella tabella di riferimento.
Sistema di design Ontario Struttura e stato della fisarmonica
Collega ogni pulsante ai suoi contenuti
Ogni fase ha un titolo che contiene un vero pulsante. Il suo aria-controls punta a una sezione di contenuto con un ID univoco, mentre aria-expanded indica se la sezione è aperta. Il contenuto fa riferimento al pulsante tramite aria-labelledby. Lo script nativo coordina le classi del componente e aria-hidden quando il pannello si apre e si chiude. Un ID duplicato interromperebbe questa relazione anche se il layout visivo sembrasse corretto.
Usa ID univoci per pulsanti e contenuti.
Mantieni il titolo attorno a un vero pulsante interattivo.
Adatta il markup al comportamento di visibilità dello script con versione specifica.
Mantieni sincronizzati i controlli di tutti i pannelli
Sistema di design Ontario Apertura tramite link e contenuti essenziali
Apri una fase tramite il suo vero pulsante
I link della barra laterale identificano una fase e attivano il relativo pulsante nativo quando è chiusa. Dopo l’apertura, portano il focus sul pulsante. In questo modo l’attributo expanded del pulsante, la classe del titolo e la visibilità del contenuto cambiano nella stessa transizione. Il gestore aggiuntivo è codice dell’applicazione; è riportato per intero affinché sia possibile riprodurne il comportamento.
Scrivi informazioni di supporto che valga la pena espandere
Le tre fasi redatte per l’esempio riguardano la preparazione, i materiali e il seguito di un piccolo workshop. Ognuna contiene azioni specifiche e un paragrafo che spiega i limiti dell’esempio. Un invito reale deve comunque presentare direttamente lo scopo, le modalità di accesso e le informazioni per partecipare. Questo schema organizza una guida più lunga: non dovrebbe nascondere informazioni essenziali solo per far sembrare più corta la pagina.
Sistema di design Ontario Codice sorgente completo e verifica
Ricrea l’esempio con versione specifica
Crea un progetto Vite vanilla, installa il pacchetto complete-styles fissato alla versione specifica e copia il relativo script di espansione/compressione in src. Salva i file main.js e ontario.css forniti, mantenendo l’elemento radice di montaggio. CSS include le regole ufficiali della fisarmonica compilate per questa release, seguite da regole di layout originali chiaramente indicate. Per questa implementazione HTML non servono né la registrazione di componenti né un servizio backend.
Installa il pacchetto complete-styles fissato alla versione specifica.
Copia il relativo script di espansione/compressione e salva il file di ingresso completo e CSS.
Apri tutti i pannelli, quindi comprimi e riapri una fase tramite il suo link.
Controlla il focus da tastiera, gli attributi expanded e il layout per smartphone.
Verifica il comportamento dei link e dei gruppi
Prova ad aprire ogni fase, a comprimerle tutte e poi a usare un link della barra laterale per riaprire la fase centrale. Verifica che lo stato expanded del pulsante corrisponda alla visibilità del contenuto. Ripeti alla larghezza di uno smartphone, dove la barra laterale si trova sotto la guida. Il controllo locale verifica inoltre che gli asset dei font vengano caricati, che la pagina non abbia overflow orizzontale e che lo script nativo non generi errori nel browser.
Sistema di design Ontario Esempi di componenti del sistema di progettazione
main.js — guida completa per il workshop
Contenuti originali completi, importazione dello script pubblicato e comportamento di apertura tramite link.
javascript
import '@ongov/ontario-design-system-complete-styles/styles/css/compiled/ontario-theme.min.css';
import './ontario-expand-collapse.js';
import './ontario.css';
const topics=[['Plan the session','Make the purpose clear before people arrive.',['Publish the topic, duration and format in plain language.','Explain how participants can ask about access needs.','Tell people whether any preparation is optional or required.'],'In this sample workshop, participants discuss one familiar interface and identify one improvement. No personal information or application account is needed.'],['Prepare the materials','Offer content in a form people can use during and after the session.',['Use a meaningful heading structure in documents.','Give diagrams a concise written explanation.','Provide an accessible alternative to an activity that depends on dragging or precise pointer movement.'],'A simple agenda and an editable notes document are enough for this authored example. A real organizer should confirm the tools and formats with participants.'],['Follow up clearly','Make the next action explicit without overstating what has been agreed.',['Separate decisions from ideas that still need investigation.','State who owns any agreed follow-up.','Share notes through the channel agreed with participants.'],'This local example does not email participants or store a registration. It demonstrates the relationship between persistent guidance and expandable supporting content.']];
const icon=(dir)=>`<svg class="ontario-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="${dir==='up'?'M6 15l6-6 6 6':'M6 9l6 6 6-6'}" fill="none" stroke="currentColor" stroke-width="2.4"/></svg>`;
document.getElementById('root').innerHTML=`<main><p class="kicker">ONTARIO DESIGN SYSTEM / ORIGINAL CONTENT STUDY</p><h1>Run an inclusive workshop</h1><p class="ontario-lead-statement">Use this sample guide to prepare a small design discussion. Expand a stage for supporting details, or open all stages to read them together.</p><div class="layout"><section aria-labelledby="guide-heading"><h2 id="guide-heading">Workshop stages</h2><div class="ontario-accordions__container"><div class="ontario-accordion__controls"><button class="ontario-accordion__button--expand-all" aria-expanded="false"><span class="ontario-accordion--expand-open-all">Expand all</span><span class="ontario-accordion--expand-close-all">Collapse all</span></button></div>${topics.map(([title,intro,items,note],i)=>`<div class="ontario-accordion" id="stage-${i}"><h3 class="ontario-accordion-heading"><button class="ontario-accordion__button" id="stage-button-${i}" aria-controls="stage-content-${i}" aria-expanded="false" data-toggle="ontario-collapse"><span class="ontario-accordion__button-icon--close">${icon('up')}</span><span class="ontario-accordion__button-icon--open">${icon('down')}</span>${title}</button></h3><section class="ontario-accordion__content" id="stage-content-${i}" aria-labelledby="stage-button-${i}" aria-hidden="true" data-toggle="ontario-expander-content"><p>${intro}</p><ul>${items.map(x=>'<li>'+x+'</li>').join('')}</ul><p>${note}</p></section></div>`).join('')}</div></section><aside><h2>Keep the essentials visible</h2><p>Session purpose, access arrangements and joining instructions belong in the main invitation. Do not hide them inside a collapsed guide.</p><h3>Jump to a stage</h3><ul class="jump">${topics.map(([title],i)=>`<li><a class="stage-link" href="#stage-${i}">${title}</a></li>`).join('')}</ul><p class="note">Published Ontario 9.1.0 styles and expand/collapse script, with original content and composition. This is not an official service page.</p></aside></div></main>`;
// Drive linked opening through the native button so its ARIA state stays synchronized.
document.querySelectorAll(".stage-link").forEach(link=>link.addEventListener("click",()=>{const button=document.querySelector(link.hash+" .ontario-accordion__button");if(button.getAttribute("aria-expanded")!=="true")button.click();button.focus()}));
Per questa release fissata alla versione specifica sono necessari sia il tema compilato sia il foglio di stile specifico della fisarmonica.
04
Sistema di design Ontario Configurazione dell’agente AI
Punto di partenza per l’implementazione
L’anteprima esegue lo stesso script pubblicato per la fisarmonica, usando font locali. L’esempio non carica la libreria separata dei web component.
sh
npm create vite@latest ontario-guide -- --template vanilla
cd ontario-guide
npm install
npm install @ongov/[email protected]
cp node_modules/@ongov/ontario-design-system-complete-styles/dist/scripts/ontario-expand-collapse.js src/ontario-expand-collapse.js
# Replace src/main.js and add src/ontario.css. Keep <div id="root"></div>.
npm run dev
Un prompt per il tuo progetto
Prompt per l’agente
Crea la guida per il workshop Ontario con complete-styles 9.1.0 e il relativo script per la fisarmonica. Includi il CSS specifico della fisarmonica, i font autentici Raleway Modified/Open Sans, ID accessibili per pulsanti e contenuti e un comportamento sincronizzato di espansione/compressione. Mantieni visibili le informazioni essenziali e fai passare i link delle fasi dai pulsanti nativi.
05
Sistema di design Ontario Fonti e ambito
Una guida per un workshop redatta con OpenDesign, che usa gli stili Ontario 9.1.0 e lo script pubblicato per espandere e comprimere i pannelli. I contenuti e la composizione della pagina sono originali; non si tratta di una pagina ufficiale di un servizio.
