# Sistema di progettazione Helsinki ## Anteprima dell’interfaccia del sistema di progettazione sistema di design Helsinki Prova anche a rivedere un numero insufficiente di argomenti, seguire il collegamento all’errore, correggere la selezione e tornare alla revisione. ## Riferimento al sistema di progettazione sistema di design Helsinki Pacchetto hds-core5.2.2 CSS e indicazioni ufficiali per i moduli. Stili nativi; fallback Arial; regola originale sul numero minimo di selezioni. ### Token tipografici | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --font-default | HelsinkiGroteskPro, Arial, sans-serif | I font Helsinki protetti da copyright non sono inclusi nel pacchetto Core; la demo usa il fallback Arial nativo. | | --fontsize-body-s/m/l/xl | 14 /16 /18 /20px | Alla dimensione predefinita della radice; scegli un ruolo, non dimensioni arbitrarie per ogni campo. | | --fontsize-heading-xxl/xl | 64 /48px | Titoli più grandi. | | --fontsize-heading-xl-mobile | 40px | Token esplicito; l’anteprima cambia a 576px, una scelta dell’applicazione. | | --fontsize-heading-l/m/s | 32 /24 /20px | Titoli secondari. | | --lineheight-s/m/l/xl | 1 /1.2 /1.5 /1.75 | Moltiplicatori, non altezze in pixel. | ### Spaziatura dei componenti e del layout | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Component scale | 2,4,8,12,16,24,32,40,48,56,64,72px | Da spacing-4-xs a spacing-5-xl. | | Layout scale | 16,24,32,48,64,96,128px | Da spacing-layout-2-xs a spacing-layout-2-xl. | | Breakpoints | 320,576,768,992,1248,1440px | Da xs a xxl; i valori dei token dichiarati non creano di per sé media query. | | Container widths | 288,544,720,944,1200px | Larghezze di riferimento da xs a xl. | | Checkbox geometry | 24px size;2px border;3px focus outline | CSS Core5.2.2 effettivo. | | Button minimum | 56px; square corners | Bordo da 2px con padding ricavato da spacing-s/l. | ### Colori semantici e della palette | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Bus | #0000bf | Checkbox selezionata predefinita e tema del pulsante primario. | | Coat of arms / focus | #0072c6 | Blu città distinto e ruolo del focus. | | Copper | #00d7a7 | Palette di accento; linea dell’intestazione della demo. | | Error / light | #b01038 /#f6e2e6 | Feedback di convalida; non intercambiabile con il Brick decorativo. | | Success / light | #007a64 /#e2f5f3 | Ruolo di esito confermato. | | Info / alert | #0062b9 /#ffda07 | Ruoli di informazione e attenzione. | | Text / secondary | #1a1a1a /#595959 | black-90 e black-60. | ### Struttura e ripristino del modulo | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Selection group | fieldset + legend | La legenda descrive la scelta; le etichette descrivono le opzioni. | | Vertical items | hds-selection-group__items--vertical | Evita di forzare le opzioni lunghe in un’unica riga orizzontale. | | Error summary | Notification error variant with linked error list | Posiziona sotto il titolo del modulo; dopo un invio non riuscito, sposta il focus sul titolo. | | Inline error | hds-selection-group__error-text | Mantieni visibili le istruzioni di aiuto durante la correzione. | | Application rule | At least two topics | Convalida dello scenario originale, non un’impostazione predefinita delle checkbox HDS. | ## Guida completa al sistema di progettazione sistema di design Helsinki 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 progettazione sistema di design Helsinki: Core e limiti di React ### Scegli l’implementazione che usi davvero > HDS fornisce Core CSS, componenti React e token di progettazione. Questo esempio usa hds-core5.2.2, il pacchetto scaricato e analizzato per la dimostrazione. I numeri delle release del repository possono differire dalla versione di un singolo pacchetto, quindi un tag più recente del repository non dimostra che questo esempio usi quella versione. Core fornisce variabili di base e stili per i singoli componenti. Non include lo stato applicativo del modulo usato qui. La logica di selezione, convalida, revisione e modifica è originale JavaScript ed è realizzata con input nativi HTML e il modello documentato per i moduli HDS. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Helsinki: tipografia e limiti dei font ### Usa il fallback nativo in modo trasparente La variabile del font indica prima HelsinkiGroteskPro, seguito da Arial e sans-serif. Il README di Core esclude esplicitamente i file dei font Helsinki per ragioni di copyright. L’anteprima mantiene il fallback, senza scaricare font soggetti a restrizioni né dichiarare implicitamente una resa con il marchio esatto. Il token di base del corpo del testo è 16px con interlinea di 1.5. heading-xl è 48px e il token mobile è 40px; l’anteprima passa dall’uno all’altro a 576px. Questi sono valori nominati, ma una variabile CSS che contiene un breakpoint non attiva automaticamente il comportamento responsive. La media rule esplicita appartiene alla composizione dell’applicazione. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Helsinki: due sistemi di spaziatura ### Separa gli spazi tra componenti dal ritmo della pagina HDS distingue una sequenza di spaziatura per i componenti da una sequenza più ampia per il layout. La prima comprende 2, 4, 8, 12, 16 e 24px, per poi crescere fino a 72px. La spaziatura del layout arriva a 128px. Usare spacing-layout-xl come spazio tra checkbox adiacenti sovraccaricherebbe il gruppo, anche se la variabile è valida. Il componente checkbox definisce un controllo di 24px, un bordo da 2px e un contorno di focus da 3px. L’altezza minima del pulsante è 56px e gli angoli sono squadrati. L’anteprima conserva queste forme native; il modulo è contenuto in un contenitore applicativo con larghezza massima pari ai 720px di riferimento pubblicati. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Helsinki: ruoli dei colori in un modulo ### Non confondere i nomi della palette con quelli del feedback Il tema interattivo predefinito usa il blu Bus, mentre il contorno del focus usa il blu Coat of arms. Il feedback di errore usa una tonalità berry distinta e una superficie di errore chiara. Un accento della palette come Copper può essere adatto all’intestazione, ma non dovrebbe sostituire il ruolo di errore solo perché risalta di più. L’errore in linea del gruppo di selezione combina testo, un bordo sinistro a contrasto e un’icona. Non si affida soltanto al rosso. I collegamenti nel riepilogo degli errori usano il consueto colore interattivo, così è facile riconoscere il percorso per tornare al campo. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Helsinki: anatomia di un gruppo di checkbox ### Un gruppo comprende una domanda e più risposte La struttura nativa è composta da un fieldset con legend, un contenitore per gli elementi e singoli wrapper per le checkbox. Ogni input precede immediatamente la propria etichetta, perché il foglio di stile sfrutta questa relazione per gli stati visivi. La legend spiega cosa selezionare; ogni etichetta indica un argomento disponibile. La demo richiede almeno due argomenti: è una regola originale dell’applicazione. Le checkbox sono appropriate perché è possibile mantenere selezionate più opzioni. Un gruppo di pulsanti radio esprimerebbe una scelta esclusiva e sarebbe in contrasto con il compito. Il suggerimento del fieldset resta visibile prima e dopo la convalida. ```
Topics for your afternoon

