# Sistema di design GOV.UK ## Sistema di design GOV.UK Anteprima dell’interfaccia Invia i campi vuoti, segui i collegamenti agli errori, correggi le risposte e modifica un valore dalla schermata di riepilogo. Nessuna informazione lascia la pagina. ## Sistema di design GOV.UK Riferimento di progettazione GOV.UK Frontend 6.5.1 e documentazione attuale della versione 6, consultati il 3 ottobre 2026. I valori esadecimali sono un’istantanea di riferimento; in produzione è preferibile usare le funzioni Sass con nome. L’anteprima carica localmente il CSS e il JavaScript ufficiali, con un font alternativo e un’identità indipendente. ### Carattere tipografico e tipografia reattiva | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | govuk-heading-xl | 32px / 35px → 48px / 50px | Dimensione del font / interlinea sotto e sopra il breakpoint tablet; titolo della pagina. | | govuk-heading-l | 27px / 30px → 36px / 40px | Dimensione del font / interlinea sotto e sopra il breakpoint tablet; titolo della domanda. | | govuk-heading-m | 21px / 25px → 24px / 30px | Dimensione del font / interlinea sotto e sopra il breakpoint tablet; titolo della sezione. | | govuk-body-l | 21px / 25px → 24px / 30px | Dimensione del font / interlinea sotto e sopra il breakpoint tablet; testo introduttivo. | | govuk-body | 19px / 25px → 19px / 25px | Dimensione del font / interlinea sotto e sopra il breakpoint tablet; testo ordinario. | | govuk-body-s | 16px / 20px → 16px / 20px | Dimensione del font / interlinea sotto e sopra il breakpoint tablet; testo di supporto. | ### Idoneità del font | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | GDS Transport | service.gov.uk services | Il font ufficiale è richiesto per i servizi su quel sottodominio. | | Independent preview | Helvetica Neue, Helvetica, Arial, sans-serif | Stack alternativo consigliato dalle linee guida di Frontend senza marchio; non vengono caricati file Transport. | ### Spaziatura reattiva e statica | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | unit 0 | 0px → 0px; static 0px | Da piccola a grande in modo reattivo; govuk-spacing(unit) resta statico. | | unit 1 | 5px → 5px; static 5px | Da piccola a grande in modo reattivo; govuk-spacing(unit) resta statico. | | unit 2 | 10px → 10px; static 10px | Da piccola a grande in modo reattivo; govuk-spacing(unit) resta statico. | | unit 3 | 15px → 15px; static 15px | Da piccola a grande in modo reattivo; govuk-spacing(unit) resta statico. | | unit 4 | 15px → 20px; static 20px | Da piccola a grande in modo reattivo; govuk-spacing(unit) resta statico. | | unit 5 | 15px → 25px; static 25px | Da piccola a grande in modo reattivo; govuk-spacing(unit) resta statico. | | unit 6 | 20px → 30px; static 30px | Da piccola a grande in modo reattivo; govuk-spacing(unit) resta statico. | | unit 7 | 25px → 40px; static 40px | Da piccola a grande in modo reattivo; govuk-spacing(unit) resta statico. | | unit 8 | 30px → 50px; static 50px | Da piccola a grande in modo reattivo; govuk-spacing(unit) resta statico. | | unit 9 | 40px → 60px; static 60px | Da piccola a grande in modo reattivo; govuk-spacing(unit) resta statico. | ### Nomi funzionali dei colori | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | govuk-functional-colour("text") | #0b0c0c | Contenuto principale leggibile | | govuk-functional-colour("secondary-text") | #484949 | Suggerimenti e informazioni di supporto | | govuk-functional-colour("link") | #1a65a6 | Link ordinari | | govuk-functional-colour("link-hover") | #0f385c | Hover sui link | | govuk-functional-colour("link-visited") | #54319f | Destinazioni visitate | | govuk-functional-colour("border") | #cecece | Separatori strutturali | | govuk-functional-colour("input-border") | #0b0c0c | Bordo del campo di immissione | | govuk-functional-colour("focus") | #ffdd00 | Solo focus da tastiera | | govuk-functional-colour("focus-text") | #0b0c0c | Testo giallo sul focus | | govuk-functional-colour("error") | #ca3535 | Feedback di convalida | | govuk-functional-colour("success") | #0f7a52 | Feedback di esito positivo | | govuk-functional-colour("body-background") | #ffffff | Superficie di lettura | ### Primitivi di layout | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | govuk-width-container | 1020px maximum | Larghezza predefinita del contenuto esterno; può essere modificata in caso di effettiva necessità di contenuto. | | govuk-grid-row + govuk-grid-column-two-thirds | 2/3 at wider widths | Mantieni domande e testo in una colonna leggibile; alle larghezze ridotte, disponili in verticale. | | govuk-main-wrapper | Main content region | Usalo sul landmark principale all’interno del contenitore di larghezza. | ### Breakpoint e contorni dei controlli | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | $govuk-breakpoints.mobile | 320px | Chiave Sass del breakpoint, non un layout aggiuntivo obbligatorio. | | $govuk-breakpoints.tablet | 641px | Breakpoint predefinito per tipografia, spaziatura e griglia reattive; la guida agli stili lo descrive come superiore a 640px. | | $govuk-breakpoints.desktop | 769px | Breakpoint aggiuntivo con nome. | | $govuk-focus-width | 3px | Larghezza del contorno del focus; abbinala al trattamento del focus documentato. | ## Sistema di design GOV.UK 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 GOV.UK Versione e identità ### Un riferimento alla versione 6 con identità indipendente > Questo riferimento usa la documentazione della versione 6, che include caratteri più grandi sugli schermi piccoli e colori funzionali rivisti. Uno screenshot meno recente può quindi mostrare valori diversi. La tabella qui sopra riporta i valori predefiniti documentati attualmente, senza mescolare versioni diverse. Lo studio interattivo riguarda una richiesta immaginaria di informazioni su un evento comunitario. Non usa una corona, il marchio GOV.UK, il font Transport né un endpoint reale per l’invio. Il contenuto dell’attività e le regole di convalida locale sono scelte applicative; la struttura dei componenti si basa sugli esempi ufficiali collegati. Leggi la specifica di supporto ### Scegli il percorso corretto per il font Per un servizio idoneo su service.gov.uk, GDS Transport fa parte dell’implementazione ufficiale. I servizi pubblici su altri domini devono usare un altro carattere tipografico. Questo studio indipendente segue l’alternativa consigliata Helvetica Neue, Helvetica, Arial, sans-serif; cambiare font non richiede di rinunciare alla gerarchia del sistema. Leggi la specifica di supporto ## Sistema di design GOV.UK Tipografia e ritmo di lettura ### Usa la coppia completa di dimensione e interlinea Usa govuk-heading-l per la domanda della richiesta e govuk-body per il testo di supporto. Sugli schermi piccoli il titolo è 27/30px; su quelli più grandi diventa 36/40px. Nella versione 6 il testo del corpo resta 19/25px. Usare 16px per il testo del corpo sugli schermi piccoli riprodurrebbe il comportamento precedente, non quello di questo riferimento. La tabella della scala include entrambe le dimensioni perché uno screenshot a una sola larghezza non basta a definire la regola reattiva. Il CSS di produzione usa unità relative. Una classe come govuk-heading-l determina l’aspetto, non se l’elemento semantico debba essere h1 o h2. ``` .app-question-note { @include govuk-font($size: 19); } // Size and line-height only, without changing the font family: .app-existing-font { @include govuk-font-size($size: 19); } ``` Riferimento del codice Leggi la specifica di supporto ## Sistema di design GOV.UK Spaziatura e larghezza della pagina ### Le unità reattive non corrispondono a pixel fissi L’unità 6 è utile tra i gruppi di domande: equivale a 20px su uno schermo stretto e a 30px oltre il breakpoint tablet. L’helper statico govuk-spacing(6) restituisce 30px a qualsiasi larghezza. Scegliere l’helper cambia quindi il comportamento, anche se le due versioni appaiono identiche su desktop. ``` .app-question-group { @include govuk-responsive-margin(6, "bottom"); } .app-fixed-inset { padding: govuk-spacing(3); } ``` Riferimento del codice Leggi la specifica di supporto ### Inserisci una colonna di lettura nel contenitore Il contenitore standard ha una larghezza massima di 1020px. Al suo interno, una colonna a due terzi limita il flusso delle domande, mantenendo allineata la struttura esterna della pagina. Sugli schermi piccoli, il layout si dispone naturalmente in verticale. La nostra anteprima mantiene questa gerarchia di lettura, invece di distribuire ogni campo in una scheda tipo dashboard. ```

