# KERN Designsystem

## KERN Designsystem – Interface-Vorschau

Bearbeite die Notiz, brich ab oder bestätige das Verwerfen, stelle sie wieder her und ändere die Darstellung.

## KERN Designsystem – Designreferenz

Extrahiert aus @kern-ux/native 2.8.2; Entscheidungen zum Anwendungs-Layout sind separat gekennzeichnet.

### Typografie und Geometrie

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Default font | Fira Sans | Binde die mitgelieferte Font-Face-Datei ein; CSS allein lädt keine Schriftdateien. |
| Static sizes | 16 / 18 / 21px | Kleine, mittlere und große statische Schriftgrößen. |
| Adaptive sizes below 768px | 21 / 26 / 32 / 48px | Adaptive Schriftgrößen von mittel bis 2x-large. |
| Adaptive sizes from 768px | 24 / 32 / 48 / 72px | Das Paket ändert adaptive Tokens an diesem Media Query. |
| Font weights | 400 / 500 / 600 | Regular, medium und semi-bold. |
| Spacing | 0, 2, 4, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192px | Benannte Abstandstokens, keine gleichmäßige Abstufung. |
| Border widths | 0 / 1 / 2 / 4 / 8px | Der Standardrahmen ist 2px breit. |
| Radii | 0 / 2 / 4 / 8px / 50% | Keine, klein, Standard, groß und kreisförmig. |
| Focus outline | 4px | Der Standardumriss für focus-visible verwendet die kontextbezogene Fokusrolle für Aktionen. |
| Specimen width | 800px | Ursprüngliche Anwendungsentscheidung, kein Container-Token von KERN. |
### Semantische Farbzuordnung

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Light text | neutral-950 | --kern-color-layout-text-default |
| Dark text | neutral-025 | Dieselbe semantische Rolle ändert sich je nach Theme. |
| Light action | darkblue-700 | --kern-color-action-default; on-action ist weiß. |
| Dark action | darkblue-300 | On-action wird schwarz. |
| Light / dark background | white / black | --kern-color-layout-background-default |
| Theme override | data-kern-theme="light" or "dark" | Ein explizites Attribut hat Vorrang vor der Systemeinstellung. |
## KERN-Designsystem: vollständiger Leitfaden

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

## KERN-Designsystem: natives HTML, CSS und Browserverhalten

### Was das Paket bereitstellt

> KERN native 2.8.2 enthält Komponenten-CSS und Schriftdateien. Das Beispiel bindet diese Dateien direkt ein: Der Button, das Textarea, Details und Dialog sind native Elemente mit KERN-Klassen. Weder ein React-Provider noch ein JavaScript-Komponentenkonstruktor ist erforderlich. Die Anwendung stellt die Entscheidungslogik rund um den Dialog bereit; das Styling allein leert kein Eingabefeld.

1. Installiere das exakt festgelegte native Paket.

2. Kopiere Stylesheet und Schriftdateien gemeinsam und behalte ihre relativen Pfade bei.

3. Speichere das vollständige Beispiel unten und stelle das Verzeichnis über HTTP bereit.

Unterstützende Spezifikation lesen

## KERN-Designsystem: Fira Sans und adaptive Typografie

### Typografie explizit laden

kern.min.css benennt Fira Sans; fonts/fira-sans.css deklariert die tatsächlichen Font Faces und relativen WOFF2-Dateien. Wenn das Schriftverzeichnis intakt bleibt, fällt ein vermeintlich korrektes Stylesheet nicht unbemerkt auf eine Ersatzschrift zurück. Statische Schriftgrößen bleiben bei 16, 18 und 21px, während sich adaptive Titel- und Überschriften-Tokens bei 768px ändern. Verwende ein Überschriftenelement für die Hierarchie und die passende KERN-Klasse für die visuelle Gestaltung. Das Beispiel verwendet ein h1 und gibt dem Dialog ein eigenes h2.

Unterstützende Spezifikation lesen

## KERN-Designsystem: Abstände, Breite und responsives Layout

### Tokens und Layout getrennt halten

KERN stellt benannte Abstandstokens von 0 bis 192px bereit, darunter Abstufungen von 2px und 4px im unteren Bereich. Rahmen- und Radius-Tokens bilden separate Skalen. Das Beispiel verwendet einen vertikalen Rhythmus von 24px und eine umbrechende Aktionszeile. Die maximale Inhaltsbreite von 800px und die Dialogbegrenzung von 560px sind explizite Anwendungsentscheidungen; keine davon wird als universeller KERN-Container dargestellt. Bei schmalen Ansichten wird der Seitenabstand auf 16px gesetzt und die Dialogbreite bleibt innerhalb des Viewports. Für das Dokument wird keine Mindesthöhe relativ zur Viewport-Höhe festgelegt, sodass beim Einbetten keine Rückkopplungsschleife durch Größenänderungen entsteht.

Unterstützende Spezifikation lesen

## KERN-Designsystem: Semantische Farbe und Erscheinungsbild