Choose at least two topics.

``` Riferimento del codice Leggi la specifica di supporto ## Sistema di progettazione sistema di design Helsinki: errori collegati e ripristino ### Porta il focus sul problema, poi conserva i dati inseriti HDS consiglia di mostrare un riepilogo degli errori sotto il titolo del modulo dopo un invio non riuscito. L’elenco contiene collegamenti ai controlli con errori e il focus passa al titolo del riepilogo. La demo segue questa sequenza: una revisione con zero o un solo argomento mostra il riepilogo e il messaggio in linea; il collegamento sposta il focus sulla prima checkbox. Dopo il primo tentativo, ogni modifica alla selezione verifica nuovamente il numero minimo. Quando sono selezionati due argomenti, entrambe le indicazioni di errore scompaiono senza cancellare le selezioni. Se un nuovo tentativo non riesce, il focus torna al titolo del riepilogo. La regola viene verificata di nuovo al momento della revisione; in un servizio reale, il feedback lato client non sostituisce la convalida lato server. 1. Avvia la revisione senza selezionare argomenti e verifica che il focus passi al riepilogo. 2. Segui il collegamento e seleziona due argomenti; verifica che l’errore scompaia. 3. Apri la revisione locale, torna indietro per modificare gli argomenti e verifica che entrambe le selezioni siano mantenute. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Helsinki: risorse ed esempio completo ### Carica la base e i componenti selezionati Il pacchetto Core separa base.css dagli stili dei componenti. Importare solo la base fornisce variabili e tipografia, ma non la struttura di checkbox e notifiche. La configurazione indica i file esatti usati in questo esempio, mantenendo l’insieme di risorse più leggero del bundle con tutti i componenti. L’esempio completo include la convalida applicativa e il ripristino. Chiama lo stato finale revisione locale, perché non viene registrato né inviato nulla. Cancella selezione è un’azione esplicita che azzera le scelte e la cronologia di convalida, quindi porta il focus sul primo input; non viene attivata da un normale errore del campo. - base.css fornisce colori, spaziatura, tipografia e dimensioni di riferimento. - Gli stili checkbox e selection-group forniscono controlli raggruppati e feedback in linea. - Gli stili notification e button forniscono la superficie del riepilogo degli errori e le azioni. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Helsinki: cosa dimostra l’esempio ### Dettagli di implementazione senza dichiarazioni ingannevoli sul servizio L’anteprima mostra l’uso di stili reali dei componenti HDS, il focus da tastiera, la correzione e la conservazione dei dati a 1440, 768 e 390px. Non dichiara di aver superato una verifica esaustiva dell’accessibilità. Un vero servizio comunale multilingue richiede anche etichette localizzate, metadati linguistici adeguati, regole lato server e una risposta confermata dal backend del servizio. Il codice sorgente è concesso in licenza MIT, ma il font personalizzato della città ha limiti d’uso propri. Questo esempio didattico indipendente usa argomenti fittizi per un programma e non riproduce l’identità ufficiale Helsinki. L’aspetto visibile e lo stato locale non devono essere confusi con una vera registrazione a un evento. Leggi la specifica di supporto ## Esempi di componenti del sistema di progettazione sistema di design Helsinki ### Struttura nativa di checkbox raggruppate Fieldset e legend definiscono la domanda; input ed etichette esprimono le risposte multiple. ```
Topics for your afternoon

