# Sistema di design Ontario

## Sistema di design Ontario Anteprima dell’interfaccia

Apri tutte le fasi, richiudile e vai direttamente a una sezione di supporto.

## 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.

### Colori di testo, superfici e interazioni

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --ontario-colour-greyscale-white | #FFFFFF | 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. |
### Scala di spaziatura

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --ontario-spacing-0 | 0 | Valori di spaziatura pubblicati in rem; spacing-5 equivale a 1.5rem, quindi il suffisso non corrisponde direttamente a un valore in pixel. |
| --ontario-spacing-1 | 0.25rem | Valori di spaziatura pubblicati in rem; spacing-5 equivale a 1.5rem, quindi il suffisso non corrisponde direttamente a un valore in pixel. |
| --ontario-spacing-2 | 0.5rem | Valori di spaziatura pubblicati in rem; spacing-5 equivale a 1.5rem, quindi il suffisso non corrisponde direttamente a un valore in pixel. |
| --ontario-spacing-3 | 0.75rem | Valori di spaziatura pubblicati in rem; spacing-5 equivale a 1.5rem, quindi il suffisso non corrisponde direttamente a un valore in pixel. |
| --ontario-spacing-4 | 1rem | Valori di spaziatura pubblicati in rem; spacing-5 equivale a 1.5rem, quindi il suffisso non corrisponde direttamente a un valore in pixel. |
| --ontario-spacing-5 | 1.5rem | Valori di spaziatura pubblicati in rem; spacing-5 equivale a 1.5rem, quindi il suffisso non corrisponde direttamente a un valore in pixel. |
| --ontario-spacing-6 | 2rem | Valori di spaziatura pubblicati in rem; spacing-5 equivale a 1.5rem, quindi il suffisso non corrisponde direttamente a un valore in pixel. |
| --ontario-spacing-7 | 2.5rem | Valori di spaziatura pubblicati in rem; spacing-5 equivale a 1.5rem, quindi il suffisso non corrisponde direttamente a un valore in pixel. |
| --ontario-spacing-8 | 3rem | Valori di spaziatura pubblicati in rem; spacing-5 equivale a 1.5rem, quindi il suffisso non corrisponde direttamente a un valore in pixel. |
| --ontario-spacing-9 | 4rem | Valori di spaziatura pubblicati in rem; spacing-5 equivale a 1.5rem, quindi il suffisso non corrisponde direttamente a un valore in pixel. |
| --ontario-spacing-10 | 5rem | Valori di spaziatura pubblicati in rem; spacing-5 equivale a 1.5rem, quindi il suffisso non corrisponde direttamente a un valore in pixel. |
### Riferimento per tipografia e griglia

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --ontario-font-sizes-small | 0.875rem | 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. |
## Sistema di design Ontario Guida completa

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

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

Espandi tutto e Comprimi tutto agiscono insieme sui tre pannelli delle fasi. Ogni pannello resta utilizzabile in modo indipendente. L’esempio segue il markup supportato dallo script fissato alla versione specifica, senza mescolarlo al markup più recente del sito, come il comportamento hidden-until-found che lo script fissato non rimuove. Una pagina di documentazione può evolversi indipendentemente da una release installata; l’esempio eseguibile deve corrispondere al pacchetto effettivo.

## 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.

1. Installa il pacchetto complete-styles fissato alla versione specifica.

2. Copia il relativo script di espansione/compressione e salva il file di ingresso completo e CSS.

3. Apri tutti i pannelli, quindi comprimi e riapri una fase tramite il suo link.

4. 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.

```
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()}));
```

Riferimento del codice

- Copia lo script pubblicato usando il comando di configurazione. I link attivano il pulsante nativo per mantenere sincronizzato lo stato ARIA.

### ontario.css — fisarmonica compilata e layout originale

Regole ufficiali della fisarmonica della versione 9.1.0, seguite dalla composizione responsive originale.

