# Sistema di design NSW

## Anteprima dell’interfaccia sistema di design NSW

Passa da una scheda all’altra con il mouse o la tastiera, mantenendo un elenco di lettura locale.

## Riferimento di progettazione sistema di design NSW

Esportazioni e implementazione Tabs effettive di nsw-design-system 3.27.0 CSS, con font Public Sans locali.

### Ruoli del brand e dei colori neutri

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --nsw-brand-dark | #002664 | Tema predefinito effettivo della versione 3.27.0. Text-light indica testo chiaro per superfici scure, non testo a bassa enfasi su sfondo bianco. |
| --nsw-brand-light | #cbedfd | Tema predefinito effettivo della versione 3.27.0. Text-light indica testo chiaro per superfici scure, non testo a bassa enfasi su sfondo bianco. |
| --nsw-brand-supplementary | #146cfd | Tema predefinito effettivo della versione 3.27.0. Text-light indica testo chiaro per superfici scure, non testo a bassa enfasi su sfondo bianco. |
| --nsw-brand-accent | #d7153a | Tema predefinito effettivo della versione 3.27.0. Text-light indica testo chiaro per superfici scure, non testo a bassa enfasi su sfondo bianco. |
| --nsw-brand-accent-light | #ffe6ea | Tema predefinito effettivo della versione 3.27.0. Text-light indica testo chiaro per superfici scure, non testo a bassa enfasi su sfondo bianco. |
| --nsw-grey-01 | #22272b | Tema predefinito effettivo della versione 3.27.0. Text-light indica testo chiaro per superfici scure, non testo a bassa enfasi su sfondo bianco. |
| --nsw-grey-02 | #495054 | Tema predefinito effettivo della versione 3.27.0. Text-light indica testo chiaro per superfici scure, non testo a bassa enfasi su sfondo bianco. |
| --nsw-grey-03 | #cdd3d6 | Tema predefinito effettivo della versione 3.27.0. Text-light indica testo chiaro per superfici scure, non testo a bassa enfasi su sfondo bianco. |
| --nsw-grey-04 | #ebebeb | Tema predefinito effettivo della versione 3.27.0. Text-light indica testo chiaro per superfici scure, non testo a bassa enfasi su sfondo bianco. |
| --nsw-off-white | #f2f2f2 | Tema predefinito effettivo della versione 3.27.0. Text-light indica testo chiaro per superfici scure, non testo a bassa enfasi su sfondo bianco. |
| --nsw-text-dark | #22272b | Tema predefinito effettivo della versione 3.27.0. Text-light indica testo chiaro per superfici scure, non testo a bassa enfasi su sfondo bianco. |
| --nsw-text-light | #fff | Tema predefinito effettivo della versione 3.27.0. Text-light indica testo chiaro per superfici scure, non testo a bassa enfasi su sfondo bianco. |
### Coppie di colori per gli stati

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --nsw-status-success | #008a07 | Abbina il colore significativo dello stato al ruolo dello sfondo e a una spiegazione testuale leggibile. |
| --nsw-status-success-bg | #e5f6e6 | Abbina il colore significativo dello stato al ruolo dello sfondo e a una spiegazione testuale leggibile. |
| --nsw-status-info | #2e5299 | Abbina il colore significativo dello stato al ruolo dello sfondo e a una spiegazione testuale leggibile. |
| --nsw-status-info-bg | #eaedf4 | Abbina il colore significativo dello stato al ruolo dello sfondo e a una spiegazione testuale leggibile. |
| --nsw-status-warning | #c95000 | Abbina il colore significativo dello stato al ruolo dello sfondo e a una spiegazione testuale leggibile. |
| --nsw-status-warning-bg | #fbeee5 | Abbina il colore significativo dello stato al ruolo dello sfondo e a una spiegazione testuale leggibile. |
| --nsw-status-error | #b81237 | Abbina il colore significativo dello stato al ruolo dello sfondo e a una spiegazione testuale leggibile. |
| --nsw-status-error-bg | #f7e7eb | Abbina il colore significativo dello stato al ruolo dello sfondo e a una spiegazione testuale leggibile. |
### Tipografia e raggio

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --nsw-font-family | "Public Sans",sans-serif | Riferimento tipografico responsive pubblicato e ruolo condiviso per gli angoli. Una coppia di dimensioni tipografiche per dispositivi mobili e desktop non costituisce una famiglia di font distinta. |
| --nsw-font-size | 16px | Riferimento tipografico responsive pubblicato e ruolo condiviso per gli angoli. Una coppia di dimensioni tipografiche per dispositivi mobili e desktop non costituisce una famiglia di font distinta. |
| --nsw-font-normal | 400 | Riferimento tipografico responsive pubblicato e ruolo condiviso per gli angoli. Una coppia di dimensioni tipografiche per dispositivi mobili e desktop non costituisce una famiglia di font distinta. |
| --nsw-font-bold | 700 | Riferimento tipografico responsive pubblicato e ruolo condiviso per gli angoli. Una coppia di dimensioni tipografiche per dispositivi mobili e desktop non costituisce una famiglia di font distinta. |
| --nsw-font-size-md-mobile | 1.125rem | Riferimento tipografico responsive pubblicato e ruolo condiviso per gli angoli. Una coppia di dimensioni tipografiche per dispositivi mobili e desktop non costituisce una famiglia di font distinta. |
| --nsw-font-size-md-desktop | 1.25rem | Riferimento tipografico responsive pubblicato e ruolo condiviso per gli angoli. Una coppia di dimensioni tipografiche per dispositivi mobili e desktop non costituisce una famiglia di font distinta. |
| --nsw-font-size-lg-mobile | 1.375rem | Riferimento tipografico responsive pubblicato e ruolo condiviso per gli angoli. Una coppia di dimensioni tipografiche per dispositivi mobili e desktop non costituisce una famiglia di font distinta. |
| --nsw-font-size-lg-desktop | 1.5rem | Riferimento tipografico responsive pubblicato e ruolo condiviso per gli angoli. Una coppia di dimensioni tipografiche per dispositivi mobili e desktop non costituisce una famiglia di font distinta. |
| --nsw-font-size-xl-mobile | 1.75rem | Riferimento tipografico responsive pubblicato e ruolo condiviso per gli angoli. Una coppia di dimensioni tipografiche per dispositivi mobili e desktop non costituisce una famiglia di font distinta. |
| --nsw-font-size-xl-desktop | 2rem | Riferimento tipografico responsive pubblicato e ruolo condiviso per gli angoli. Una coppia di dimensioni tipografiche per dispositivi mobili e desktop non costituisce una famiglia di font distinta. |
| --nsw-font-size-xxl-mobile | 2.25rem | Riferimento tipografico responsive pubblicato e ruolo condiviso per gli angoli. Una coppia di dimensioni tipografiche per dispositivi mobili e desktop non costituisce una famiglia di font distinta. |
| --nsw-font-size-xxl-desktop | 3rem | Riferimento tipografico responsive pubblicato e ruolo condiviso per gli angoli. Una coppia di dimensioni tipografiche per dispositivi mobili e desktop non costituisce una famiglia di font distinta. |
| --nsw-border-radius | 0.25rem | Riferimento tipografico responsive pubblicato e ruolo condiviso per gli angoli. Una coppia di dimensioni tipografiche per dispositivi mobili e desktop non costituisce una famiglia di font distinta. |
## Guida completa sistema di design NSW

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.

