# Sistema di design KERN

## Anteprima dell'interfaccia del sistema di design KERN

Modifica la nota, annulla o conferma l'eliminazione, ripristinala e cambia aspetto.

## Riferimento di design del sistema di design KERN

Estratto da @kern-ux/native 2.8.2; le scelte di layout dell'applicazione sono indicate separatamente.

### Tipografia e geometria

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Default font | Fira Sans | Carica il file font-face incluso nel pacchetto; CSS da solo non carica i file dei font. |
| Static sizes | 16 / 18 / 21px | Testo statico piccolo, medio e grande. |
| Adaptive sizes below 768px | 21 / 26 / 32 / 48px | Testo adattivo da medio a 2x-large. |
| Adaptive sizes from 768px | 24 / 32 / 48 / 72px | Il pacchetto modifica i token adattivi a questa media query. |
| Font weights | 400 / 500 / 600 | Regular, medium e semi-bold. |
| Spacing | 0, 2, 4, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192px | Token di spaziatura denominati, non una scala a incrementi uniformi. |
| Border widths | 0 / 1 / 2 / 4 / 8px | Il bordo predefinito è di 2px. |
| Radii | 0 / 2 / 4 / 8px / 50% | Nessuno, piccolo, predefinito, grande e circolare. |
| Focus outline | 4px | Il contorno focus-visible predefinito usa il ruolo contestuale di messa a fuoco dell'azione. |
| Specimen width | 800px | Scelta originale dell'applicazione, non un token contenitore di KERN. |
### Mappatura dei colori semantici

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Light text | neutral-950 | --kern-color-layout-text-default |
| Dark text | neutral-025 | Lo stesso ruolo semantico cambia con il tema. |
| Light action | darkblue-700 | --kern-color-action-default; on-action è bianco. |
| Dark action | darkblue-300 | On-action diventa nero. |
| Light / dark background | white / black | --kern-color-layout-background-default |
| Theme override | data-kern-theme="light" or "dark" | L'attributo esplicito prevale sulla preferenza di sistema. |
## Guida completa al sistema di design KERN

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.

## Comportamento nativo di sistema di design KERN HTML e CSS e del browser

### Cosa fornisce il pacchetto

> KERN native 2.8.2 include il componente CSS e i font. L'esempio li importa direttamente: il pulsante, la textarea, Details e Dialog sono elementi nativi con classi KERN. Non serve alcun provider React né un costruttore di componenti JavaScript. L'applicazione fornisce la logica decisionale per la finestra di dialogo; lo stile, da solo, non cancella un campo di input.

1. Installa il pacchetto nativo con versione bloccata.

2. Copia insieme il foglio di stile e i font, mantenendo i relativi percorsi.

3. Salva l'esempio completo qui sotto e servi la directory tramite HTTP.

Leggi la specifica di supporto

## Fira Sans e tipografia adattiva del sistema di design KERN

### Carica esplicitamente la tipografia

kern.min.css fa riferimento a Fira Sans; fonts/fira-sans.css dichiara i font effettivi e le risorse WOFF2 relative. Mantenere integra la directory dei font evita che un foglio di stile apparentemente corretto ricorra silenziosamente a un font alternativo. Le dimensioni del testo statico restano 16, 18 e 21px, mentre i token adattivi per titoli e intestazioni cambiano a 768px. Usa un elemento di intestazione per la gerarchia e la classe KERN appropriata per lo stile visivo. L'esempio mantiene un solo h1 e assegna alla finestra di dialogo un proprio h2.

Leggi la specifica di supporto

## Spaziatura, larghezza e layout adattivo del sistema di design KERN

### Separa i token dalla composizione

KERN espone token di spaziatura denominati da 0 a 192px, inclusi incrementi di 2px e 4px all'estremità inferiore. I token per bordi e raggi costituiscono scale separate. L'esempio usa un ritmo verticale di 24px e una riga di azioni con ritorno a capo. La larghezza massima del contenuto di 800px e il limite di 560px della finestra di dialogo sono scelte esplicite dell'applicazione; nessuna delle due viene presentata come contenitore universale di KERN. Sugli schermi stretti, il padding della pagina passa a 16px e la larghezza della finestra di dialogo resta entro quella del viewport. Il documento non impone un'altezza minima pari a quella del viewport, così da evitare cicli di ridimensionamento quando è incorporato.