```
/* Accordion rules compiled from Ontario 9.1.0 published SCSS. */
.ontario-accordion__button--expand-all:focus,.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009adb;outline:4px solid rgba(0,0,0,0);transition:box-shadow .1s ease-in-out}.ontario-accordion__button{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.ontario-accordion__button{font-size:1.25rem;letter-spacing:.03rem;line-height:1.5;margin:0 0 .75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-accordion__button{font-size:1.5rem;letter-spacing:.0313rem;line-height:1.5}}.ontario-accordions__container{max-width:48rem;width:100%}.ontario-accordion{border-top:2px solid #ccc}.ontario-accordion:last-of-type{border-bottom:2px solid #ccc}.ontario-accordion__controls{display:flex;justify-content:flex-end}.ontario-accordion__button,.ontario-accordion__button--expand-all{background:none;border:0;box-sizing:border-box}.ontario-accordion__button--expand-all{font-size:1rem;margin-bottom:.5rem;color:#06c;cursor:pointer}.ontario-accordion__button--expand-all:focus,.ontario-accordion__button--expand-all:hover{color:#00478f;text-decoration:underline}.ontario-accordion__button--expand-all:active{color:#002142;text-decoration:underline}.ontario-accordion--expand-close-all{display:none}.ontario-accordion__controls--active .ontario-accordion--expand-close-all{display:block}.ontario-accordion__controls--active .ontario-accordion--expand-open-all{display:none}.ontario-accordion__button{display:flex;align-items:flex-start;color:#06c;cursor:pointer;padding:.75rem .5rem;text-align:left;width:100%;margin-bottom:0}.ontario-accordion__button .ontario-accordion__button-icon--close,.ontario-accordion__button .ontario-accordion__button-icon--open{margin-right:.5rem}.ontario-accordion__button .ontario-icon{width:1.75rem;height:1.75rem}.ontario-accordion__button:focus,.ontario-accordion__button:hover{background-color:hsl(0,0%,95%);color:#00478f}.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009adb inset}.ontario-accordion__button:active{color:#002142}.ontario-accordion__content{display:none;padding:.75rem .75rem 2rem .75rem;margin-left:0}@media screen and (min-width: 40em){.ontario-accordion__content{margin-left:2rem}}.ontario-accordion__content *{margin-top:0;max-width:48rem;width:100%}.ontario-accordion__content ul,.ontario-accordion__content ol{max-width:calc(100% - 3rem)}.ontario-accordion__content>:last-child{margin-bottom:0}.ontario-accordion__button-icon--close,.ontario-expander--active .ontario-accordion__button-icon--open{display:none}.ontario-expander--active~.ontario-accordion__content,.ontario-expander--active .ontario-accordion__button-icon--close{display:block}.ontario-accordions__container .ontario-h1,.ontario-accordions__container .ontario-h2,.ontario-accordions__container .ontario-h3,.ontario-accordions__container .ontario-h4,.ontario-accordions__container .ontario-h5,.ontario-accordions__container p,.ontario-accordions__container h1,.ontario-accordions__container h2,.ontario-accordions__container h3,.ontario-accordions__container h4,.ontario-accordions__container h5,.ontario-accordions__container h6{margin:0}

/* Original composition. */
main{max-width:1200px;padding:32px;margin:auto}.kicker{font-size:14px;font-weight:700;letter-spacing:.04em}h1{max-width:24ch}.ontario-lead-statement{max-width:65ch}.layout{display:grid;grid-template-columns:1.7fr 1fr;gap:48px;margin-top:40px}aside{padding:24px;border-top:4px solid #1a1a1a;background:#f2f2f2;align-self:start}aside h2{font-size:26px;line-height:1.35;margin-top:0}aside h3{font-size:20px}.jump{padding-left:24px}.jump li{margin-bottom:16px}.note{font-size:16px;line-height:1.5}.ontario-accordion__content p+ul{margin-top:16px}.ontario-accordion__content ul+p{margin-top:16px}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr;gap:32px}h1{font-size:36px}}
```

Riferimento del codice

- Per questa release fissata alla versione specifica sono necessari sia il tema compilato sia il foglio di stile specifico della fisarmonica.

## 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.

```
npm create vite@latest ontario-guide -- --template vanilla
cd ontario-guide
npm install
npm install @ongov/ontario-design-system-complete-styles@9.1.0
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

```
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.
```

## 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.

- Linee guida per l’accordion Contenuti, markup e modello di espansione.

- Configurazione del pacchetto Ruoli dei pacchetti e scelte di integrazione.

- Sistema cromatico Colori di interazione e semantici.

- Fonte pubblica con versione specifica Stili pubblicati, esportazioni dei token e implementazione della fisarmonica.

## Sistema di design Ontario Risorse correlate

### Poncho

Esamina la griglia a 3 di Bootstrap, i colori semantici delle azioni e i pannelli dei servizi interamente cliccabili di Poncho attraverso un catalogo di attività funzionante.

### Queensland Government sistema di design

Esplora l’implementazione Bootstrap del Queensland attraverso un selettore di risorse illustrato e completo, con ruoli tema reali, stile nativo delle caselle di controllo e un dialogo di revisione accessibile.

### Ripple

Esplora i ruoli cromatici effettivi di Ripple, la scala di spaziatura a 14 livelli e i riferimenti tipografici responsive attraverso una timeline completa per un workshop, con visualizzazione progressiva, indicatore di avanzamento e focus da tastiera sul passaggio successivo.


- [Riferimento per l’implementazione](https://designsystem.ontario.ca/components/detail/accordions.html)
- [Fonte](https://github.com/ongov/ontario-design-system)
- [Riferimento del codice](https://designsystem.ontario.ca/components/detail/accordions.html)
- [Riferimento del codice](https://github.com/ongov/ontario-design-system)
- [Linee guida per l’accordion Contenuti, markup e modello di espansione.](https://designsystem.ontario.ca/components/detail/accordions.html)
- [Configurazione del pacchetto Ruoli dei pacchetti e scelte di integrazione.](https://designsystem.ontario.ca/docs/documentation/develop/npm-packages.html)
- [Sistema cromatico Colori di interazione e semantici.](https://designsystem.ontario.ca/components/detail/colours.html)
- [Fonte pubblica con versione specifica Stili pubblicati, esportazioni dei token e implementazione della fisarmonica.](https://github.com/ongov/ontario-design-system)