## Runtime e tema bloccati sistema di design NSW

### Usa l’implementazione nativa delle schede

> L’esempio usa nsw-design-system 3.27.0. Importa il pacchetto CSS e la classe Tabs, quindi inizializza l’unico gruppo di schede dopo aver creato il markup. Questa inizializzazione mirata evita di registrare componenti non presenti. La documentazione online potrebbe descrivere una versione più recente; il codice scaricabile e i valori dei token qui riportati restano legati al pacchetto verificato.

### Separa i componenti dallo stato dell’applicazione

La classe nativa Tabs gestisce la selezione delle schede, la visibilità dei pannelli e la navigazione da tastiera. L’applicazione gestisce un Set di prompt salvati. Passare da una fase all’altra non modifica quindi l’elenco di lettura. Questa separazione è esplicita nel codice: non esistono uno store globale nascosto, richieste al backend o imitazioni di un account governativo.

## Ruoli del brand e superfici leggibili sistema di design NSW

### Usa insieme i ruoli scuro e chiaro

Il colore scuro predefinito del brand è #002664, mentre la superficie chiara è #CBEDFD. Il pannello dei prompt usa il ruolo chiaro e un’azione scura. La scheda attiva usa il trattamento d’accento del pacchetto. Si tratta dei ruoli effettivi del tema, non di una palette blu arbitraria scelta per richiamare un sito del settore pubblico. L’esempio non usa un logo ufficiale del governo.

