# Sistema di design NHS

## Anteprima dell’interfaccia sistema di design NHS

Seleziona un metodo, consulta le informazioni facoltative, recupera da una domanda senza risposta e modifica la preferenza.

## Riferimento di design sistema di design NHS

Frontend NHS.UK 10.6.1 e manuale dei servizi digitali NHS. L’anteprima usa CSS/JS ufficiali in locale con Arial, non Frutiger con licenza né il logo NHS. I valori responsive sono verificati rispetto al pacchetto selezionato; non vengono forniti contenuti clinici.

### Tipografia e identità

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Font stack | Frutiger W01, Arial, sans-serif | Frutiger richiede la licenza appropriata; questo studio usa Arial. |
| nhsuk-body | 16px small / 19px large | Testo di lettura predefinito. |
| nhsuk-body-l | 26px desktop | Usa il paragrafo introduttivo, non per ogni frase d’apertura. |
| nhsuk-body-s | 14px small / 16px large | Informazioni secondarie, da usare con moderazione. |
| nhsuk-heading-l | Transactional h1 | Usa heading-m per il successivo h2. |
### Variabili di colore semantiche

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| $nhsuk-text-colour | #212b32 | Contenuto principale |
| $nhsuk-secondary-text-colour | #4c6272 | Suggerimenti |
| $nhsuk-link-colour | #005eb8 | Destinazioni dei collegamenti |
| $nhsuk-focus-colour | #ffeb3b | Focus da tastiera |
| $nhsuk-border-colour | #d8dde0 | Limiti strutturali |
| $nhsuk-input-border-colour | #4c6272 | Limiti dei campi di input |
| $nhsuk-error-colour | #d5281b | Feedback di convalida |
| $nhsuk-button-colour | #007f3b | Azione principale |
### Spaziatura adattiva

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| nhsuk-u-margin-bottom-1 | 4px → 4px | Schermo piccolo → oltre 768px; usa la classe invece di duplicarla localmente. |
| nhsuk-u-margin-bottom-2 | 8px → 8px | Schermo piccolo → oltre 768px; usa la classe invece di duplicarla localmente. |
| nhsuk-u-margin-bottom-3 | 8px → 16px | Schermo piccolo → oltre 768px; usa la classe invece di duplicarla localmente. |
| nhsuk-u-margin-bottom-4 | 16px → 24px | Schermo piccolo → oltre 768px; usa la classe invece di duplicarla localmente. |
| nhsuk-u-margin-bottom-5 | 24px → 32px | Schermo piccolo → oltre 768px; usa la classe invece di duplicarla localmente. |
| nhsuk-u-margin-bottom-6 | 32px → 40px | Schermo piccolo → oltre 768px; usa la classe invece di duplicarla localmente. |
| nhsuk-u-margin-bottom-7 | 40px → 48px | Schermo piccolo → oltre 768px; usa la classe invece di duplicarla localmente. |
| nhsuk-u-margin-bottom-8 | 48px → 56px | Schermo piccolo → oltre 768px; usa la classe invece di duplicarla localmente. |
| nhsuk-u-margin-bottom-9 | 56px → 64px | Schermo piccolo → oltre 768px; usa la classe invece di duplicarla localmente. |
### Composizione della pagina

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| nhsuk-width-container | 960px maximum | Contenitore esterno a larghezza fissa. |
| nhsuk-main-wrapper--s | Smaller vertical wrapper | Consigliato per i servizi transazionali. |
| nhsuk-grid-column-two-thirds | Desktop column; mobile stack | Le larghezze della griglia si applicano a partire da 769px. |
| Breakpoints | 320 / 641 / 769 / 990px | Mobile, tablet, desktop, desktop grande. |
| nhsuk-u-reading-width | Readable content measure | Da usare quando il contenitore circostante è ampio. |
## Guida completa sistema di design NHS

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.

## Contesto NHS e font sistema di design NHS

### Un’interfaccia sanitaria senza falsa identità

> Il frontend NHS.UK fornisce le basi visive e di interazione; non prenota una visita né stabilisce quali modalità di partecipazione supporta una clinica. Questo studio mostra un appuntamento fittizio e permette al visitatore di scegliere una preferenza. Il risultato è una revisione locale, non una prenotazione.

Frutiger è una risorsa del marchio NHS soggetta a condizioni di licenza. Questa risorsa indipendente usa Arial, il fallback documentato, ed esclude il logo NHS. Il frontend ufficiale CSS resta intatto; un override locale esplicito del font impedisce richieste a Frutiger.

Leggi la specifica di supporto

## Sistema di design NHS Tipografia per le transazioni

### Lascia che sia la domanda a definire la gerarchia