Tell us about the event

``` Riferimento del codice Leggi la specifica di supporto ## Sistema di design GOV.UK Colore e focus ### Usa i ruoli invece di riprodurre vecchi screenshot Nella versione 6 il colore funzionale per i link è #1a65a6 e quello per gli errori è #ca3535. In una vera compilazione Sass, usa govuk-functional-colour("link") e govuk-functional-colour("error"), così un aggiornamento può recepire la palette upstream. Questi ruoli funzionali non equivalgono alla scelta di un generico colore rosso o blu per un’illustrazione. Il giallo è riservato all’indicatore di focus. Non dovrebbe diventare il colore predefinito per la selezione o un accento promozionale. L’anteprima abbina il giallo a un testo scuro e a un bordo scuro ben visibile; un errore è indicato dal testo e dalla posizione, non soltanto dal rosso. ``` .app-supporting-text { color: govuk-functional-colour("secondary-text"); } .app-custom-error { color: govuk-functional-colour("error"); } ``` Riferimento del codice Leggi la specifica di supporto ## Sistema di design GOV.UK Componenti delle domande ### Un campo è una struttura integrata L’esempio di input combina govuk-form-group, govuk-label, govuk-hint e govuk-input. L’etichetta fa riferimento all’ID dell’input; aria-describedby punta all’hint. In caso di errore, aggiungi anche l’ID del messaggio di errore, oltre alle classi di errore. Un bordo rosso senza questa relazione è una riproduzione incompleta. Questa richiesta riguarda il nome di un evento e un’email di contatto. Sono due valori distinti, ciascuno con la propria etichetta, all’interno di un’unica attività breve; non è un invito a collocare ogni campo in una pagina separata. Nell’anteprima entrambi sono obbligatori solo per mostrare la convalida: non si tratta di un requisito reale per ottenere un’autorizzazione. - Etichetta persistente: Nome dell’evento. - Indicazione persistente: Usa il nome riportato nelle informazioni sul tuo evento. - Errore correggibile: Inserisci il nome di un evento. Leggi la specifica di supporto ### Il markup nativo e il comportamento dell’applicazione hanno funzioni diverse GOV.UK Frontend applica gli stili ai componenti e ne migliora il comportamento. Non stabilisce quali email siano accettabili per questo servizio, non salva una bozza e non riceve richieste. Nell’anteprima, JavaScript convalida i due campi e conserva i relativi valori solo nella pagina corrente. Ricaricando la pagina, lo studio viene azzerato. Leggi la specifica di supporto ## Sistema di design GOV.UK Correzione degli errori tramite link ### Trasforma il riepilogo in un percorso per correggere gli errori Dopo aver selezionato Continua in presenza di errori, mostra il riepilogo prima del modulo e sposta lì il focus. Ogni link nell’elenco porta alla risposta corrispondente. Se si tratta di un singolo campo di testo, il link punta all’ID dell’input; per un gruppo di opzioni, dovrebbe puntare al primo controllo pertinente, come indicato nelle linee guida ufficiali. Per applicare i miglioramenti, il riepilogo nativo usa data-module="govuk-error-summary". L’anteprima inserisce il riepilogo solo in caso di errori di convalida, quindi crea ErrorSummary dal modulo locale 6.5.1. La libreria gestisce lo spostamento del focus e la navigazione tramite link; l’applicazione fornisce i messaggi, conserva i valori e rimuove gli errori non più attuali. Leggi la specifica di supporto ### Prova il percorso effettivo per correggere gli errori Seleziona Continua lasciando vuoti entrambi i campi. Segui il link dell’errore relativo al nome dell’evento, inserisci un titolo di fantasia, quindi inserisci un’email non valida. Seleziona di nuovo Continua: dovrebbe apparire solo l’errore rimanente e il titolo dovrebbe essere conservato. Correggi l’indirizzo per raggiungere la schermata di riepilogo. In questo modo è visibile il comportamento previsto per ogni stato, invece di mostrare un errore d’esempio permanente. Leggi la specifica di supporto ## Sistema di design GOV.UK Verifica le risposte e modifica ### Usa un elenco di definizioni, non una tabella di dati La schermata di verifica delle risposte contiene un govuk-summary-list. Ogni riga ha una chiave dt, un valore dd e un’area dd per le azioni. Un’etichetta nascosta dopo «Modifica» specifica a quale risposta si riferisce. I nomi degli eventi più lunghi vanno a capo nel valore senza nascondere il link per modificarli. L’azione «Modifica» ripristina il modulo e sposta il focus sul campo selezionato. Proseguendo, i dati vengono nuovamente convalidati e si torna alla schermata di riepilogo aggiornata. Il percorso di ritorno è gestito dal codice dell’applicazione; il sistema di progettazione fornisce la struttura di presentazione. Leggi la specifica di supporto ### Fermati al punto giusto Questo studio termina con la schermata di riepilogo, perché nessun servizio riceve i dati. Una vera pagina di verifica delle risposte precede l’invio effettivo e deve mostrare le informazioni che verranno inviate. Un’applicazione con dichiarazioni o una conferma da parte del backend richiede ulteriore logica di servizio: un riquadro verde non può produrre quel risultato. 1. Completa le due risposte d’esempio e continua per visualizzare la schermata di riepilogo. 2. Seleziona «Modifica il nome dell’evento» e modifica solo quella risposta. 3. Continua e verifica che il titolo corretto e l’email conservata siano entrambi presenti. Leggi la specifica di supporto ## Sistema di design GOV.UK Integrazione Frontend ### Compila il file Sass non brandizzato La configurazione seguente usa govuk-frontend@6 e Dart Sass con l’importatore di pacchetti Node. Compila la configurazione documentata dei font non brandizzati e copia la distribuzione browser di JavaScript. Inserisci nel repository il file di lock risolto, così il progetto reale registra la versione esatta. L’esempio non carica il font Transport né usa risorse grafiche governative. Un servizio autorizzato a usare il brand deve inoltre fornire le risorse ufficiali tramite il percorso documentato. Le applicazioni che usano un altro strumento di build possono mantenere lo stesso modulo Sass e lo stesso punto di ingresso initAll, adattando il bundling. Leggi la specifica di supporto ### Inizializza dopo aver inserito il markup dei componenti Per una pagina statica, carica il modulo copiato e chiama initAll. In un’applicazione con rendering lato client, dopo aver creato una nuova area, inizializzala con initAll({ scope: element }). Non inizializzare all’avvio un esempio nascosto di errore scambiandolo per un flusso di convalida attivo. L’anteprima autonoma esegue CSS e JavaScript ufficiali, copiati localmente alla versione 6.5.1. Una personalizzazione dei font, limitata all’ambito dello studio, sostituisce Transport ovunque. La convalida del modulo e la schermata di riepilogo sono codice dell’applicazione; il miglioramento di Button ed ErrorSummary proviene dalla libreria. La ricetta di build Sass separata documenta la configurazione preferibile e personalizzabile; questa compilazione non è stata eseguita qui. Leggi la specifica di supporto ## Sistema di design GOV.UK Esempi di componenti del sistema di progettazione ### Campo di testo: etichetta, indicazione ed errore in linea Nello stato di errore, l’esempio aggiunge la classe modificatrice di errore al gruppo e all’input. La descrizione dell’input associa tramite ID l’indicazione persistente e l’errore corrente. ```
Use the name shown on your event information.