### Interpreta con attenzione i nomi dei token

Il token text-light è bianco. Va usato su uno sfondo scuro e non come sinonimo generico di testo attenuato. Il testo di supporto delle fasi usa invece il ruolo neutro più scuro. Il riferimento include coppie di colori di primo piano e sfondo per gli stati, ma il laboratorio non inventa avvisi di errore o di successo solo per mostrare ogni colore disponibile.

## Public Sans e scala responsive sistema di design NSW

### Carica il font prima di esaminare il layout

L’esempio carica localmente i font Public Sans 400 e 700. Il pacchetto definisce separatamente le dimensioni per dispositivi mobili e desktop: il testo medio passa da 1.125rem a 1.25rem, mentre la dimensione di riferimento massima per i titoli passa da 2.25rem a 3rem. Queste coppie aiutano a mantenere la gerarchia di lettura al variare della larghezza disponibile.

### Mantieni semplice la gerarchia dei contenuti

A una breve etichetta di fase seguono un titolo descrittivo, un’introduzione, un paragrafo esplicativo e un prompt salvato. La pagina non trasforma ogni frase in una scheda. Sugli schermi stretti, l’elenco di lettura segue il pannello della fase, mentre la barra delle schede, composta da tre brevi etichette, resta utilizzabile senza comprimere il testo su più righe.

## Markup delle schede e comportamento da tastiera sistema di design NSW

### Lascia che il componente migliori link reali

L’elenco iniziale delle schede contiene link a ID di contenuto univoci. L’inizializzazione aggiunge i ruoli tablist/tab/tabpanel, gestisce la selezione e imposta la scheda raggiungibile tramite tabulazione. Per consentire al componente di trovare i pannelli, gli href devono puntare alle destinazioni corrette. Non duplicare gli ID quando inserisci più gruppi di schede nella stessa pagina.

- Associa ogni link di scheda a un solo ID di pannello.

- Inizializza il gruppo dopo aver inserito il markup.

- Lascia che il componente nativo gestisca la selezione e lo stato attivo da tastiera.

### Verifica la selezione da tastiera oltre ai clic

L’implementazione nativa supporta la navigazione con i tasti freccia. La verifica nel browser imposta lo stato attivo su Prepare, preme ArrowRight e conferma che Discuss diventi selezionata. Questo comportamento non si limita a formattare l’ultima etichetta cliccata. Un gruppo di schede è adatto a queste fasi equivalenti, perché chi legge può spostarsi tra di esse; non serve a nascondere campi obbligatori in una procedura sequenziale.

## Prompt salvati e feedback trasparente sistema di design NSW

### Mantieni lo stato dei salvataggi indipendente dalla scheda visibile

L’azione di ogni fase attiva o disattiva il relativo prompt in un Set, aggiorna aria-pressed e cambia l’etichetta da Save a Remove. Il conteggio e le voci dell’elenco di lettura derivano da quel Set. Tornando a una fase salvata, lo stato selezionato viene mostrato correttamente. Clear reading list rimuove tutte le selezioni e si disattiva quando non c’è nulla da rimuovere.

### Spiega i limiti della persistenza

L’elenco di lettura è uno stato locale della pagina e scompare al ricaricamento. L’interfaccia lo dichiara esplicitamente. Un vero elenco persistente richiederebbe un modello di archiviazione e un comportamento di ripristino definiti; qui non se ne presume l’esistenza. Il contenuto è un originale esercizio di progettazione e discussione, non una guida ai requisiti per accedere a un servizio né un’affermazione di aver riprodotto una procedura ufficiale del NSW.

## Implementazione completa e revisione sistema di design NSW

### Riproduci il codice sorgente con le relative dipendenze

Crea un progetto Vite vanilla, installa nsw-design-system 3.27.0 e Public Sans, quindi salva i file entry e nsw.css forniti. Mantieni un elemento mount nella root. Sono inclusi i contenuti completi delle tre fasi, i prompt originali, l’inizializzazione nativa di Tabs e i gestori dell’elenco di lettura. Il comportamento di salvataggio e ripristino non è sostituito da pseudocodice.

1. Installa il pacchetto NSW bloccato alla versione specificata e i file dei font Public Sans.

2. Salva il file entry completo e nsw.css con un elemento mount nella root.

3. Salva i prompt in due schede diverse e verifica che lo stato venga mantenuto.

