# Sistema di design Nord

## Anteprima dell’interfaccia sistema di design Nord

Scegli tra cinque capienze per la sala, convalida un titolo e prepara un riepilogo locale della richiesta.

## Riferimento di progettazione sistema di design Nord

Token Nord 9.0.4 e documentazione aggiornata dei componenti. I valori qui sotto descrivono il tema predefinito Therapy, non tutti i brand Nordhealth. La documentazione pubblica non concede il permesso di usare Nord al di fuori dell’ambito previsto per Nordhealth.

### Valori dei ruoli Therapy

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --n-color-accent | #3559c7 | Azione primaria. |
| --n-color-text | #0c1a3d | Contenuto principale. |
| --n-color-text-weak | #36434a | Testo di supporto. |
| --n-color-background | #fafbfb | Pagina. |
| --n-color-surface | #ffffff | Pannello. |
| --n-color-border | #d8dee4 | Divisore. |
| --n-color-border-strong | #bcc5cc | Bordo dei controlli. |
| --n-color-text-error | #d24023 | Messaggio di errore. |
### Spaziatura

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --n-space-xs | 4px | Ristretto. |
| --n-space-s | 8px | Correlato. |
| --n-space-m | 16px | Gruppo. |
| --n-space-l | 24px | Sezione. |
| --n-space-xl | 36px | Grande. |
| --n-space-xxl | 72px | Maggiore. |
### Tipografia e forma

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --n-font-size-m | 0.875rem | Testo del corpo. |
| --n-font-size-l | 1rem | Testo grande. |
| --n-font-size-xl | 1.25rem | Titolo della sezione. |
| --n-font-size-xxl | 1.5rem | Titolo. |
| --n-line-height | 1.5 | Moltiplicatore del corpo del testo. |
| --n-line-height-form | 20px | Bordo dei controlli. |
| --n-font-weight-heading | 600 | Intestazione. |
| --n-border-radius-s | 3px | Controllo. |
| --n-border-radius | 5px | Superficie. |
### Contratto di Input

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| label / hint / error | Built-in field text | Un Input autonomo include la propria etichetta. |
| expand | Boolean, default false | Occupa tutta la larghezza del contenitore. |
| size | s / m / l | Medio per impostazione predefinita. |
| readonly versus disabled | Submitted versus excluded | La modalità di sola lettura mantiene il controllo focalizzabile. |
| --n-input-inline-size | 240px | Larghezza fissa predefinita; per moduli adattabili, preferisci expand. |
### Contratto di Select

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Default slot | Native option elements | Non creare nord-option. |
| value | String | Selezione controllata. |
| required | Boolean | Usa novalidate e gestisci gli errori nell’applicazione. |
| change | User selection event | Leggi component.value. |
| focus() | Component method | Attendi la definizione prima di chiamare il metodo. |
### Contratto di Button

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| type | submit by default | Specifica button per le azioni che non inviano il modulo. |
| variant | default / primary / dashed / plain / danger | Usa un solo primario per sezione. |
| href | Creates anchor semantics | Per la navigazione. |
| size | s / m / l | Medio per impostazione predefinita. |
| loading | Busy presentation | Abbinalo a uno stato annunciato. |
## Sistema di design Nord 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 Nord Nord è un sistema di prodotto interno con riferimenti pubblici

### Rendi evidente l’uso previsto

> La documentazione di Nord descrive un sistema progettato per le esperienze Nordhealth. I componenti consultabili pubblicamente sono riferimenti utili, ma l’esempio non implica che il brand o i termini relativi ai componenti consentano un riutilizzo commerciale indiscriminato. I nomi delle sale e il flusso di richiesta usati qui sono dati dimostrativi originali.

La tabella dei token predefiniti rappresenta Therapy. Un’applicazione veterinaria o sanitaria deve selezionare il tema previsto, invece di presumere che un accento blu definisca ogni prodotto Nordhealth. Mantieni la scelta del tema a livello di applicazione.

Leggi la specifica di supporto

