# NL Designsystem ## NL Designsystem-Oberflächenvorschau Wechseln Sie zwischen den Original-Themes, bearbeiten Sie den Speicherort der Sammlung und speichern Sie sie oder brechen Sie ab, ohne den Datensatz zu ändern. ## NL Designsystem-Designreferenz Konkrete Zusammenstellung von Komponenten eines Mitwirkenden: @utrecht/component-library-css 9.0.15. Öffentliche Design-Token-Namen und Klassen sind geprüfte APIs der Bibliothek; Zahlenwerte und Farben mit der Kennzeichnung „Beispiel“ sind Originaleinstellungen der Anwendung und keine allgemeingültige Spezifikation für NL Design System. ### Architektur | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Component implementation | Utrecht CSS 9.0.15 | Ein ausgewählter Mitwirkender, nicht die einzige Implementierung von NL Design System. | | Theme boundary | Wrapper-scoped CSS custom properties | Derselbe semantische Markup-Code unterstützt mehrere Identitäten. | | Source design tokens | Design Tokens JSON standard | Organisationen beschreiben ihre eigenen Hausstile, damit sie wiederverwendet werden können. | ### Echtes Button-Design-Token API | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --utrecht-button-min-block-size | 48px in example; 44px library fallback | Explizite Zielgröße. | | --utrecht-button-border-radius | 4px / 8px in example themes | Von der Anwendung festgelegte Geometrie. | | --utrecht-button-primary-action-background-color | #005a5b / #57328c in example themes | Originale Aktionsfarben; weißer Vordergrund. | | --utrecht-button-font-size | 1rem in example | Textrolle der Komponente. | | --utrecht-focus-outline-width | 3px in example | Öffentliche Konfiguration des Fokusrahmens. | ### Datenlisten-API | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | .utrecht-data-list + .utrecht-data-list--rows | dl root | Semantische benannte Werte. | | .utrecht-data-list__item | Key/value wrapper | Responsive Rasterzeile. | | --utrecht-data-list-rows-column-min-inline-size | 12ch in example | Mindestspaltenbreite, passend zu den Belegbeschriftungen. | | --utrecht-data-list-rows-column-inline-size | 45% in example | Zwei Spalten, sofern der verfügbare Platz ausreicht. | | --utrecht-data-list-rows-gap | 24px in example | Abstand zwischen Schlüssel und Wert. | ## NL 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. ## NL Designsystem Zusammenstellung auswählen ### Ein Ökosystem, nicht ein einzelnes Theme > NL Design System unterstützt ausdrücklich die Kombination von Beiträgen verschiedener Organisationen und beschreibt den Hausstil jeder Organisation mithilfe von Design-Tokens. Die praktische Grundlage für die Einführung ist daher eine ausgewählte Komponentenimplementierung zusammen mit einem ausgewählten Theme. Auf dieser Seite werden die Implementierung des Utrecht-CSS-Mitwirkenden und ein eigens erstelltes Demonstrationstheme verwendet. Diese Auswahl bedeutet nicht, dass Utrecht die maßgebliche Implementierung aller NL Design System-Komponenten ist. Sie bietet einen reproduzierbaren Weg, ohne eine landesweit einheitliche Schrift, blaue Farbe oder Abstands-Skala zu erfinden. Das tatsächlich verwendete native CSS-Paket ist @utrecht/component-library-css 9.0.15. Unterstützende Spezifikation lesen ## NL Designsystem Öffentliche Komponenten-Design-Tokens ### Anwendungswerte außerhalb der Bibliothek CSS halten Das bereitgestellte Theme legt öffentliche benutzerdefinierte Eigenschaften --utrecht-* auf einem Wrapper fest. Der Button verwendet diese Werte, während seine Klasse den Aufbau der Komponente bestimmt. Variablen mit dem Präfix --_utrecht- sind interne Berechnungen im geprüften CSS; wer sie direkt ändert, bindet die Anwendung an Implementierungsdetails. Das Türkis #005a5b und Violett #57328c des Beispiels sind Originalfarben der Anwendung. Sie veranschaulichen eine austauschbare Markenidentität, ohne eine kommunale Markenidentität zu kopieren. Für beide wird weißer Aktionstext verwendet; der Farbton für den Hover-Zustand ist separat festgelegt. Keine dieser Farben wird als offizieller Wert eines NL Design System-Design-Tokens bezeichnet. ``` .example-theme { /* Original application values, not a national house style. */ --utrecht-document-font-family: Arial, sans-serif; --utrecht-button-font-size: 1rem; --utrecht-button-line-height: 1.5; --utrecht-button-font-weight: 700; --utrecht-button-border-radius: .25rem; --utrecht-button-min-block-size: 48px; --utrecht-button-padding-block-start: .75rem; --utrecht-button-padding-block-end: .75rem; --utrecht-button-padding-inline-start: 1.25rem; --utrecht-button-padding-inline-end: 1.25rem; --utrecht-button-primary-action-background-color: #005a5b; --utrecht-button-primary-action-color: #fff; --utrecht-button-primary-action-hover-background-color: #003f40; --utrecht-button-primary-action-hover-color: #fff; --utrecht-focus-outline-color: #111; --utrecht-focus-outline-width: 3px; --utrecht-focus-outline-offset: 3px; --utrecht-focus-outline-style: solid; } ``` Code-Referenz Unterstützende Spezifikation lesen ## NL Designsystem Typografie und Abmessungen ### Legen Sie die noch fehlenden Theme-Entscheidungen fest Die Demo definiert Arial, sans-serif mit 18 px und einem Zeilenabstand von 1,6 für das Lesen von Dokumenten. Das erste Theme verwendet eine Überschrift mit 32 px und eine Button-Ecke mit 4 px; das zweite nutzt dieselbe gut lesbare Schriftgröße für den Fließtext, eine Ecke mit 8 px und eine Überschrift mit Serifen. Diese Theme-Änderungen sind bewusst deutlich sichtbar. Wenn kein Design-Token festgelegt ist, hat der native Button als Fallback eine minimale Blockgröße von 44 px. Unser Theme legt 48 px sowie explizites Padding für Block- und Inline-Richtung fest. Das ist ein echtes CSS-API mit einem anwendungsspezifischen Wert, keine vermutete, im gesamten Ökosystem geltende Abmessung. Das Layout verwendet eine maximale Inhaltsbreite von 56 rem und Abstände von 24 px, die in diesem Beispiel festgelegt sind. Unterstützende Spezifikation lesen ## NL Designsystem Aufbau der Datenliste ### Eine Definitionsliste für benannte Werte Der Beleg verwendet ein dl mit .utrecht-data-list und dem Modifikator .utrecht-data-list--rows. Jedes .utrecht-data-list__item gruppiert ein dt-Schlüsselelement und einen dd-Wert. Der Modifikator rows aktiviert das responsive Raster sowie Zeilenabstände und Rahmen; ohne ihn bietet die Basis-Datenliste dieses Layout nicht. Das HTML bleibt auch vor dem Laden eines Themes aussagekräftig. Unser Beleg führt einen Abholort, eine Referenz und den ausgewählten Artikel auf. Es handelt sich nicht um eine Tabelle mit sich wiederholenden Datensätzen: Jeder Schlüssel bezeichnet ein anderes Merkmal derselben Anfrage. Bei schmalen Ansichten stehen Schlüssel und Wert untereinander. Die Anwendung legt Zeilen-Design-Tokens fest, damit auch lange Ortsbezeichnungen ohne Abschneiden hineinpassen. - Verwenden Sie dt für den Attributnamen und dd für den aktuellen Wert. - Fassen Sie jedes Schlüssel-Wert-Paar im dokumentierten Element-Wrapper zusammen. - Ermöglichen Sie Zeilenumbrüche bei Kennungen und langen Ortsnamen, statt die Seite zu verbreitern. Unterstützende Spezifikation lesen ## NL Designsystem Aktionssemantik ### Eine Button-Klasse legt keinen Ablauf fest .utrecht-button stellt die Basiskomponente bereit, und .utrecht-button--primary-action wählt die primäre Gruppe von Darstellungstokens aus. Für eine lokale Aktion, die kein umgebendes Formular absenden soll, benötigt das native Element weiterhin type=button. Die Datenliste bleibt schreibgeschützt, bis die Anwendung ein Bearbeitungsfeld öffnet. Die Schaltfläche „Abholort ändern“ in der Demo blendet eine Gruppe nativer Optionsfelder ein. Beim Speichern werden der Wert in der Definitionsliste aktualisiert und der neue Ort über einen höflichen Statusbereich angekündigt. Beim Abbrechen wird das Feld geschlossen, ohne den gespeicherten Wert zu ändern. Diese Verhaltensweisen sind Teil des Anwendungscodes; allein durch die Installation eines CSS-Pakets werden sie nicht umgesetzt. Unterstützende Spezifikation lesen ## NL Designsystem Themes sicher wechseln ### Den Wrapper ändern, den Datensatz beibehalten Die Theme-Auswahl ändert data-theme am äußeren Wrapper. Komponentenklassen, Datensatzwerte und das ausgewählte Optionsfeld bleiben erhalten. So wird die Trennung von White-Label-Designs konkret veranschaulicht: Derselbe Beleg und dieselbe Interaktion können unterschiedliche visuelle Identitäten unterstützen. Der Theme-Wechsel dient hier der Entwicklungsdemonstration und ist keine Einstellung, die ein öffentlicher Dienst anbieten muss. Wählen Sie in einem realen Dienst mit mehreren Organisationen das Theme anhand einer vertrauenswürdigen Anwendungskonfiguration aus. Theme-Werte dürfen weder Anspruchsberechtigung und Validierung noch die Bedeutung eines Status verändern. 1. Laden Sie die versionierte Komponente CSS einmal. 2. Wenden Sie die relevanten Theme-Tokens auf ein umschließendes Element an. 3. Rendern Sie dasselbe semantische Komponenten-Markup innerhalb dieses Containers. 4. Prüfen Sie Fokus, Zeilenumbrüche und Statusfarben für jedes unterstützte Theme. Unterstützende Spezifikation lesen ## NL Designsystem Barrierefreiheit und Reifegrad ### Den ausgewählten Beitrag bewerten Das NL Design System-Vermittlungsmodell beschreibt, wie Beiträge schrittweise auf gemeinsame Standards hinarbeiten. Allein die Präsenz einer Komponente in einem Community-Repository garantiert nicht, dass jede Komposition produktionsreif ist. Prüfen Sie die ausgewählte Implementierung, die unterstützten Zustände und den aktuellen Reifegrad anhand der Komponentendokumentation. In der Vorschau bleibt eine sichtbare Legende für die Ortsauswahl erhalten, das gespeicherte Ergebnis wird angekündigt und nach der Bearbeitung wird der Fokus auf die auslösende Schaltfläche zurückgesetzt. Beim Theme-Wechsel geht der Fokus nicht verloren. Die Ansicht lässt sich mit den nativen Tastatursteuerungen für Optionsfelder und den eigenen Fokusumrandungen der Anwendung bedienen. Diese Prüfungen ergänzen die Tests der Komponente des Beitragenden, ersetzen sie aber nicht. Unterstützende Spezifikation lesen ## NL Designsystem Installieren und das Theme selbst verwalten ### Eine Integration ausschließlich mit CSS Installieren Sie das verifizierte Paket CSS und importieren Sie dist/index.css über einen CSS-fähigen Bundler, gefolgt von Ihrem Theme-Stylesheet. Für die hier verwendete Datenliste und Schaltfläche, die ausschließlich CSS nutzen, ist weder ein React-Provider noch ein JavaScript-Komponenteninitialisierer erforderlich. Das ursprüngliche Anwendungsskript verwaltet Bearbeiten, Speichern, Abbrechen und den Theme-Wechsel. Der gebündelte Komponentencode steht unter der Lizenz EUPL-1.2. Bewahren Sie bei der Weitergabe die Hinweise auf Quellcode und Lizenz auf. Leiten Sie aus einer Code-Lizenz keine Erlaubnis ab, das Logo einer Gemeinde wiederzuverwenden. Dieses Beispiel verwendet bewusst eigene Themes und keine kommunalen Kennzeichen. Unterstützende Spezifikation lesen ## NL Designsystem Beispiele für Designsystem-Komponenten ### Theme-Tokens für eine native Schaltfläche Ein vollständiges Theme für ausgewählte Schaltflächen. Die Werte sind eigene Vorgaben; die Namen von API stammen aus Utrecht. ``` .example-theme { /* Original application values, not a national house style. */ --utrecht-document-font-family: Arial, sans-serif; --utrecht-button-font-size: 1rem; --utrecht-button-line-height: 1.5; --utrecht-button-font-weight: 700; --utrecht-button-border-radius: .25rem; --utrecht-button-min-block-size: 48px; --utrecht-button-padding-block-start: .75rem; --utrecht-button-padding-block-end: .75rem; --utrecht-button-padding-inline-start: 1.25rem; --utrecht-button-padding-inline-end: 1.25rem; --utrecht-button-primary-action-background-color: #005a5b; --utrecht-button-primary-action-color: #fff; --utrecht-button-primary-action-hover-background-color: #003f40; --utrecht-button-primary-action-hover-color: #fff; --utrecht-focus-outline-color: #111; --utrecht-focus-outline-width: 3px; --utrecht-focus-outline-offset: 3px; --utrecht-focus-outline-style: solid; } ``` Code-Referenz ### Benannte Werte und ein Auslöser für die Bearbeitung Semantisches dl/dt/dd mit Komponentenklassen des Beitragenden. ```
Collection location
North library desk
Reference
DEMO-2048
``` Code-Referenz ### Vollständiges eigenständiges Beispiel Das vollständige Dokument enthält Layout, Steuerelemente und Initialisierung. Entpacken Sie das verknüpfte Beispielarchiv, um die exakten relativen Vendor-Assets zu erhalten, und stellen Sie es anschließend über HTTP bereit. ``` NL Design System composition
Community collection · Example