4. Usa ArrowRight, svuota l’elenco e controlla lo stato vuoto.

### Mantieni separata la navigazione tra schede dai contenuti salvati

Inizializza la classe nativa Tabs solo dopo aver creato le destinazioni dei link e i pannelli. La corrispondenza tra gli ID dei frammenti definisce il contratto di miglioramento: modificare l’ID di un pannello senza aggiornare il relativo href interrompe il collegamento, anche se le etichette delle schede continuano ad apparire corrette. Se la pagina contiene più gruppi, assegna ID distinti a ciascuno.

Gestisci l’elenco di lettura come stato dell’applicazione esterno all’istanza della scheda. Lo stato salvato di un prompt deve sopravvivere ai cambi di pannello e aria-pressed deve rifletterlo quando si torna al pannello. Usa le schede per contenuti equivalenti che chi legge può consultare di nuovo; un modulo sequenziale con passaggi da completare richiede un modello di navigazione diverso. La persistenza richiede inoltre una politica esplicita di archiviazione e ripristino, anziché modificare implicitamente questo esempio limitato alla pagina.

## Esempi di componenti del sistema di progettazione sistema di design NSW

### main.js — esempio completo con schede native ed elenco di lettura

Include tutti i contenuti originali delle fasi, l’inizializzazione delle schede e la logica completa di salvataggio, rimozione e ripristino.

```
import Tabs from 'nsw-design-system/src/components/tabs/tabs.js';
import 'nsw-design-system/css';
import '@fontsource/public-sans/latin-400.css';
import '@fontsource/public-sans/latin-700.css';
import './nsw.css';
const sessions=[['Prepare','Choose one question to explore','Start with a clear outcome rather than a long list of activities.','Write a one-sentence purpose. Identify the people who can answer the question and the evidence you already have.'],['Discuss','Make room for different views','Use a short, structured discussion to compare observations.','Ask participants to describe what they noticed before proposing solutions. Keep a separate record of assumptions that need evidence.'],['Review','Turn observations into a next step','End with an action that has an owner and a clear reason.','Choose one improvement to investigate. Record what would count as success and when the group will review the result.']];
document.getElementById('root').innerHTML=`<main><p class="eyebrow">NSW DESIGN SYSTEM / ORIGINAL WORKSHOP STUDY</p><h1>Plan a focused discussion</h1><p class="nsw-intro">Move between three stages and save useful prompts to a local reading list.</p><div class="layout"><section class="nsw-tabs js-tabs"><ul class="nsw-tabs__list">${sessions.map(([name],i)=>`<li><a href="#session-${i}">${name}</a></li>`).join('')}</ul>${sessions.map(([name,title,lead,body],i)=>`<section id="session-${i}" class="nsw-tabs__content"><p class="step">STAGE ${i+1} / 3</p><h2>${title}</h2><p class="nsw-intro">${lead}</p><p>${body}</p><div class="prompt"><h3>Prompt to keep</h3><blockquote>${['What do we need to understand before choosing a solution?','Which observations are shared, and where do they differ?','What is the smallest next step that would reduce uncertainty?'][i]}</blockquote><button class="nsw-button nsw-button--dark save" data-index="${i}" aria-pressed="false">Save this prompt</button></div></section>`).join('')}</section><aside><h2>Your reading list</h2><p id="count" role="status">0 prompts saved</p><ul id="saved"></ul><p id="empty">Save a prompt from any stage. Changing tabs keeps your selection.</p><button class="nsw-button nsw-button--white" id="clear" disabled>Clear reading list</button><p class="note">This is an original local study using NSW 3.27.0 tabs and CSS. Nothing is stored after reloading.</p></aside></div></main>`;
new Tabs(document.querySelector('.js-tabs')).init();const saved=new Set();const $=id=>document.getElementById(id);function render(){$('count').textContent=saved.size+' prompt'+(saved.size===1?'':'s')+' saved';$('saved').replaceChildren(...[...saved].sort().map(i=>{const li=document.createElement('li');li.textContent=sessions[i][0]+': '+sessions[i][1];return li}));$('empty').hidden=saved.size>0;$('clear').disabled=!saved.size;document.querySelectorAll('.save').forEach(b=>{const yes=saved.has(Number(b.dataset.index));b.setAttribute('aria-pressed',String(yes));b.textContent=yes?'Remove saved prompt':'Save this prompt'})}document.querySelectorAll('.save').forEach(b=>b.addEventListener('click',()=>{const i=Number(b.dataset.index);saved.has(i)?saved.delete(i):saved.add(i);render()}));$('clear').addEventListener('click',()=>{saved.clear();render()});
```