Error: Enter an event name

``` Riferimento del codice - Nello stato valido, rimuovi il paragrafo dell’errore, le classi di errore e l’ID dell’errore da aria-describedby. - Conserva il valore effettivo quando la convalida non riesce; usa output server sottoposto a escape oppure l’assegnazione di testo/valore al DOM. ### Riepilogo degli errori: navigazione alla risposta Inserisci il riepilogo prima del contenuto della domanda. Il messaggio deve corrispondere all’errore in linea e il link deve puntare all’input, non a un contenitore non pertinente. ```

There is a problem

``` Riferimento del codice - In un’implementazione nativa, l’inizializzazione di Frontend gestisce il comportamento di focus del riepilogo. - Nello studio interattivo, dopo aver inserito il riepilogo degli errori a seguito di ogni convalida non riuscita viene creato un nuovo ErrorSummary; la convalida dell’applicazione resta separata. ### Verifica le risposte: elenco di riepilogo semantico Un elenco di definizioni associa l’etichetta della risposta al suo valore e alla destinazione specifica per modificarlo. Il suffisso nascosto permette di distinguere i link «Modifica» ripetuti. ```
Event name
Riverside community picnic
Change event name
``` Riferimento del codice - Il parametro returnTo è una convenzione dell’applicazione usata qui, non un’API di Frontend API. - Dopo la modifica, torna alla schermata di riepilogo lasciando intatte tutte le altre risposte. ### Esempio autonomo completo Il documento completo include layout, controlli e inizializzazione. Estrai l’archivio di esempio collegato per ottenere gli esatti asset vendor relativi, quindi avvialo tramite HTTP. ``` Event enquiry — OpenDesign component study Skip to main content