Usa nhsuk-heading-l per la domanda della pagina e nhsuk-heading-m per una sezione subordinata. È diverso da una pagina editoriale lunga, in cui le indicazioni iniziano con heading-xl. Il fieldset dei radio button può avere una legenda delle dimensioni di un titolo senza perdere la semantica del gruppo.

Le classi per i paragrafi distinguono il testo del corpo, l’introduzione e le note di supporto più piccole. Un’introduzione da 26px è utile una volta, all’inizio della pagina, mentre le istruzioni per l’appuntamento restano nel normale testo del corpo. L’anteprima mantiene una larghezza di riga sufficiente per mandare a capo le date e i nomi delle sedi.

Leggi la specifica di supporto

## Sistema di design NHS Spaziatura e contenitore

### La spaziatura NHS non corrisponde alla scala di spaziatura GOV.UK

Le unità responsive NHS seguono una sequenza diversa e cambiano sopra i 768px. Per esempio, l’unità 6 passa da 32px a 40px. Non trasferire in NHS il valore dell’unità 6 di GOV.UK solo perché i nomi delle utility sembrano correlati.

La demo usa il contenitore da 960px e una colonna di lettura larga due terzi. Il comportamento nativo della griglia crea una singola colonna al di sotto della larghezza desktop. Le modifiche al layout sono gestite dalla libreria, mentre la piccola fascia identificativa indipendente è uno stile dell’applicazione.

```
.appointment-section {
  @include nhsuk-responsive-margin(6, "bottom");
}
```

Riferimento del codice

Leggi la specifica di supporto

### Breakpoint responsive

La documentazione indica 641px come larghezza tablet e 769px come larghezza desktop. Le larghezze delle colonne della griglia entrano in funzione a partire dal desktop; questo non significa che ogni regola tipografica attenda lo stesso limite. Usa le classi native invece di implementare un unico breakpoint globale per tutte le proprietà.

Leggi la specifica di supporto

## Sistema di design NHS Opzioni di partecipazione raggruppate

### Un fieldset, una risposta

L’esempio usa nhsuk-fieldset con una legenda visibile e un attributo name condiviso per gli input radio. Ogni input ha un id e un’etichetta propri. Il suggerimento è associato al gruppo tramite aria-describedby. Queste relazioni permettono al browser di presentare un’unica scelta esclusiva.

La struttura degli elementi radio racchiude l’input e l’etichetta in nhsuk-radios__item. I radio standard sono adatti a una domanda principale; la variante piccola è pensata per filtri più densi. Le opzioni fittizie di partecipazione restano mutuamente esclusive quando si usano i tasti freccia.

- La legenda descrive la scelta.

- Il nome condiviso per la partecipazione crea il gruppo di selezione.

- Ogni etichetta punta a un ID di input diverso.

Leggi la specifica di supporto

## Sistema di design NHS Aiuto senza nascondere le informazioni essenziali

### Usa un elemento details nativo

L’esempio details include nhsuk-details__summary e uno span summary-text, seguiti da nhsuk-details__text. Si apre con il comportamento nativo del browser. Mantieni visibili, al di fuori del contenuto a scomparsa, l’identità dell’appuntamento e l’informazione che non viene effettuata alcuna prenotazione, perché sono necessarie a tutti.

Nella versione 10.6, la macro Nunjucks API usa summary.text o summary.html; l’opzione precedente summaryText è deprecata. Se usi le macro, preferisci la nuova struttura dell’oggetto. L’esempio HTML evita una dipendenza dal motore di template, mantenendo la stessa struttura.

Leggi la specifica di supporto

## Sistema di design NHS Errori di scelta e riepilogo

### Convalida il gruppo senza preselezionare un’opzione

Inizialmente non è selezionata alcuna opzione. Se si continua senza rispondere, compare un errore in linea che viene associato al gruppo. L’anteprima porta quindi il focus sull’errore. Tornando dal riepilogo, la selezione resta visibile. Si tratta di decisioni sullo stato dell’applicazione, sovrapposte ai controlli nativi.

Il riepilogo ripete il metodo scelto e l’identità fittizia dell’appuntamento. L’azione è «Modifica la preferenza». Non compare alcuna conferma che possa far pensare che un servizio clinico abbia accettato la preferenza; inoltre, non vengono inventati consigli sanitari o requisiti di preparazione.

1. Continua dopo aver selezionato un metodo di partecipazione.

2. Seleziona «Al telefono» e apri il riepilogo locale.

3. Modifica la preferenza scegliendo «Di persona» e controlla il riepilogo aggiornato.

Leggi la specifica di supporto

## Sistema di design NHS Risorse frontend locali

### Usa il pacchetto e il modulo selezionati

La configurazione copia CSS 10.6.1 e il modulo browser in una directory di risorse statiche. Il modulo esporta initAll; chiamalo dopo aver creato il markup del componente. L’esempio indipendente usa la stessa distribuzione servita localmente e una regola Arial a livello di pagina.