Leggi la specifica di supporto

## Colori semantici e aspetto del sistema di design KERN

### Cambia i ruoli, non i singoli valori esadecimali

Il pacchetto usa proprietà semantiche CSS per testo, azioni, sfondo e focus. Le palette chiara e scura modificano insieme questi ruoli. Per esempio, action-default corrisponde a darkblue-700 in modalità chiara e a darkblue-300 in modalità scura, mentre il colore di primo piano passa dal bianco al nero. L'esempio imposta data-kern-theme su html e mostra un pulsante con stato premuto. La preferenza vale solo per questo documento e non viene salvata. Rimuovendo l'attributo esplicito, il foglio di stile seguirà prefers-color-scheme.

Leggi la specifica di supporto

## Una nota modificabile con etichetta per il sistema di design KERN

### Mantieni disponibili le istruzioni

La textarea usa kern-form-input__input all'interno di kern-form-input e ha una vera etichetta collegata all'id del campo. Il suggerimento ha un proprio id e resta collegato tramite aria-describedby. Poiché si tratta di una nota locale facoltativa, l'esempio non inventa errori per campi obbligatori né un salvataggio sul server. Restore example ripristina il valore iniziale e porta il focus sul campo modificabile. Una regione di stato annuncia il risultato senza sostituire l'etichetta né spostare il focus su un testo non interattivo.

Leggi la specifica di supporto

## Informazioni supplementari con Details per il sistema di design KERN

### Lascia che sia il browser a gestire il riquadro a scomparsa

L'elemento details gestisce il proprio stato di apertura; summary funge da attivatore. KERN aggiunge kern-details__header, un piccolo span per il titolo e kern-details__body per la presentazione. L'esempio inserisce qui le informazioni sulla conservazione perché sono supplementari. Le istruzioni obbligatorie, gli errori e l'azione di eliminazione restano visibili all'esterno del riquadro. Il comportamento nativo da tastiera permette l'attivazione senza un secondo gestore di clic o uno stato aria-expanded duplicato.

- Mantieni la descrizione di summary chiara e concisa.

- Non inserire un altro pulsante o link in summary.

- Usa Accordion per una serie di riquadri a scomparsa correlati, invece di mascherare azioni non correlate da Details.

Leggi la specifica di supporto

## Una conferma con un'opzione di uscita sicura per il sistema di design KERN

### Struttura e controllo

La finestra di dialogo è etichettata dal suo h2 e descritta da una breve indicazione delle conseguenze. L'intestazione, il corpo e il piè di pagina usano le classi documentate di KERN. showModal() porta la finestra di dialogo nativa nel livello superiore; close() termina l'interazione. Mantieni la nota riceve inizialmente il focus tramite autofocus. Escape chiude la finestra senza modificare il testo e l'evento close riporta il focus su Discard note. Solo Yes, discard modifica il valore. I clic sullo sfondo non hanno deliberatamente alcun effetto, poiché si tratta di una conferma distruttiva. In questo modo si seguono le indicazioni documentate per le decisioni critiche, anziché copiare indiscriminatamente il gestore generico dell'esempio che chiude la finestra cliccando sullo sfondo.

Leggi la specifica di supporto

## Integrazione e applicabilità del sistema di design KERN

### Includi l'intera catena di dipendenze

La procedura seguente installa un unico pacchetto con versione esatta e copia il suo CSS e la directory dei font. L'esempio completo include il proprio CSS di layout, l'attributo del tema radice, la struttura DOM e il collegamento degli eventi. Dopo averlo integrato in un modulo reale, verifica entrambi gli esiti della finestra di dialogo, Escape e gli schermi stretti. Il codice di KERN è distribuito con licenza EUPL; il sito distingue i contenuti testuali e grafici con licenza CC BY-NC-SA. Questo esempio originale non copia l'identità di un'autorità né implica che un servizio abbia superato una verifica di accessibilità. Un'applicazione reale richiede comunque persistenza, convalida lato server e valutazione dell'intero percorso utente.