## Sistema di design Nord I ruoli Therapy mantengono l’interfaccia discreta

### Distingui i ruoli di testo, bordo e superficie

L’esempio usa il ruolo del testo principale per i dettagli della richiesta e quello più tenue per le spiegazioni. I pannelli bianchi si sovrappongono alla pagina bianco sporco; un bordo più marcato identifica i campi modificabili. Il testo di errore compare accanto al titolo non valido, anziché tingere di rosso l’intera interfaccia. L’anteprima non contiene informazioni cliniche o sui pazienti.

Leggi la specifica di supporto

## Sistema di design Nord Il testo compatto richiede interlinea adeguata

### Usa insieme la dimensione e l’interlinea documentate

Il token abbina un corpo del testo di 0.875rem a un’interlinea di 1.5, mentre il testo dei moduli ha una propria altezza di riga di 20px. Sono regole diverse: applicare ai paragrafi lunghi il valore previsto per i moduli li comprime inutilmente. Il riferimento interattivo usa il token della famiglia Nordhealth Sans; questa interpretazione offline utilizza deliberatamente i font di sistema disponibili, senza dichiarare di includere un font con licenza.

Leggi la specifica di supporto

## Sistema di design Nord Espandi i controlli all’interno della griglia dell’applicazione

### Il componente non sceglie il breakpoint della pagina

Input parte da una variabile inline-size di 240px. expand è la modalità documentata per occupare la colonna disponibile del campo. Nel nostro esempio, su desktop l’elenco delle sale è accanto all’editor, mentre su mobile i due elementi sono impilati; il breakpoint è una scelta dell’applicazione, non un token Nord. Quando si seleziona una riga, il nome della sala, la capienza e l’etichetta di disponibilità restano visibili.

Nell’interpretazione offline, l’elenco delle sale selezionate è un gruppo di radio nativi. L’esempio separato fornito dalla libreria usa un Select con cinque opzioni. Entrambi consentono di scegliere una sala, ma mostrano layout diversi e non sono presentati come implementazioni runtime identiche del componente.

Leggi la specifica di supporto

## Sistema di design Nord Scegli un solo elemento responsabile di etichette e messaggi di errore

### Per questo modulo bastano campi autonomi

Input o Select possono gestire autonomamente etichetta, suggerimento ed errore. Se viene usata, la composizione Field assume queste responsabilità: duplicare entrambi i gruppi di proprietà produrrebbe indicazioni ridondanti. Questo esempio usa la modalità autonoma e assegna un unico errore breve quando il titolo, dopo aver rimosso gli spazi iniziali e finali, è vuoto.

I campi disabilitati non vengono inclusi nell’invio, mentre quelli in sola lettura mantengono un valore pertinente disponibile per il focus e l’invio. Non disabilitare l’identificativo di una sala solo per impedirne la modifica, se deve comunque accompagnare la richiesta.

- Mantieni visibile l’etichetta del titolo della richiesta.

- Usa il suggerimento per indicare il contenuto atteso, non come sostituto dell’etichetta.

- Associa il messaggio di convalida al controllo non valido.

Leggi la specifica di supporto

## Sistema di design Nord Select contiene normali elementi option

### Leggi il valore dal componente host

Lo slot predefinito accetta elementi option nativi. Ogni sala ha un valore stabile e un’etichetta visibile descrittiva che ne indica la capienza. L’evento change informa l’applicazione, che ricalcola il riepilogo usando il valore del componente host. Questa composizione non include alcun tag personalizzato nord-option.

Nord consiglia Select per un insieme di opzioni più ampio e i pulsanti radio quando è utile mostrare direttamente poche scelte. L’esempio propone cinque sale; la versione offline con radio rende facile confrontare visivamente le capienze.

Leggi la specifica di supporto

## Sistema di design Nord I valori predefiniti di Button influiscono sulla composizione del modulo

### Specifica esplicitamente semantica di azione, collegamento e caricamento