I fogli di stile includono le regole dei componenti e le basi responsive. Il piccolo script che modifica il pannello del riepilogo è codice separato dell’applicazione. In un servizio di produzione, il record fittizio dell’appuntamento verrebbe sostituito con dati gestiti e una richiesta effettiva di modifica della preferenza sarebbe elaborata dal relativo backend.

Leggi la specifica di supporto

## Sistema di design NHS Verifica della composizione

### Verifica il contesto del servizio sanitario

Le verifiche essenziali sono che l’utente possa identificare l’appuntamento, capire che la preferenza di partecipazione non è ancora confermata e modificare il metodo scelto senza perdere il contesto. Un messaggio generico di operazione riuscita renderebbe meno chiara questa distinzione.

Verifica l’uso del gruppo di radio button e della sintesi details con la tastiera, poi controlla la visualizzazione stretta con il nome lungo di una clinica. L’errore per la mancata selezione dovrebbe riportare al gruppo. La libreria fornisce comportamenti riutilizzabili, mentre l’organizzazione resta responsabile delle effettive regole per gli appuntamenti e delle informazioni cliniche.

Leggi la specifica di supporto

## Sistema di design NHS Esempi di componenti del sistema di progettazione

### Gruppo di radio button per la partecipazione

Un fieldset con etichetta, input nativi mutuamente esclusivi e classi dei componenti NHS.

```
<fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset>
```

Riferimento del codice

### Aiuto contestuale facoltativo

L’elemento details nativo mostra informazioni aggiuntive senza nascondere l’attività principale.

```
<details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details>
```

Riferimento del codice

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

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Appointment preference — OpenDesign study</title><link rel="stylesheet" href="vendor/nhsuk-10.6.1/nhsuk-frontend.min.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}[hidden]{display:none!important}.study-strip{background:white;border-bottom:1px solid #d8dde0;padding:16px}.study-strip p{margin:0}.study-card{background:#fff;border:1px solid #d8dde0;padding:24px;margin-bottom:32px}h1:focus{outline:none}.study-result{border-left:4px solid #005eb8;padding:16px 24px;background:white}button,a,input{touch-action:manipulation}</style></head><body><header class="study-strip"><p class="nhsuk-body-s"><strong>OpenDesign · NHS component study</strong><br>Fictional appointment. This page cannot book or change care.</p></header><main class="nhsuk-width-container nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent"><div class="nhsuk-grid-row"><div class="nhsuk-grid-column-two-thirds"><div class="study-card"><h2 class="nhsuk-heading-m">Example appointment</h2><p class="nhsuk-body">Community clinic · Alex Example<br>Tuesday, 20 October · 10:30am</p></div><section id="choice"><h1 class="nhsuk-heading-l">Choose an attendance preference</h1><form id="form" novalidate><div class="nhsuk-form-group" id="group"><fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset></div><details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details><button class="nhsuk-button" type="submit">Review preference</button></form></section><section id="review" hidden><h1 class="nhsuk-heading-l" tabindex="-1" id="review-title">Your preference</h1><div class="study-result"><p class="nhsuk-body" id="selected"></p><p class="nhsuk-body">This is a local example. The appointment has not changed.</p></div><button class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-top-5" id="change" type="button">Change preference</button></section><p class="nhsuk-body-s">Native 10.6.1 controls with Arial. <a href="vendor/nhsuk-10.6.1/LICENSE.txt">Frontend licence</a>.</p></div></div></main><script type="module">import{initAll}from './vendor/nhsuk-10.6.1/nhsuk-frontend.min.js';initAll();const form=document.getElementById('form'),group=document.getElementById('group'),fs=group.querySelector('fieldset');form.addEventListener('submit',e=>{e.preventDefault();document.getElementById('error')?.remove();group.classList.remove('nhsuk-form-group--error');fs.setAttribute('aria-describedby','contact-hint');const value=form.querySelector(':checked')?.value;if(!value){group.classList.add('nhsuk-form-group--error');const p=document.createElement('p');p.id='error';p.className='nhsuk-error-message';p.tabIndex=-1;p.textContent='Select how you would prefer to attend';fs.querySelector('.nhsuk-radios').before(p);fs.setAttribute('aria-describedby','contact-hint error');p.focus();return}document.getElementById('selected').textContent='Selected method: '+(value==='telephone'?'Telephone':'In person');document.getElementById('choice').hidden=true;document.getElementById('review').hidden=false;document.getElementById('review-title').focus()});document.getElementById('change').addEventListener('click',()=>{document.getElementById('review').hidden=true;document.getElementById('choice').hidden=false;form.querySelector(':checked').focus()});</script></body></html>
```

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 NHS Configurazione dell’agent

### Punto di partenza per l’implementazione

Inserisci i comandi della shell e HTML nei rispettivi file. Arial è una sovrascrittura esplicita, indipendente, per l’anteprima; le organizzazioni NHS devono attenersi alla propria licenza per i font e ai requisiti del brand. Il file ZIP dell’esempio completo funzionante, disponibile in Sources, include anche le dipendenze esatte per l’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory e poi apri http://localhost:8080/nhs.html. Non aprire gli esempi basati su moduli tramite file://.

```
npm install nhsuk-frontend@10.6.1
mkdir -p public/assets
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.css public/assets/
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.js public/assets/