Leggi la specifica di supporto

## Esempi di componenti del sistema di design KERN

### Nota nativa completa e conferma

Tutto il markup del documento, il layout CSS e il comportamento dell'applicazione; installa le risorse usando il blocco di configurazione.

```
<!doctype html><html lang="en" data-kern-theme="light"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>KERN workshop note</title><link rel="stylesheet" href="vendor/kern-2.8.2/kern.min.css"><link rel="stylesheet" href="vendor/kern-2.8.2/fonts/fira-sans.css"><style>body{margin:0;padding:clamp(16px,4vw,40px);color:var(--kern-color-layout-text-default)}main{max-width:800px;margin:auto;display:grid;gap:24px}.top,.actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.top{justify-content:space-between}.kern-dialog{max-width:min(560px,calc(100% - 32px))}textarea{width:100%;resize:vertical}#status{min-height:24px}.kern-details{width:100%}</style><main><div class="top"><span class="kern-preline">KERN · Native components</span><button class="kern-btn kern-btn--secondary" id="theme" aria-pressed="false"><span class="kern-label">Dark appearance</span></button></div><h1 class="kern-heading kern-heading--large">Workshop note</h1><p class="kern-body">Prepare a short note for your next workshop. This demonstration keeps edits only in this page.</p><div class="kern-form-input"><label class="kern-label" for="note">Your note</label><p class="kern-hint" id="hint">No personal information is needed. Nothing is submitted.</p><textarea class="kern-form-input__input" rows="5" id="note" aria-describedby="hint">Discuss accessible ways to collect workshop feedback.</textarea></div><details class="kern-details"><summary class="kern-details__header"><span class="kern-title kern-title--small">What happens to this note?</span></summary><div class="kern-details__body"><p class="kern-body">Edits live in this browser tab. Reloading restores the example text. Discarding clears the current note after confirmation; it does not delete a server record.</p></div></details><div class="actions"><button class="kern-btn kern-btn--primary" id="discard"><span class="kern-label">Discard note</span></button><button class="kern-btn kern-btn--secondary" id="restore"><span class="kern-label">Restore example</span></button></div><p id="status" class="kern-body" role="status"></p><dialog class="kern-dialog" id="confirm" aria-labelledby="confirm-title" aria-describedby="confirm-description"><header class="kern-dialog__header"><h2 class="kern-title kern-title--large" id="confirm-title">Discard this note?</h2></header><section class="kern-dialog__body"><p class="kern-body" id="confirm-description">Your current text will be cleared from this page. Choose Keep note to continue editing.</p></section><footer class="kern-dialog__footer"><button class="kern-btn kern-btn--secondary" id="keep" autofocus><span class="kern-label">Keep note</span></button><button class="kern-btn kern-btn--primary" id="clear"><span class="kern-label">Yes, discard</span></button></footer></dialog></main><script>const byId=id=>document.getElementById(id),note=byId('note'),modal=byId('confirm'),original=note.value;byId('discard').onclick=()=>modal.showModal();byId('keep').onclick=()=>modal.close('keep');byId('clear').onclick=()=>{note.value='';modal.close('discard');byId('status').textContent='Note discarded from this page.'};modal.addEventListener('close',()=>byId('discard').focus());byId('restore').onclick=()=>{note.value=original;byId('status').textContent='Example restored.';note.focus()};byId('theme').onclick=()=>{const dark=document.documentElement.dataset.kernTheme!=='dark';document.documentElement.dataset.kernTheme=dark?'dark':'light';byId('theme').setAttribute('aria-pressed',String(dark))};</script></html>
```

Riferimento del codice

## Configurazione dell'agente per sistema di design KERN

### Punto di partenza per l’implementazione

Non serve alcuna fase di build né un framework UI. Mantieni la directory dei font perché il suo CSS risolve i percorsi relativi dei file WOFF2. L'archivio ZIP dell'esempio funzionante completo, disponibile in Sources, include anche le dipendenze esatte dell'anteprima e il documento completo. Estrai l'archivio, esegui python3 -m http.server 8080 in quella directory, quindi apri http://localhost:8080/kern.html. Non aprire esempi basati su moduli tramite file://.