Per impostazione predefinita, Nord Button usa type="submit". Di conseguenza, un’azione secondaria di anteprima o simile a un ripristino all’interno di un modulo deve specificare il proprio type, se non deve inviarlo. Assegnando un href al componente, la semantica esposta diventa quella di un collegamento: usa questa modalità per la navigazione, invece di un gestore click che imita un’ancora.

Lo stato di caricamento mantiene il pulsante focalizzabile e impedisce attivazioni ripetute. Il suo indicatore di caricamento è nascosto alle tecnologie assistive, quindi l’applicazione deve comunicare l’avanzamento a parole. Non sostituirlo automaticamente con disabled: un’azione non disponibile e un’azione già in corso richiedono modalità diverse di focus e feedback.

L’esempio di richiesta di una sala calcola la bozza in modo sincrono, quindi non richiede un intervallo di caricamento. Il pulsante principale convalida il titolo e legge la sala scelta; se si modifica uno dei due, la frase della bozza non più aggiornata viene rimossa. Le sezioni Input e Select qui sopra spiegano quali API Nord gestiscono questi campi.

Leggi la specifica di supporto

## Sistema di design Nord Carica il CSS richiesto prima di chiamare i metodi del componente

### Il caricamento per i prototipi e il bundling per la produzione sono diversi

La guida rapida ufficiale abbina il modulo dei componenti al framework CSS. Quest’ultimo fornisce i token condivisi e gli stili di base. Per un’applicazione con bundling, installa @nordhealth/css e @nordhealth/components, importa una sola volta il CSS e importa soltanto i moduli dei componenti che utilizzi. I moduli dei pacchetti registrano i propri elementi come effetti collaterali.

React 19 può usare direttamente questi elementi personalizzati. La guida attuale indica come deprecato il wrapper precedente @nordhealth/react. Il rendering lato server non include lo shadow DOM dei componenti; le importazioni Next.js richiedono il confine client. Tieni presenti questi limiti d’integrazione e distinguili dall’anteprima offline HTML, le cui interazioni funzionano senza la libreria.

1. Carica il framework CSS prima dei moduli dei componenti.

2. Prima di chiamare focus durante l’inizializzazione, attendi customElements.whenDefined.

3. Collega i gestori per la convalida e lo stato locale.

4. Per la produzione, crea un bundle delle dipendenze invece di affidarti a numerose richieste di moduli CDN.

Leggi la specifica di supporto

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

### Esempio interattivo completo e autonomo