<link rel="stylesheet" href="/assets/nhsuk-frontend.min.css">
<style>body, body *, body *::before, body *::after { font-family: Arial, sans-serif !important; }</style>
<script type="module">
  import { initAll } from '/assets/nhsuk-frontend.min.js';
  initAll();
</script>
```

### Un prompt per il tuo progetto

```
Crea una domanda indipendente sulle preferenze di partecipazione agli appuntamenti usando NHS.UK Frontend 10.6.1. Usa un fieldset e una legenda per i metodi di partecipazione mutuamente esclusivi, suggerimenti associati ai radio button e l’elemento Details nativo per l’aiuto facoltativo. Mantieni visibili la domanda e le istruzioni essenziali. In caso di mancata risposta nel riepilogo, mostra un riepilogo degli errori collegato e un errore in linea; quando si torna dal riepilogo locale, conserva il metodo selezionato. Carica il CSS corrispondente e il modulo initAll, con la sovrascrittura Arial esplicitamente documentata per lo studio. Non aggiungere ricerca di appuntamenti, modifiche reali alle prenotazioni, consigli clinici o affermazioni di appartenenza al NHS.
```

## Sistema di design NHS Fonti e ambito

Studio indipendente sulle preferenze di partecipazione agli appuntamenti, basato su NHS.UK frontend 10.6.1. Nessun logo NHS, font Frutiger con licenza, prenotazione reale, istruzione clinica o avallo implicito.

- Tipografia Idoneità dei font e gerarchia tipografica per le transazioni.

- Colore Variabili semantiche denominate.

- Spaziatura Scala delle classi responsive.

- Layout Contenitore e griglia desktop.

- Radio button Struttura e stati del gruppo.

- Details Struttura del contenuto a scomparsa e attuale macro API.

- Codice sorgente del frontend Implementazione e distribuzione ufficiali.

- 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 NHS Risorse correlate

### NL sistema di design

Componi un’interfaccia per i servizi pubblici usando componenti reali dei contributori e un tema esplicito. Questo riferimento usa Utrecht CSS per illustrare la mappatura dei token, la struttura di un elenco di dati e due temi originali con lo stesso flusso di modifica.

### NSW sistema di design

Esplora i token di design NSW, la tipografia Public Sans e le schede native accessibili da tastiera attraverso una guida completa al workshop con un elenco di letture locale e indipendente.

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


- [Riferimento per l’implementazione](https://service-manual.nhs.uk/design-system/components/radios)
- [Fonte](https://service-manual.nhs.uk/design-system/styles/typography)
- [Fonte](https://service-manual.nhs.uk/design-system/styles/colour)
- [Fonte](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Fonte](https://service-manual.nhs.uk/design-system/styles/layout)
- [Leggi la specifica di supporto](https://service-manual.nhs.uk/design-system/styles/typography)
- [Riferimento del codice](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Leggi la specifica di supporto](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Leggi la specifica di supporto](https://service-manual.nhs.uk/design-system/styles/layout)
- [Leggi la specifica di supporto](https://service-manual.nhs.uk/design-system/components/radios)
- [Leggi la specifica di supporto](https://service-manual.nhs.uk/design-system/components/details)
- [Leggi la specifica di supporto](https://github.com/nhsuk/nhsuk-frontend)
- [Riferimento del codice](https://service-manual.nhs.uk/design-system/components/radios)
- [Riferimento del codice](https://service-manual.nhs.uk/design-system/components/details)
- [Tipografia Idoneità dei font e gerarchia tipografica per le transazioni.](https://service-manual.nhs.uk/design-system/styles/typography)
- [Colore Variabili semantiche denominate.](https://service-manual.nhs.uk/design-system/styles/colour)
- [Spaziatura Scala delle classi responsive.](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Layout Contenitore e griglia desktop.](https://service-manual.nhs.uk/design-system/styles/layout)
- [Radio button Struttura e stati del gruppo.](https://service-manual.nhs.uk/design-system/components/radios)
- [Details Struttura del contenuto a scomparsa e attuale macro API.](https://service-manual.nhs.uk/design-system/components/details)
- [Codice sorgente del frontend Implementazione e distribuzione ufficiali.](https://github.com/nhsuk/nhsuk-frontend)