OpenDesign · Component studyGOV.UK Frontend 6.5.1 with an alternative font. Fictional enquiry; no information is sent.

Tell us about the event

Enter fictional details to try linked validation and the check-answers pattern.

Use the name shown on your event information.
For example, organiser@example.com. Use a fictional address.
``` Riferimento del codice - Scarica l’esempio completo dalla sezione Fonti. Il README indica il comando esatto per avviarlo in locale. - Mantieni i percorsi vendor relativi a questo documento; l’archivio include tutti gli asset usati da questa anteprima. ## Sistema di design GOV.UK Configurazione dell’agente AI ### Punto di partenza per l’implementazione Inserisci separatamente i comandi shell, il contenuto di app.scss e gli snippet HTML nelle posizioni indicate. L’anteprima usa risorse ufficiali 6.5.1 copiate localmente con una personalizzazione dei font; la ricetta di build Sass è documentata, ma non è stata compilata in questo workspace. Il file ZIP completo dell’esempio funzionante, disponibile in Sources, include le dipendenze esatte dell’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory, quindi apri http://localhost:8080/gov-uk.html. Non aprire con file:// gli esempi basati su moduli. ``` # Run in a project directory npm install govuk-frontend@6.5.1 npm install --save-dev sass mkdir -p public/assets # Save the following as app.scss @use "pkg:govuk-frontend" as * with ( $govuk-font-family: ("Helvetica Neue", Helvetica, Arial, sans-serif) ); # Compile, then copy the browser module npx sass --pkg-importer=node app.scss public/assets/app.css cp node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js public/assets/ ``` ### Un prompt per il tuo progetto ``` Realizza la richiesta sull’evento con due campi usando GOV.UK Frontend v6 e la configurazione non brandizzata dei font Helvetica descritta in questa guida. Usa le strutture effettive di form-group, input, error-summary e summary-list, gli errori in linea collegati, la conservazione delle risposte, i link «Modifica» mirati e il completamento limitato alla schermata di riepilogo. Applica la tipografia e la spaziatura adattive documentate tramite le classi Frontend. Mantieni l’identità reale del progetto e non simulare un invio ufficiale né inventare un risultato del backend. Verifica gli stati con campi vuoti, email non valida, dati corretti, riepilogo e modifica di una risposta. ``` ## Sistema di design GOV.UK Fonti e ambito Studio applicativo indipendente OpenDesign basato sui componenti CSS e su JavaScript di GOV.UK Frontend 6.5.1. Non implica l’uso di un logo governativo o del font Transport, né l’esistenza di un servizio ufficiale, di un invio reale o di una certificazione di conformità. Le regole del modulo e la navigazione nella schermata di riepilogo sono codice originale dell’applicazione. - Scala tipografica v6 Coppie di dimensione e interlinea per schermi piccoli e grandi. - Spaziatura adattiva Unità statiche e adattive e funzioni di supporto Sass. - Colori funzionali Ruoli attuali e funzioni di accesso Sass. - Layout Composizione di contenitori e griglie. - Campo di testo Struttura di etichetta, indicazione ed errore. - Riepilogo degli errori Navigazione alla correzione e comportamento del focus. - Elenco di riepilogo Chiavi, valori e azioni contestuali per la modifica. - Senza il brand GOV.UK Font, identità e configurazione Sass. - Includi CSS Dart Sass e integrazione dei pacchetti. - Importa JavaScript Moduli per browser e initAll. - 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. ## Sistema di design GOV.UK Risorse correlate ### HarvardSites sistema di design Scopri HarvardSites come piattaforma editoriale: confronta gli stili dei siti, scegli abbinamenti di font documentati e componi pagine universitarie con componenti di contenuto progettati per lo scopo. ### Helsinki Componi gruppi di selezione HDS nativi, colori semantici per i messaggi e riepiloghi degli errori collegati in un flusso completo, eseguibile in locale, di revisione e correzione. ### 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. - [Riferimento per l’implementazione](https://design-system.service.gov.uk/components/error-summary/) - [Fonte](https://design-system.service.gov.uk/styles/type-scale/) - [Fonte](https://design-system.service.gov.uk/styles/typeface/) - [Fonte](https://design-system.service.gov.uk/styles/spacing/) - [Fonte](https://design-system.service.gov.uk/styles/colour/) - [Fonte](https://design-system.service.gov.uk/styles/layout/) - [Fonte](https://frontend.design-system.service.gov.uk/sass-api-reference/) - [Leggi la specifica di supporto](https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/) - [Leggi la specifica di supporto](https://design-system.service.gov.uk/styles/typeface/) - [Riferimento del codice](https://design-system.service.gov.uk/styles/type-scale/) - [Leggi la specifica di supporto](https://design-system.service.gov.uk/styles/type-scale/) - [Riferimento del codice](https://design-system.service.gov.uk/styles/spacing/) - [Leggi la specifica di supporto](https://design-system.service.gov.uk/styles/spacing/) - [Riferimento del codice](https://design-system.service.gov.uk/styles/layout/) - [Leggi la specifica di supporto](https://design-system.service.gov.uk/styles/layout/) - [Riferimento del codice](https://design-system.service.gov.uk/styles/colour/) - [Leggi la specifica di supporto](https://design-system.service.gov.uk/styles/colour/) - [Leggi la specifica di supporto](https://design-system.service.gov.uk/components/text-input/) - [Leggi la specifica di supporto](https://design-system.service.gov.uk/patterns/question-pages/) - [Leggi la specifica di supporto](https://design-system.service.gov.uk/components/error-summary/) - [Leggi la specifica di supporto](https://design-system.service.gov.uk/components/summary-list/) - [Leggi la specifica di supporto](https://design-system.service.gov.uk/patterns/check-answers/) - [Leggi la specifica di supporto](https://frontend.design-system.service.gov.uk/include-css/) - [Leggi la specifica di supporto](https://frontend.design-system.service.gov.uk/import-javascript/) - [Riferimento del codice](https://design-system.service.gov.uk/components/text-input/) - [Riferimento del codice](https://design-system.service.gov.uk/components/error-summary/) - [Riferimento del codice](https://design-system.service.gov.uk/components/summary-list/) - [Scala tipografica v6 Coppie di dimensione e interlinea per schermi piccoli e grandi.](https://design-system.service.gov.uk/styles/type-scale/) - [Spaziatura adattiva Unità statiche e adattive e funzioni di supporto Sass.](https://design-system.service.gov.uk/styles/spacing/) - [Colori funzionali Ruoli attuali e funzioni di accesso Sass.](https://design-system.service.gov.uk/styles/colour/) - [Layout Composizione di contenitori e griglie.](https://design-system.service.gov.uk/styles/layout/) - [Campo di testo Struttura di etichetta, indicazione ed errore.](https://design-system.service.gov.uk/components/text-input/) - [Riepilogo degli errori Navigazione alla correzione e comportamento del focus.](https://design-system.service.gov.uk/components/error-summary/) - [Elenco di riepilogo Chiavi, valori e azioni contestuali per la modifica.](https://design-system.service.gov.uk/components/summary-list/) - [Senza il brand GOV.UK Font, identità e configurazione Sass.](https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/) - [Includi CSS Dart Sass e integrazione dei pacchetti.](https://frontend.design-system.service.gov.uk/include-css/) - [Importa JavaScript Moduli per browser e initAll.](https://frontend.design-system.service.gov.uk/import-javascript/)