Salva il documento completo come index.html e aprilo in un browser. Interpretazione offline HTML/CSS dei token Nord Therapy; l’integrazione nativa con Web Components è descritta separatamente.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Nord room request interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#fafbfb;color:#0c1a3d;font:14px/1.5 system-ui,sans-serif}button,input{font:inherit}header{height:52px;background:white;border-bottom:1px solid #d8dee4;padding:0 24px;display:flex;align-items:center;justify-content:space-between}header small{color:#36434a}main{max-width:960px;margin:36px auto;padding:0 24px}h1{font-size:24px;line-height:1.2;margin:0 0 8px}h2{font-size:20px;line-height:1.2;margin:0 0 16px}p{margin:0 0 24px}.muted{color:#36434a}.layout{display:grid;grid-template-columns:310px 1fr;gap:24px}.panel{background:white;border:1px solid #d8dee4;border-radius:5px;padding:24px}fieldset{margin:0;padding:0;border:0;min-width:0}legend{font-weight:600;margin-bottom:16px}.room{display:flex;gap:12px;padding:12px;border:1px solid #d8dee4;border-radius:3px;margin-bottom:8px;cursor:pointer;align-items:center}.room:has(:checked){border-color:#3559c7;background:#f0f4ff}.room input{accent-color:#3559c7}.room span{flex:1}.room small{display:block;color:#36434a}.room b{font-size:12px;font-weight:500}.diagram{height:120px;background:#f6f8f8;display:grid;place-items:center;margin:-24px -24px 24px;border-radius:5px 5px 0 0;border-bottom:1px solid #d8dee4}.table{height:50px;border:2px solid #bcc5cc;border-radius:5px;background:#fff;position:relative;transition:width .2s ease}.chair{position:absolute;width:12px;height:10px;border:1px solid #bcc5cc;background:white;border-radius:3px;top:-16px}.chair.bottom{top:auto;bottom:-16px}label.field{display:block;font-weight:600;margin:16px 0 8px}#title{width:100%;border:1px solid #bcc5cc;border-radius:3px;height:36px;padding:7px 12px;color:inherit;background:white}#title[aria-invalid=true]{border-color:#d24023}.error{color:#d24023;min-height:20px;font-size:12px;margin:4px 0 12px}button{background:#3559c7;color:white;border:1px solid transparent;box-shadow:0 1px 3px #0c0c0c17;border-radius:3px;padding:7px 16px;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #3559c7;outline-offset:3px}.summary{margin-top:24px;background:#f0f4ff;border:1px solid #c6d4f9;padding:16px;border-radius:5px;overflow-wrap:anywhere}.summary:empty{display:none}.boundary{font-size:12px;color:#36434a;margin-top:24px}#selected{font-weight:600}.facts{display:flex;gap:24px;margin-bottom:24px}.facts strong{font-size:20px;display:block}.facts span{font-size:12px;color:#36434a}@media(max-width:650px){main{margin:24px auto;padding:0 16px}.layout{grid-template-columns:1fr;gap:16px}.panel{padding:16px}.diagram{margin:-16px -16px 16px}.room{padding:8px 12px}header{padding:0 16px}header small{display:none}}</style><header><strong>◈ Workplace</strong><small>Room request workspace</small></header><main><h1>A room for your next conversation</h1><p class="muted">Choose a room and prepare a request draft.</p><div class="layout"><section class="panel"><fieldset><legend>Choose a room</legend><div id="rooms"></div></fieldset></section><section class="panel"><div class="diagram" aria-hidden="true"><div class="table" id="table"></div></div><h2 id="selected">Birch</h2><div class="facts"><div><strong id="capacity">4</strong><span>Seats</span></div><div><strong>Draft</strong><span>Request status</span></div></div><form novalidate><label class="field" for="title">Request title</label><input id="title" type="text" aria-describedby="hint error" placeholder="e.g. Design review"><div id="error" class="error" role="alert"></div><p id="hint" class="muted">Use a non-sensitive meeting title. Availability is not checked in this example.</p><button type="submit">Prepare request</button></form><div class="summary" id="result" role="status"></div></section></div><p class="boundary">Independent HTML interpretation of Nord Therapy tokens. Nord is intended for Nordhealth products. This example creates a local draft only; it does not reserve a room.</p></main><script>const rooms=[['Birch',4],['Cedar',6],['Elm',8],['Maple',10],['Pine',12]],field=document.querySelector('#title'),result=document.querySelector('#result');let selected=0;document.querySelector('#rooms').innerHTML=rooms.map(([name,n],i)=>`<label class="room"><input type="radio" name="room" value="${i}" ${i===0?'checked':''}><span>${name}<small>Meeting room</small></span><b>${n} seats</b></label>`).join('');function update(){let [name,n]=rooms[selected];document.querySelector('#selected').textContent=name;document.querySelector('#capacity').textContent=n;let table=document.querySelector('#table');table.style.width=(n*12+44)+'px';table.innerHTML=Array.from({length:n},(_,i)=>`<i class="chair ${i>=n/2?'bottom':''}" style="left:${12+(i%(n/2))*24}px"></i>`).join('');result.textContent=''}document.querySelectorAll('[name=room]').forEach(input=>input.onchange=()=>{selected=Number(input.value);update()});document.querySelector('form').onsubmit=e=>{e.preventDefault();if(!field.value.trim()){document.querySelector('#error').textContent='Enter a request title.';field.setAttribute('aria-invalid','true');field.focus();return}result.textContent='Draft prepared: '+field.value.trim()+' · '+rooms[selected][0]+' · '+rooms[selected][1]+' seats. No room is reserved.'};field.oninput=()=>{field.removeAttribute('aria-invalid');document.querySelector('#error').textContent='';result.textContent=''};update();</script></html>
```

Riferimento del codice

- Questo esempio presenta le opzioni delle sale come pulsanti radio; l’esempio Nord nativo usa Select con normali elementi option. Nessuno dei due riserva una sala reale.

### Una richiesta di sala con etichetta e convalida esplicita

nord-input e nord-select autonomi forniscono etichette senza la famiglia Field opzionale. All’invio, vengono letti i valori dei componenti e alla proprietà error dell’input viene assegnato l’errore.

```
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Room request draft</title>
<link rel="stylesheet" href="https://nordcdn.net/ds/css/5.2.4/nord.min.css">
<script type="module" src="https://nordcdn.net/ds/components/5.3.0/index.js"></script>
<style>main{max-width:560px;margin:auto;padding:var(--n-space-l)}form{display:grid;gap:var(--n-space-l)}</style>
<main><h1>Prepare a room request</h1><p>For an authorized Nordhealth product. Local demonstration only.</p>
<form novalidate>
<nord-input id="request" name="request" label="Request title" hint="Use a non-sensitive meeting title." required expand></nord-input>
<nord-select id="room" name="room" label="Room" value="Birch" expand>
<option value="Birch">Birch · 4 seats</option><option value="Cedar">Cedar · 6 seats</option>
<option value="Elm">Elm · 8 seats</option><option value="Maple">Maple · 10 seats</option><option value="Pine">Pine · 12 seats</option>
</nord-select>
<nord-button type="submit" variant="primary">Prepare request</nord-button>
</form><p id="result" role="status"></p></main>
<script type="module">
await Promise.all(['nord-input','nord-select','nord-button'].map(name=>customElements.whenDefined(name)));
const form=document.querySelector('form'), title=document.querySelector('#request'),room=document.querySelector('#room'),result=document.querySelector('#result');
form.addEventListener('submit',event=>{
 event.preventDefault();title.error=title.value.trim()?'':'Enter a request title.';
 if(title.error){title.focus();return;}
 result.textContent=`Draft: ${title.value.trim()} in ${room.value}. No room is reserved.`;
});
form.addEventListener('input',()=>{result.textContent='';title.error='';});
form.addEventListener('change',()=>{result.textContent='';});
</script></html>
```

Riferimento del codice

- Cinque opzioni di sala rendono Select una scelta compatta e utile.

- Per impostazione predefinita Button invia il modulo; in questo esempio il type è specificato esplicitamente.

- Gli elementi personalizzati vengono attesi prima di usarne i metodi. Non viene chiamato alcun servizio di prenotazione.

## Sistema di design Nord Configurazione dell’agente

### Punto di partenza per l’implementazione

Prototipo completo tramite CDN pubblico per l’uso autorizzato di Nordhealth. La documentazione attuale specifica CSS 5.2.4 e components 5.3.0. Per la produzione, è preferibile creare un bundle dei pacchetti npm; l’interpretazione visiva offline qui sotto non carica questi pacchetti remoti.

```
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Room request draft</title>
<link rel="stylesheet" href="https://nordcdn.net/ds/css/5.2.4/nord.min.css">
<script type="module" src="https://nordcdn.net/ds/components/5.3.0/index.js"></script>
<style>main{max-width:560px;margin:auto;padding:var(--n-space-l)}form{display:grid;gap:var(--n-space-l)}</style>
<main><h1>Prepare a room request</h1><p>For an authorized Nordhealth product. Local demonstration only.</p>
<form novalidate>
<nord-input id="request" name="request" label="Request title" hint="Use a non-sensitive meeting title." required expand></nord-input>
<nord-select id="room" name="room" label="Room" value="Birch" expand>
<option value="Birch">Birch · 4 seats</option><option value="Cedar">Cedar · 6 seats</option>
<option value="Elm">Elm · 8 seats</option><option value="Maple">Maple · 10 seats</option><option value="Pine">Pine · 12 seats</option>
</nord-select>
<nord-button type="submit" variant="primary">Prepare request</nord-button>
</form><p id="result" role="status"></p></main>
<script type="module">
await Promise.all(['nord-input','nord-select','nord-button'].map(name=>customElements.whenDefined(name)));
const form=document.querySelector('form'), title=document.querySelector('#request'),room=document.querySelector('#room'),result=document.querySelector('#result');
form.addEventListener('submit',event=>{
 event.preventDefault();title.error=title.value.trim()?'':'Enter a request title.';
 if(title.error){title.focus();return;}
 result.textContent=`Draft: ${title.value.trim()} in ${room.value}. No room is reserved.`;
});
form.addEventListener('input',()=>{result.textContent='';title.error='';});
form.addEventListener('change',()=>{result.textContent='';});
</script></html>
```

### Un prompt per il tuo progetto

```
Usa i ruoli semantici Nord Therapy con controlli dotati di etichetta. Espandi i campi all’interno di un layout applicativo adattabile. Convalida il titolo della richiesta dopo averne rimosso gli spazi iniziali e finali, mantieni una sola sala selezionata e mostra soltanto un esito di bozza locale. Per le implementazioni Nordhealth reali, rispetta le autorizzazioni documentate relative a pacchetti e temi.
```

## Sistema di design Nord Fonti e ambito

Riferimento indipendente OpenDesign. Nord dichiara che l’uso previsto riguarda i prodotti Nordhealth. Questa interpretazione originale HTML non prenota una sala né concede diritti d’uso del brand o dei componenti.

- Riferimento dei token Valori Therapy, spaziatura e tipografia.

- Configurazione di Web Components CSS richiesto, importazioni e limiti dei framework.

- Input Etichette, errori e dimensionamento adattabile.

- Select Opzioni e gestione dei valori.

- Button Semantica di invio e varianti delle azioni.

## Sistema di design Nord Risorse correlate

### Oracle Redwood

Esamina la palette effettiva, i ruoli semantici, le spaziature e i limiti di densità di Oracle JET 19 Redwood attraverso un foglio di lavoro originale, completo e modificabile per la revisione delle scorte.

### Orange OUDS Web

Esamina i token semantici effettivi, i pacchetti tema e il comportamento nativo di Offcanvas di Orange OUDS 1.4 attraverso uno studio comparativo completo e responsive.

### Palantir Blueprint

Crea un’area di lavoro dati ad alta densità con Blueprint: token verificati per tipografia e intenti, tabella dati selezionabile, pannello di revisione e codice sorgente completo in React.


- [Riferimento per l’implementazione](https://nordhealth.design/core/tokens/)
- [Fonte](https://nordhealth.design/core/tokens/)
- [Fonte](https://nordhealth.design/components/input/)
- [Fonte](https://nordhealth.design/components/select/)
- [Fonte](https://nordhealth.design/components/button/)
- [Leggi la specifica di supporto](https://nordhealth.design/docs/developer/web-components/)
- [Leggi la specifica di supporto](https://nordhealth.design/core/tokens/)
- [Leggi la specifica di supporto](https://nordhealth.design/components/input/)
- [Leggi la specifica di supporto](https://nordhealth.design/components/select/)
- [Leggi la specifica di supporto](https://nordhealth.design/components/button/)
- [Riferimento del codice](https://nordhealth.design/core/tokens/)
- [Riferimento del codice](https://nordhealth.design/components/input/)
- [Riferimento dei token Valori Therapy, spaziatura e tipografia.](https://nordhealth.design/core/tokens/)
- [Configurazione di Web Components CSS richiesto, importazioni e limiti dei framework.](https://nordhealth.design/docs/developer/web-components/)
- [Input Etichette, errori e dimensionamento adattabile.](https://nordhealth.design/components/input/)
- [Select Opzioni e gestione dei valori.](https://nordhealth.design/components/select/)
- [Button Semantica di invio e varianti delle azioni.](https://nordhealth.design/components/button/)