CONTRIBUTOR COMPONENTS + YOUR THEME

Review your collection details

This receipt uses Utrecht CSS components. Switching the theme changes public design tokens and preserves your choices.

Item
Community reading pack
Collection location
North library desk
Reference
DEMO-2048

Independent OpenDesign specimen. Utrecht CSS 9.0.15; original themes and fictional data. No municipal identity or external submission.
``` Code-Referenz - Laden Sie das vollständige Beispiel unter Sources herunter. Die README enthält den genauen lokalen Startbefehl. - Behalten Sie die Vendor-Pfade relativ zu diesem Dokument bei. Das Archiv enthält alle Assets, die in dieser Vorschau verwendet werden. ## NL Designsystem KI-Agent einrichten ### Ausgangspunkt für die Implementierung Die eigenständige Vorschau lädt dieselbe versionierte native CSS lokal. Komponenten für Schaltflächen und Datenlisten, die ausschließlich CSS nutzen, benötigen keinen React-Provider. Die ursprünglichen Theme-Werte müssen zusammen mit der Bibliothek bereitgestellt werden. Die vollständige ZIP-Datei mit dem funktionierenden Beispiel unter „Quellen“ enthält außerdem genau die benötigten Abhängigkeiten für die Vorschau und das vollständige Dokument. Entpacken Sie sie, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie dann http://localhost:8080/nl-design-system.html. Öffnen Sie Beispiele mit Modulen nicht über file://. ``` npm install @utrecht/component-library-css@9.0.15 # CSS-aware application entry: # import '@utrecht/component-library-css/dist/index.css'; # import './example-theme.css'; # Wrap the dl/button composition in
. # Add application event handlers for editing and theme selection. ``` ### Ein Prompt für dein Projekt ``` Verwenden Sie @utrecht/component-library-css 9.0.15 für eine Definitionsliste als Beleg und eine primäre Schaltfläche. Stellen Sie über öffentliche --utrecht-*-Tokens ein eigenes Theme bereit, das auf den Wrapper beschränkt ist, und lassen Sie interne Variablen --_utrecht-* unverändert. Ermöglichen Sie die Ortsbearbeitung mit beschrifteten Optionsfeldern sowie Speichern und Abbrechen, einer höflichen Änderungsankündigung und der Rückgabe des Fokus. Zeigen Sie ein zweites eigenes Theme, ohne das Komponenten-Markup zu ersetzen oder Daten zu verlieren. Kennzeichnen Sie alle numerischen Theme-Werte als Entscheidungen der Anwendung. ``` ## NL Designsystem Quellen und Geltungsbereich NL Design System ist ein markenunabhängiges Ökosystem. In diesem Lernbeispiel wird die Implementierung eines Beitragenden mit zwei eigenen Themes kombiniert. Es erhebt weder den Anspruch, einen nationalen visuellen Stil darzustellen, noch verwendet es die Identität einer Gemeinde. - Überblick über das Ökosystem Gemeinsame Ressourcen für öffentliche Dienste und Kontext aus der Community. - Einführung für Entwicklerinnen und Entwickler Komponenten, Themes für Organisationen und die Architektur der Design-Tokens. - Komponentenkatalog Dokumentierte Komponenten und verfügbare Referenzen entdecken. - 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. ## NL Designsystem Verwandte Ressourcen ### NSW Designsystem Entdecken Sie NSW-Design-Tokens, die Typografie mit Public Sans und native, per Tastatur bedienbare Tabs anhand eines vollständigen Workshop-Leitfadens mit einer unabhängigen lokalen Leseliste. ### ONS Designsystem Erstellen Sie eine Umfrageantwort, die sich nicht widersprechen kann: native ONS-Checkboxen, sich gegenseitig ausschließende Antworten, genaue Referenzen für Schrift und Farbe sowie ein vollständiger lokaler Prüfablauf. ### Ontario Designsystem Erstellen Sie einen ausführlichen Leitfaden im Ontario-Stil mit echter Typografie, veröffentlichten Abstands- und Farbwerten, nativem Akkordeonverhalten und vollständigem, versionsgenauem Quellcode. - [Implementierungsreferenz](https://github.com/nl-design-system/utrecht) - [Quelle](https://www.nldesignsystem.nl/handboek/developer/introductie/) - [Quelle](https://github.com/nl-design-system/utrecht/tree/main/packages/button) - [Quelle](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list) - [Unterstützende Spezifikation lesen](https://www.nldesignsystem.nl/handboek/developer/introductie/) - [Code-Referenz](https://github.com/nl-design-system/utrecht/tree/main/packages/button) - [Unterstützende Spezifikation lesen](https://github.com/nl-design-system/utrecht/tree/main/packages/button) - [Unterstützende Spezifikation lesen](https://github.com/nl-design-system/utrecht/tree/main/packages/component-library-css) - [Unterstützende Spezifikation lesen](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list) - [Unterstützende Spezifikation lesen](https://www.nldesignsystem.nl/handboek/estafettemodel/) - [Code-Referenz](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list) - [Code-Referenz](https://github.com/nl-design-system/utrecht) - [Überblick über das Ökosystem Gemeinsame Ressourcen für öffentliche Dienste und Kontext aus der Community.](https://www.nldesignsystem.nl/) - [Einführung für Entwicklerinnen und Entwickler Komponenten, Themes für Organisationen und die Architektur der Design-Tokens.](https://www.nldesignsystem.nl/handboek/developer/introductie/) - [Komponentenkatalog Dokumentierte Komponenten und verfügbare Referenzen entdecken.](https://www.nldesignsystem.nl/componenten/)