Choose at least two topics.

``` Riferimento del codice ### Flusso completo di selezione con errori collegati Focus sul riepilogo degli errori, correzione tramite collegamenti, revisione, modifica e cancellazione della selezione. ``` Plan a skills afternoon
COMMUNITY SKILLS · LOCAL PLAN

Plan a skills afternoon

Select at least two topics for an example programme. Nothing is registered or sent.

Topics for your afternoon

Choose two or more. You can change your selection before reviewing the plan.

0 topics selected.

``` Riferimento del codice ## Configurazione dell’agente per il sistema di progettazione sistema di design Helsinki ### Punto di partenza per l’implementazione Percorsi esatti delle risorse Core. Il codice applicativo gestisce la convalida e la revisione; HelsinkiGroteskPro non è incluso. Lo ZIP dell’esempio completo funzionante, disponibile in Fonti, include anche le dipendenze esatte dell’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory, quindi apri http://localhost:8080/helsinki.html. Non aprire gli esempi basati su moduli tramite file://. ``` npm install hds-core@5.2.2 # CSS imports in a bundler: # import 'hds-core/lib/base.css'; # import 'hds-core/lib/components/checkbox/checkbox.css'; # import 'hds-core/lib/components/selection-group/selection-group.css'; # import 'hds-core/lib/components/notification/notification.css'; # import 'hds-core/lib/components/button/button.css'; # In plain HTML, copy these files into public assets and link base.css first. # HelsinkiGroteskPro is not bundled; the native font stack falls back to Arial. ``` ### Un prompt per il tuo progetto ``` Usa HDS Core5.2.2 base e i componenti selezionati CSS. Raggruppa le checkbox correlate con fieldset/legend, mantieni le etichette e i suggerimenti e usa token semantici per gli errori. Dopo una revisione non riuscita, mostra gli errori collegati sotto il titolo del modulo e porta il focus sul titolo del riepilogo. Ripeti la verifica dopo la correzione, conserva i valori selezionati e distingui la revisione locale da un invio confermato dal server. ``` ## Fonti e ambito del sistema di progettazione sistema di design Helsinki Esempio indipendente OpenDesign. Nessuna risorsa per il font Helsinki né identità del servizio; nessuna registrazione o risposta dal backend. - Configurazione di Core Separazione tra componente di base CSS e limiti di copyright dei font. - Creazione del modulo Raggruppamento, scelta dei controlli e ordine del focus. - Modello di convalida Posizione del riepilogo, collegamenti, correzione e limiti del backend. - Token di progettazione Tipografia, spaziatura e ruoli dei colori. - Repository ufficiale Architettura del pacchetto e licenza MIT. - Scarica l’esempio completo e funzionante ZIP con HTML completo, dipendenze locali CSS/JavaScript, licenze fornite e istruzioni esatte per l’avvio. Non è necessario alcun passaggio di compilazione. ## Risorse correlate al sistema di progettazione sistema di design Helsinki ### Rivet Crea pagine universitarie con la scala effettiva dei token di Rivet, l’anatomia dei componenti HTML e le interazioni native da tastiera. Esplora una pagina compatta con i dettagli di un workshop e schede accessibili per le informazioni sulle visite. ### Digital Agency sistema di design Crea interfacce leggibili per i servizi pubblici giapponesi con i ruoli testuali DADS, token semantici e anatomia nativa dei componenti HTML. Prova una ricerca di ricevute funzionante con errori di formato, un risultato senza corrispondenze e un record di stato consultabile. ### KERN Crea un’interfaccia nativa KERN con tipografia verificata, temi semantici, pannelli informativi e un flusso di conferma reversibile. - [Riferimento per l’implementazione](https://hds.hel.fi/patterns/forms/form-validation/) - [Fonte](https://github.com/City-of-Helsinki/helsinki-design-system/tree/development/packages/design-tokens) - [Fonte](https://hds.hel.fi/patterns/forms/form-building/) - [Leggi la specifica di supporto](https://github.com/City-of-Helsinki/helsinki-design-system/blob/development/packages/core/README.md) - [Leggi la specifica di supporto](https://github.com/City-of-Helsinki/helsinki-design-system/tree/development/packages/design-tokens) - [Riferimento del codice](https://hds.hel.fi/patterns/forms/form-building/) - [Leggi la specifica di supporto](https://hds.hel.fi/patterns/forms/form-building/) - [Leggi la specifica di supporto](https://hds.hel.fi/patterns/forms/form-validation/) - [Leggi la specifica di supporto](https://github.com/City-of-Helsinki/helsinki-design-system) - [Riferimento del codice](https://hds.hel.fi/patterns/forms/form-validation/) - [Configurazione di Core Separazione tra componente di base CSS e limiti di copyright dei font.](https://github.com/City-of-Helsinki/helsinki-design-system/blob/development/packages/core/README.md) - [Creazione del modulo Raggruppamento, scelta dei controlli e ordine del focus.](https://hds.hel.fi/patterns/forms/form-building/) - [Modello di convalida Posizione del riepilogo, collegamenti, correzione e limiti del backend.](https://hds.hel.fi/patterns/forms/form-validation/) - [Token di progettazione Tipografia, spaziatura e ruoli dei colori.](https://github.com/City-of-Helsinki/helsinki-design-system/tree/development/packages/design-tokens) - [Repository ufficiale Architettura del pacchetto e licenza MIT.](https://github.com/City-of-Helsinki/helsinki-design-system)