### Rollen wechseln, nicht einzelne Hex-Werte

Das Paket verwendet semantische CSS-Eigenschaften für Text, Aktionen, Hintergrund und Fokus. Helle und dunkle Farbpaletten ändern diese Rollen gemeinsam. So wird action-default im hellen Modus darkblue-700 und im dunklen Modus darkblue-300 zugeordnet, während die Vordergrundfarbe von Weiß zu Schwarz wechselt. Das Beispiel setzt data-kern-theme auf html und zeigt einen Button mit gedrücktem Zustand. Die Einstellung gilt nur für dieses Dokument und wird nicht gespeichert. Wird das explizite Attribut entfernt, folgt das Stylesheet wieder prefers-color-scheme.

Unterstützende Spezifikation lesen

## KERN-Designsystem: Eine beschriftete, bearbeitbare Notiz

### Anweisungen stets verfügbar halten

Das Textarea verwendet kern-form-input__input innerhalb von kern-form-input. Ein echtes Label verweist über die Input-ID auf das Eingabefeld. Der Hinweis hat eine eigene ID und bleibt über aria-describedby damit verknüpft. Da es sich um eine optionale lokale Notiz handelt, erfindet das Beispiel weder Fehlermeldungen für Pflichtfelder noch einen serverseitigen Speichervorgang. Wiederherstellen setzt den Anfangswert und fokussiert das bearbeitbare Feld. Ein Statusbereich gibt das Ergebnis bekannt, ohne das Label zu ersetzen oder den Fokus auf einen passiven Text zu verschieben.

Unterstützende Spezifikation lesen

## KERN-Designsystem: Zusatzinformationen mit Details

### Die Offenlegung dem Browser überlassen

Das details-Element verwaltet seinen geöffneten Zustand; das summary-Element dient als Auslöser. KERN ergänzt kern-details__header, ein kleines Titel-Span und kern-details__body für die Darstellung. Im Beispiel stehen hier ergänzende Informationen zur Aufbewahrung. Erforderliche Anweisungen, Fehlermeldungen und die Aktion zum Verwerfen bleiben außerhalb der Offenlegung sichtbar. Das native Tastaturverhalten ermöglicht die Aktivierung ohne zweiten Click-Handler oder doppelten aria-expanded-Zustand.

- Formuliere die Zusammenfassung aussagekräftig und knapp.

- Füge kein weiteres Button- oder Link-Element in das summary-Element ein.

- Verwende für mehrere zusammengehörige Offenlegungen ein Accordion, statt nicht zusammengehörige Aktionen als Details zu tarnen.

Unterstützende Spezifikation lesen

## KERN-Designsystem: Eine Bestätigung mit sicherem Ausstieg

### Struktur und Steuerung

Der Dialog wird durch sein h2 beschriftet und durch eine kurze Beschreibung der Folgen erläutert. Für Kopfzeile, Inhalt und Fußzeile werden die dokumentierten Klassen von KERN verwendet. showModal() platziert den nativen Dialog in der obersten Ebene; close() beendet die Interaktion. „Notiz behalten“ erhält über autofocus den anfänglichen Fokus. Escape schließt den Dialog, ohne den Text zu ändern, und der Close-Listener setzt den Fokus zurück auf „Notiz verwerfen“. Nur „Ja, verwerfen“ ändert den Wert. Klicks auf den Backdrop haben absichtlich keine Wirkung, da es sich um eine Bestätigung für eine destruktive Aktion handelt. Das entspricht den dokumentierten Empfehlungen für kritische Entscheidungen, statt den Handler zum Schließen per Backdrop aus dem allgemeinen Beispiel wahllos zu übernehmen.

Unterstützende Spezifikation lesen

## KERN-Designsystem: Integration und Anwendbarkeit

### Die gesamte Abhängigkeitskette bereitstellen

Die Einrichtung unten installiert ein Paket in einer exakt festgelegten Version und kopiert dessen CSS sowie das Schriftverzeichnis. Das vollständige Beispiel enthält ein eigenes Layout-CSS, ein Theme-Attribut am Root-Element, die DOM-Struktur und die Ereignisbehandlung. Teste nach der Integration in ein echtes Formular beide Dialogausgänge, Escape und schmale Bildschirme. KERN-Code ist unter EUPL lizenziert; die Website kennzeichnet ihre textlichen und grafischen Inhalte unter CC BY-NC-SA. Dieses Originalbeispiel übernimmt nicht die Identität einer Behörde und erweckt nicht den Eindruck, ein Dienst habe ein Barrierefreiheitsaudit bestanden. Eine echte Anwendung benötigt weiterhin Persistenz, serverseitige Validierung und eine Bewertung der vollständigen User Journey.

Unterstützende Spezifikation lesen

## KERN-Designsystem: Komponentenbeispiele

### Vollständige native Notiz und Bestätigung

Das gesamte Dokument-Markup, das Layout-CSS und das Anwendungsverhalten; installiere die Assets mithilfe des Einrichtungsblocks.