```
npm install --save-exact @kern-ux/native@2.8.2
mkdir -p vendor/kern-2.8.2
cp node_modules/@kern-ux/native/dist/kern.min.css vendor/kern-2.8.2/
cp -R node_modules/@kern-ux/native/dist/fonts vendor/kern-2.8.2/
# Save the complete HTML example below as kern.html beside vendor/.
python3 -m http.server 8080
# Open http://localhost:8080/kern.html
```

### Un prompt per il tuo progetto

```
Crea l'esempio di nota per un workshop locale usando @kern-ux/native 2.8.2 CSS e Fira Sans incluso nel pacchetto. Componi una textarea kern-form-input con etichetta, un riquadro nativo Details per le informazioni supplementari e un kern-dialog con intestazione, corpo e piè di pagina etichettati. Aprila con showModal(), imposta l'autofocus su Keep note, lascia che Escape annulli senza modificare il testo e cancella la nota solo dopo Yes, discard. Alla chiusura, riporta il focus all'attivatore e fornisci Restore example. Alterna data-kern-theme tra chiaro e scuro senza inventare nuovi token di palette. Mantieni le scelte originali di larghezza dell'applicazione e lascia la nota in locale; non occorrono caricamenti, bozze sul server né affermazioni relative a servizi governativi.
```

## Fonti e ambito del sistema di design KERN

Dimostrazione originale basata sul codice di KERN. Non si intende suggerire un'identità governativa, un'archiviazione persistente o una certificazione di accessibilità.

- Panoramica di KERN Contesto della pubblica amministrazione e accesso alle risorse.

- Sistema di design Fondamenti, componenti e approccio del sistema.

- Guida all'integrazione Configurazione documentata del pacchetto nativo e del foglio di stile.

- 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 del sistema di design KERN

### Michigan Forty Two

Scopri i flussi di lavoro WordPress supportati da Forty-Two, la palette web e gli schemi delle directory del personale attraverso un esempio funzionante di filtro per ruolo e ricerca.

### Aksel

Usa i token ax effettivi di Aksel v8, la densità nativa della tabella e la struttura semantica dell’intestazione. Ordina e seleziona record fittizi di follow-up, confrontando i temi chiari e scuri.

### NHS sistema di design

Usa la tipografia NHS.UK, spaziature responsive, opzioni radio raggruppate e dettagli contestuali per creare un percorso chiaro di scelta delle preferenze per un appuntamento.


- [Riferimento per l’implementazione](https://www.kern-ux.de/komponenten/dialog/)
- [Fonte](https://www.npmjs.com/package/@kern-ux/native/v/2.8.2)
- [Leggi la specifica di supporto](https://www.kern-ux.de/erste-schritte/entwicklerinnen/einbinden-von-kern/)
- [Leggi la specifica di supporto](https://www.npmjs.com/package/@kern-ux/native/v/2.8.2)
- [Leggi la specifica di supporto](https://www.kern-ux.de/erste-schritte/entwicklerinnen/light-dark-modus/)
- [Leggi la specifica di supporto](https://www.kern-ux.de/komponenten/form-inputs/)
- [Leggi la specifica di supporto](https://www.kern-ux.de/komponenten/details/)
- [Leggi la specifica di supporto](https://www.kern-ux.de/komponenten/dialog/)
- [Leggi la specifica di supporto](https://www.kern-ux.de/lizenz-und-nutzungsbedingungen/)
- [Riferimento del codice](https://www.kern-ux.de/komponenten/dialog/)
- [Panoramica di KERN Contesto della pubblica amministrazione e accesso alle risorse.](https://www.kern-ux.de/)
- [Sistema di design Fondamenti, componenti e approccio del sistema.](https://www.kern-ux.de/design-system/)
- [Guida all'integrazione Configurazione documentata del pacchetto nativo e del foglio di stile.](https://www.kern-ux.de/erste-schritte/entwicklerinnen/einbinden-von-kern/)