Riferimento del codice

- La classe NSW gestisce le schede; il Set gestisce l’elenco di lettura originale.

### nsw.css — composizione responsive originale

Layout e superfici dei prompt basati sui ruoli semantici del tema pubblicati.

```
body{margin:0}main{max-width:1240px;padding:32px;margin:auto}.eyebrow,.step{font-size:14px;letter-spacing:.05em;font-weight:700}.eyebrow{color:var(--nsw-brand-dark)}h1{max-width:24ch}.layout{display:grid;grid-template-columns:1.8fr 1fr;gap:32px;margin-top:40px}.nsw-tabs__content{min-height:0}.prompt{margin-top:32px;padding:24px;background:var(--nsw-brand-light)}.prompt h3{margin-top:0}.prompt blockquote{margin:16px 0 24px;padding:0;border:0;font-size:20px;line-height:1.5}.step{margin-top:0;color:var(--nsw-grey-02)}aside{padding:24px;border-top:4px solid var(--nsw-brand-dark);background:var(--nsw-off-white);align-self:start}aside h2{font-size:24px;margin-top:0}aside li{margin:16px 0}aside ul{padding-left:24px}.note{font-size:14px;margin-top:24px}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr}h1{font-size:36px}.prompt{padding:20px}}
```

Riferimento del codice

- L’etichetta di supporto della fase usa un neutro scuro; --nsw-text-light è bianco.

## Configurazione dell’agente sistema di design NSW

### Punto di partenza per l’implementazione

Sono stati verificati localmente i clic sulle schede native, i tasti freccia, il mantenimento dei prompt salvati, lo svuotamento dell’elenco e il layout responsive.

```
npm create vite@latest nsw-workshop -- --template vanilla
cd nsw-workshop
npm install
npm install nsw-design-system@3.27.0 @fontsource/public-sans
# Replace src/main.js and add src/nsw.css. Keep <div id="root"></div>.
npm run dev
```

### Un prompt per il tuo progetto

```
Crea la guida del laboratorio NSW usando Tabs nativo dalla versione 3.27.0, Public Sans e i ruoli semantici effettivi. Mantieni univoci gli ID dei pannelli, supporta la selezione da tastiera, tieni indipendente lo stato dei prompt salvati e fornisci un elenco di lettura vuoto utile. Chiarisci che la persistenza è solo locale ed evita affermazioni su servizi ufficiali.
```

## Fonti e ambito sistema di design NSW

Un esercizio di laboratorio scritto da OpenDesign con NSW Design System 3.27.0. Il comportamento nativo delle schede è reale; i contenuti e il flusso di lavoro dei prompt salvati sono logica originale di un’applicazione locale.

- Schede Navigazione tra contenuti equivalenti e comportamento nativo.

- Integrazione per sviluppatori Configurazione di pacchetto, foglio di stile e JavaScript.

- Tipografia Public Sans e gerarchia tipografica.

- Implementazione versionata Esportazioni del tema e codice sorgente di Tabs.

## Risorse correlate sistema di design NSW

### ONS sistema di design

Crea una risposta al sondaggio che non possa contraddirsi: caselle di controllo native ONS, risposte mutuamente esclusive, riferimenti precisi a tipi e colori e un flusso completo di revisione locale.

### Ontario sistema di design

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.

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


- [Riferimento per l’implementazione](https://designsystem.nsw.gov.au/components/tabs/index.html)
- [Fonte](https://github.com/digitalnsw/nsw-design-system)
- [Riferimento del codice](https://designsystem.nsw.gov.au/components/tabs/index.html)
- [Riferimento del codice](https://designsystem.nsw.gov.au/get-started/for-developers.html)
- [Schede Navigazione tra contenuti equivalenti e comportamento nativo.](https://designsystem.nsw.gov.au/components/tabs/index.html)
- [Integrazione per sviluppatori Configurazione di pacchetto, foglio di stile e JavaScript.](https://designsystem.nsw.gov.au/get-started/for-developers.html)
- [Tipografia Public Sans e gerarchia tipografica.](https://designsystem.nsw.gov.au/core/typography/index.html)
- [Implementazione versionata Esportazioni del tema e codice sorgente di Tabs.](https://github.com/digitalnsw/nsw-design-system)