```
<!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>
```

Code-Referenz

## KERN Designsystem-Agent einrichten

### Ausgangspunkt für die Implementierung

Es ist weder ein Build-Schritt noch ein UI-Framework erforderlich. Behalte das Schriftartenverzeichnis bei, da dessen CSS auf relative WOFF2-Dateien verweist. Das vollständige ZIP mit dem funktionierenden Beispiel unter Sources enthält außerdem die exakten Vorschau-Abhängigkeiten und das vollständige Dokument. Entpacke es, führe in diesem Verzeichnis python3 -m http.server 8080 aus und öffne anschließend http://localhost:8080/kern.html. Öffne Beispiele mit Modulen nicht über 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
```

### Ein Prompt für dein Projekt

```
Erstelle das lokale Beispiel für Workshop-Notizen mit @kern-ux/native 2.8.2 CSS und der mitgelieferten Fira Sans. Füge ein beschriftetes kern-form-input-Textarea, eine ergänzende native Details-Aufklappfunktion und einen kern-dialog mit beschriftetem Header, Inhalt und Footer zusammen. Öffne den Dialog mit showModal(), setze den Autofokus auf „Notiz behalten“, ermögliche das Abbrechen mit Escape, ohne den Text zu ändern, und lösche die Notiz erst nach „Ja, verwerfen“. Stelle beim Schließen den Fokus auf das auslösende Element zurück und biete „Beispiel wiederherstellen“ an. Wechsle data-kern-theme zwischen light und dark, ohne neue Farbpaletten-Token zu erfinden. Behalte die ursprünglichen Optionen für die Anwendungsbreite bei und speichere die Notiz lokal; ein Upload, ein Server-Entwurf oder eine Behauptung über einen Behördendienst ist nicht erforderlich.
```

## KERN Designsystem: Quellen und Geltungsbereich

Ursprüngliche Demonstration mit KERN-Code. Es werden weder eine Behördenidentität noch dauerhafte Speicherung oder eine Barrierefreiheitszertifizierung suggeriert.

- KERN Überblick Kontext der öffentlichen Verwaltung und Einstiege zu Ressourcen.

- Designsystem Grundlagen, Komponenten und die Herangehensweise des Systems.

- Integrationsleitfaden Dokumentierte Einrichtung des nativen Pakets und Stylesheets.

- Vollständiges funktionsfähiges Beispiel herunterladen ZIP-Datei mit dem vollständigen HTML, lokalen Abhängigkeiten für CSS/JavaScript, mitgelieferten Lizenzen und genauen Startanweisungen. Ein Build-Schritt ist nicht erforderlich.

## KERN Designsystem: Verwandte Ressourcen

### Michigan Forty Two

Lernen Sie Forty-Twos unterstützten WordPress-Workflow, die Web-Palette und Muster für Personenverzeichnisse anhand eines funktionierenden Beispiels mit Filtern für Rollen und Forschung kennen.

### Aksel

Verwende die echten ax-Tokens aus Aksel v8, die native Tabellendichte und die semantische Kopfzeilenstruktur. Sortiere und wähle fiktive Folgedatensätze aus und vergleiche dabei helle und dunkle Designs.

### NHS Designsystem

Nutze die Typografie, responsiven Abstände, gruppierten Optionsfelder und kontextbezogenen Details von NHS.UK, um einen klaren Ablauf zur Auswahl von Terminpräferenzen zu gestalten.


- [Implementierungsreferenz](https://www.kern-ux.de/komponenten/dialog/)
- [Quelle](https://www.npmjs.com/package/@kern-ux/native/v/2.8.2)
- [Unterstützende Spezifikation lesen](https://www.kern-ux.de/erste-schritte/entwicklerinnen/einbinden-von-kern/)
- [Unterstützende Spezifikation lesen](https://www.npmjs.com/package/@kern-ux/native/v/2.8.2)
- [Unterstützende Spezifikation lesen](https://www.kern-ux.de/erste-schritte/entwicklerinnen/light-dark-modus/)
- [Unterstützende Spezifikation lesen](https://www.kern-ux.de/komponenten/form-inputs/)
- [Unterstützende Spezifikation lesen](https://www.kern-ux.de/komponenten/details/)
- [Unterstützende Spezifikation lesen](https://www.kern-ux.de/komponenten/dialog/)
- [Unterstützende Spezifikation lesen](https://www.kern-ux.de/lizenz-und-nutzungsbedingungen/)
- [Code-Referenz](https://www.kern-ux.de/komponenten/dialog/)
- [KERN Überblick Kontext der öffentlichen Verwaltung und Einstiege zu Ressourcen.](https://www.kern-ux.de/)
- [Designsystem Grundlagen, Komponenten und die Herangehensweise des Systems.](https://www.kern-ux.de/design-system/)
- [Integrationsleitfaden Dokumentierte Einrichtung des nativen Pakets und Stylesheets.](https://www.kern-ux.de/erste-schritte/entwicklerinnen/einbinden-von-kern/)