# NSW Designsystem ## NSW Designsystem Interface-Vorschau Wechseln Sie mit der Maus oder der Tastatur zwischen Tabs, ohne die lokale Leseliste zu verlieren. ## NSW Designsystem Designreferenz Tatsächliche Exporte von nsw-design-system 3.27.0 CSS und Tabs-Implementierung mit lokalen Public-Sans-Schriftarten. ### Marken- und neutrale Rollen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --nsw-brand-dark | #002664 | Tatsächliches Standard-Theme von 3.27.0. Text-light bezeichnet helle Textfarbe auf dunklen Oberflächen, nicht Text mit geringer Gewichtung auf Weiß. | | --nsw-brand-light | #cbedfd | Tatsächliches Standard-Theme von 3.27.0. Text-light bezeichnet helle Textfarbe auf dunklen Oberflächen, nicht Text mit geringer Gewichtung auf Weiß. | | --nsw-brand-supplementary | #146cfd | Tatsächliches Standard-Theme von 3.27.0. Text-light bezeichnet helle Textfarbe auf dunklen Oberflächen, nicht Text mit geringer Gewichtung auf Weiß. | | --nsw-brand-accent | #d7153a | Tatsächliches Standard-Theme von 3.27.0. Text-light bezeichnet helle Textfarbe auf dunklen Oberflächen, nicht Text mit geringer Gewichtung auf Weiß. | | --nsw-brand-accent-light | #ffe6ea | Tatsächliches Standard-Theme von 3.27.0. Text-light bezeichnet helle Textfarbe auf dunklen Oberflächen, nicht Text mit geringer Gewichtung auf Weiß. | | --nsw-grey-01 | #22272b | Tatsächliches Standard-Theme von 3.27.0. Text-light bezeichnet helle Textfarbe auf dunklen Oberflächen, nicht Text mit geringer Gewichtung auf Weiß. | | --nsw-grey-02 | #495054 | Tatsächliches Standard-Theme von 3.27.0. Text-light bezeichnet helle Textfarbe auf dunklen Oberflächen, nicht Text mit geringer Gewichtung auf Weiß. | | --nsw-grey-03 | #cdd3d6 | Tatsächliches Standard-Theme von 3.27.0. Text-light bezeichnet helle Textfarbe auf dunklen Oberflächen, nicht Text mit geringer Gewichtung auf Weiß. | | --nsw-grey-04 | #ebebeb | Tatsächliches Standard-Theme von 3.27.0. Text-light bezeichnet helle Textfarbe auf dunklen Oberflächen, nicht Text mit geringer Gewichtung auf Weiß. | | --nsw-off-white | #f2f2f2 | Tatsächliches Standard-Theme von 3.27.0. Text-light bezeichnet helle Textfarbe auf dunklen Oberflächen, nicht Text mit geringer Gewichtung auf Weiß. | | --nsw-text-dark | #22272b | Tatsächliches Standard-Theme von 3.27.0. Text-light bezeichnet helle Textfarbe auf dunklen Oberflächen, nicht Text mit geringer Gewichtung auf Weiß. | | --nsw-text-light | #fff | Tatsächliches Standard-Theme von 3.27.0. Text-light bezeichnet helle Textfarbe auf dunklen Oberflächen, nicht Text mit geringer Gewichtung auf Weiß. | ### Statuspaare | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --nsw-status-success | #008a07 | Kombinieren Sie die aussagekräftige Statusfarbe mit der passenden Hintergrundrolle und einer gut lesbaren textlichen Erklärung. | | --nsw-status-success-bg | #e5f6e6 | Kombinieren Sie die aussagekräftige Statusfarbe mit der passenden Hintergrundrolle und einer gut lesbaren textlichen Erklärung. | | --nsw-status-info | #2e5299 | Kombinieren Sie die aussagekräftige Statusfarbe mit der passenden Hintergrundrolle und einer gut lesbaren textlichen Erklärung. | | --nsw-status-info-bg | #eaedf4 | Kombinieren Sie die aussagekräftige Statusfarbe mit der passenden Hintergrundrolle und einer gut lesbaren textlichen Erklärung. | | --nsw-status-warning | #c95000 | Kombinieren Sie die aussagekräftige Statusfarbe mit der passenden Hintergrundrolle und einer gut lesbaren textlichen Erklärung. | | --nsw-status-warning-bg | #fbeee5 | Kombinieren Sie die aussagekräftige Statusfarbe mit der passenden Hintergrundrolle und einer gut lesbaren textlichen Erklärung. | | --nsw-status-error | #b81237 | Kombinieren Sie die aussagekräftige Statusfarbe mit der passenden Hintergrundrolle und einer gut lesbaren textlichen Erklärung. | | --nsw-status-error-bg | #f7e7eb | Kombinieren Sie die aussagekräftige Statusfarbe mit der passenden Hintergrundrolle und einer gut lesbaren textlichen Erklärung. | ### Typografie und Radius | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --nsw-font-family | "Public Sans",sans-serif | Veröffentlichte responsive Typografiereferenz und gemeinsame Eckenrolle. Ein Schriftgrößenpaar für Mobil- und Desktopansicht ist keine separate Schriftfamilie. | | --nsw-font-size | 16px | Veröffentlichte responsive Typografiereferenz und gemeinsame Eckenrolle. Ein Schriftgrößenpaar für Mobil- und Desktopansicht ist keine separate Schriftfamilie. | | --nsw-font-normal | 400 | Veröffentlichte responsive Typografiereferenz und gemeinsame Eckenrolle. Ein Schriftgrößenpaar für Mobil- und Desktopansicht ist keine separate Schriftfamilie. | | --nsw-font-bold | 700 | Veröffentlichte responsive Typografiereferenz und gemeinsame Eckenrolle. Ein Schriftgrößenpaar für Mobil- und Desktopansicht ist keine separate Schriftfamilie. | | --nsw-font-size-md-mobile | 1.125rem | Veröffentlichte responsive Typografiereferenz und gemeinsame Eckenrolle. Ein Schriftgrößenpaar für Mobil- und Desktopansicht ist keine separate Schriftfamilie. | | --nsw-font-size-md-desktop | 1.25rem | Veröffentlichte responsive Typografiereferenz und gemeinsame Eckenrolle. Ein Schriftgrößenpaar für Mobil- und Desktopansicht ist keine separate Schriftfamilie. | | --nsw-font-size-lg-mobile | 1.375rem | Veröffentlichte responsive Typografiereferenz und gemeinsame Eckenrolle. Ein Schriftgrößenpaar für Mobil- und Desktopansicht ist keine separate Schriftfamilie. | | --nsw-font-size-lg-desktop | 1.5rem | Veröffentlichte responsive Typografiereferenz und gemeinsame Eckenrolle. Ein Schriftgrößenpaar für Mobil- und Desktopansicht ist keine separate Schriftfamilie. | | --nsw-font-size-xl-mobile | 1.75rem | Veröffentlichte responsive Typografiereferenz und gemeinsame Eckenrolle. Ein Schriftgrößenpaar für Mobil- und Desktopansicht ist keine separate Schriftfamilie. | | --nsw-font-size-xl-desktop | 2rem | Veröffentlichte responsive Typografiereferenz und gemeinsame Eckenrolle. Ein Schriftgrößenpaar für Mobil- und Desktopansicht ist keine separate Schriftfamilie. | | --nsw-font-size-xxl-mobile | 2.25rem | Veröffentlichte responsive Typografiereferenz und gemeinsame Eckenrolle. Ein Schriftgrößenpaar für Mobil- und Desktopansicht ist keine separate Schriftfamilie. | | --nsw-font-size-xxl-desktop | 3rem | Veröffentlichte responsive Typografiereferenz und gemeinsame Eckenrolle. Ein Schriftgrößenpaar für Mobil- und Desktopansicht ist keine separate Schriftfamilie. | | --nsw-border-radius | 0.25rem | Veröffentlichte responsive Typografiereferenz und gemeinsame Eckenrolle. Ein Schriftgrößenpaar für Mobil- und Desktopansicht ist keine separate Schriftfamilie. | ## NSW 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. ## NSW Designsystem Festgelegte Laufzeitumgebung und Theme ### Verwenden Sie die native Tab-Implementierung > Das Beispiel verwendet nsw-design-system 3.27.0. Es importiert das Paket-CSS und die Tabs-Klasse und initialisiert anschließend die einzelne Tab-Gruppe, nachdem das Markup erstellt wurde. Durch diese gezielte Initialisierung werden keine ungenutzten Komponenten registriert. Die aktuelle Dokumentation beschreibt möglicherweise eine neuere Version; der herunterladbare Code und die Tokenwerte hier basieren weiterhin auf dem verifizierten Paket. ### Komponenten und Anwendungszustand getrennt halten Die native Tabs-Klasse verwaltet die Tab-Auswahl, die Sichtbarkeit der Panels und die Tastaturnavigation. Die Anwendung verwaltet eine Set mit gespeicherten Prompts. Beim Wechsel zwischen den Phasen bleibt die Leseliste daher unverändert. Diese Aufgabenteilung ist im Quellcode klar ersichtlich: Es gibt weder einen verborgenen globalen Store noch Backend-Anfragen oder eine vorgetäuschte Verbindung zu einem Behördenkonto. ## NSW Designsystem Markenrollen und gut lesbare Oberflächen ### Dunkle und helle Rollen als Paar verwenden Die standardmäßige dunkle Markenfarbe ist #002664, die helle Oberfläche #CBEDFD. Das Prompt-Panel verwendet die helle Rolle und eine dunkle Aktion. Der aktive Tab nutzt die Akzentgestaltung des Pakets. Dies sind die tatsächlichen Theme-Rollen und keine beliebig gewählte blaue Farbpalette, die eine Behördenseite suggerieren soll. Das Beispiel verwendet kein offizielles Regierungslogo. ### Token-Namen sorgfältig interpretieren Das text-light-Token ist Weiß. Es gehört auf einen dunklen Hintergrund und sollte nicht als allgemeines Synonym für zurückhaltenden Text verwendet werden. Für unterstützende Phasentexte wird stattdessen die dunklere neutrale Rolle genutzt. Die Referenz enthält Vorder- und Hintergrundfarben für Statusmeldungen, doch der Workshop erfindet keine Fehler- oder Erfolgsmeldung, nur um jede verfügbare Farbe zu zeigen. ## NSW Designsystem Public Sans und responsive Größenabstufung ### Schrift laden, bevor das Layout geprüft wird Das Beispiel lädt die Schriftschnitte Public Sans 400 und 700 lokal. Das Paket definiert separate Größen für Mobilgeräte und Desktop: Mittlere Schriftgrößen steigen von 1.125rem auf 1.25rem, und die größte Überschrift wächst in der Referenz von 2.25rem auf 3rem. Diese Größenpaare sorgen dafür, dass die Lesehierarchie bei wechselnder verfügbarer Breite erhalten bleibt. ### Die Inhaltshierarchie bewusst schlicht halten Auf ein kurzes Phasenlabel folgen eine beschreibende Überschrift, eine Einleitung, ein erläuternder Absatz und ein gespeicherter Prompt. Die Seite macht nicht aus jedem Satz eine Karte. Auf schmalen Bildschirmen folgt die Leseliste auf das Phasen-Panel, während die kurze Tab-Leiste mit drei Labels nutzbar bleibt, ohne den Text in mehrere Zeilen zu quetschen. ## NSW Designsystem Tab-Markup und Tastaturverhalten ### Die Komponente echte Links erweitern lassen Die anfängliche Tab-Liste enthält Links zu eindeutigen Inhalts-IDs. Bei der Initialisierung ergänzt die Komponente die Semantik von tablist, tab und tabpanel, verwaltet die Auswahl und legt den fokussierbaren Tab fest. Damit die Komponente ihre Panels findet, müssen die href-Ziele korrekt bleiben. IDs dürfen nicht dupliziert werden, wenn eine Seite mehrere Tab-Gruppen enthält. - Jeden Tab-Link genau einer Panel-ID zuordnen. - Die Gruppe erst nach dem Einfügen ihres Markups initialisieren. - Auswahl und Tastaturfokus von der nativen Komponente verwalten lassen. ### Tastaturauswahl ebenso wie Mausklicks prüfen Die native Implementierung unterstützt die Navigation mit den Pfeiltasten. Beim Browser-Test wird Prepare fokussiert, ArrowRight gedrückt und überprüft, ob Discuss ausgewählt wird. Dieses Verhalten unterscheidet sich davon, einfach nur das zuletzt angeklickte Label zu gestalten. Für diese gleichrangigen Phasen eignet sich eine Tab-Gruppe, da Lesende zwischen ihnen wechseln können. Sie dient nicht dazu, erforderliche Felder in einer sequenziellen Eingabe zu verbergen. ## NSW Designsystem Gespeicherte Prompts und ehrliche Rückmeldungen ### Den Speicherstatus unabhängig vom sichtbaren Tab halten Die Aktion jeder Phase schaltet den jeweiligen Prompt in einer Set um, aktualisiert aria-pressed und ändert das Label von Save zu Remove. Anzahl und Einträge der Leseliste werden aus dieser Set abgeleitet. Kehren Lesende zu einer gespeicherten Phase zurück, wird der Auswahlstatus korrekt angezeigt. Clear reading list entfernt alle Auswahlen und ist deaktiviert, wenn nichts zu entfernen ist. ### Die Grenzen der Speicherung erläutern Die Leseliste ist ein lokaler Seitenstatus und geht beim Neuladen verloren. Die Benutzeroberfläche weist ausdrücklich darauf hin. Eine tatsächlich dauerhafte Liste bräuchte ein explizites Speichermodell und ein Wiederherstellungsverhalten; beides wird hier nicht vorausgesetzt. Der Inhalt ist eine eigens erstellte Studie zur Designdiskussion, kein Leitfaden zur Anspruchsberechtigung für Dienstleistungen und keine Behauptung, ein offizieller NSW-Ablauf sei nachgebildet worden. ## NSW Designsystem Vollständige Implementierung und Prüfung ### Die Vorlage samt Abhängigkeiten umsetzen Ein Vite-Vanilla-Projekt erstellen und nsw-design-system 3.27.0 sowie Public Sans installieren. Anschließend den bereitgestellten Entry und nsw.css speichern. Ein Root-Mount-Element muss vorhanden sein. Die vollständigen Inhalte für alle drei Phasen, die eigens erstellten Prompts, die Initialisierung der nativen Tabs und die Handler für die Leseliste sind enthalten. Das Speicher- und Zurücksetzverhalten wird nicht durch Pseudocode ersetzt. 1. Das festgelegte NSW-Paket und die Public-Sans-Schriftdateien installieren. 2. Den vollständigen Entry und nsw.css mit einem Root-Mount-Element speichern. 3. Prompts in zwei verschiedenen Tabs speichern und prüfen, ob der Status erhalten bleibt. 4. ArrowRight verwenden, die Liste leeren und den leeren Zustand prüfen. ### Tab-Navigation und gespeicherte Inhalte voneinander trennen Die native Tabs-Klasse erst initialisieren, wenn ihre Linkziele und Panels vorhanden sind. Übereinstimmende Fragment-IDs bilden die Voraussetzung für die Erweiterung: Wird eine Panel-ID geändert, ohne das zugehörige href anzupassen, geht die Verknüpfung verloren, selbst wenn die Tab-Labels weiterhin korrekt aussehen. Bei mehreren Gruppen auf einer Seite muss jede Gruppe eigene IDs erhalten. Die Leseliste als Anwendungsstatus außerhalb der Tab-Instanz behandeln. Der Speicherstatus eines Prompts muss einen Panelwechsel überstehen, und aria-pressed muss diesen Status bei der Rückkehr zum Panel wiedergeben. Tabs eignen sich für gleichrangige Inhalte, die Lesende erneut aufrufen können. Ein sequenzielles Formular, bei dem Schritte abgeschlossen werden müssen, erfordert ein anderes Navigationsmodell. Für dauerhafte Speicherung bräuchte es zudem eine explizite Speicher- und Wiederherstellungsrichtlinie, statt das Beispiel, das nur den Seitenstatus verwaltet, stillschweigend zu verändern. ## NSW Designsystem Beispiele für Designsystem-Komponenten ### main.js — vollständiges Beispiel für native Tabs und Leseliste Enthält alle ursprünglichen Phaseninhalte, die Tab-Initialisierung sowie die vollständige Logik zum Speichern, Entfernen und Zurücksetzen. ``` import Tabs from 'nsw-design-system/src/components/tabs/tabs.js'; import 'nsw-design-system/css'; import '@fontsource/public-sans/latin-400.css'; import '@fontsource/public-sans/latin-700.css'; import './nsw.css'; const sessions=[['Prepare','Choose one question to explore','Start with a clear outcome rather than a long list of activities.','Write a one-sentence purpose. Identify the people who can answer the question and the evidence you already have.'],['Discuss','Make room for different views','Use a short, structured discussion to compare observations.','Ask participants to describe what they noticed before proposing solutions. Keep a separate record of assumptions that need evidence.'],['Review','Turn observations into a next step','End with an action that has an owner and a clear reason.','Choose one improvement to investigate. Record what would count as success and when the group will review the result.']]; document.getElementById('root').innerHTML=`

NSW DESIGN SYSTEM / ORIGINAL WORKSHOP STUDY

Plan a focused discussion

Move between three stages and save useful prompts to a local reading list.

    ${sessions.map(([name],i)=>`
  • ${name}
    • `).join('')}
${sessions.map(([name,title,lead,body],i)=>`

STAGE ${i+1} / 3

${title}

${lead}

${body}

Prompt to keep

${['What do we need to understand before choosing a solution?','Which observations are shared, and where do they differ?','What is the smallest next step that would reduce uncertainty?'][i]}
`).join('')}
`; new Tabs(document.querySelector('.js-tabs')).init();const saved=new Set();const $=id=>document.getElementById(id);function render(){$('count').textContent=saved.size+' prompt'+(saved.size===1?'':'s')+' saved';$('saved').replaceChildren(...[...saved].sort().map(i=>{const li=document.createElement('li');li.textContent=sessions[i][0]+': '+sessions[i][1];return li}));$('empty').hidden=saved.size>0;$('clear').disabled=!saved.size;document.querySelectorAll('.save').forEach(b=>{const yes=saved.has(Number(b.dataset.index));b.setAttribute('aria-pressed',String(yes));b.textContent=yes?'Remove saved prompt':'Save this prompt'})}document.querySelectorAll('.save').forEach(b=>b.addEventListener('click',()=>{const i=Number(b.dataset.index);saved.has(i)?saved.delete(i):saved.add(i);render()}));$('clear').addEventListener('click',()=>{saved.clear();render()}); ``` Code-Referenz - Die NSW-Klasse verwaltet die Tabs; die Set verwaltet die ursprüngliche Leseliste. ### nsw.css — eigens erstelltes responsives Layout Layout und Prompt-Oberflächen mit den veröffentlichten semantischen Theme-Rollen. ``` body{margin:0}main{max-width:1240px;padding:32px;margin:auto}.eyebrow,.step{font-size:14px;letter-spacing:.05em;font-weight:700}.eyebrow{color:var(--nsw-brand-dark)}h1{max-width:24ch}.layout{display:grid;grid-template-columns:1.8fr 1fr;gap:32px;margin-top:40px}.nsw-tabs__content{min-height:0}.prompt{margin-top:32px;padding:24px;background:var(--nsw-brand-light)}.prompt h3{margin-top:0}.prompt blockquote{margin:16px 0 24px;padding:0;border:0;font-size:20px;line-height:1.5}.step{margin-top:0;color:var(--nsw-grey-02)}aside{padding:24px;border-top:4px solid var(--nsw-brand-dark);background:var(--nsw-off-white);align-self:start}aside h2{font-size:24px;margin-top:0}aside li{margin:16px 0}aside ul{padding-left:24px}.note{font-size:14px;margin-top:24px}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr}h1{font-size:36px}.prompt{padding:20px}} ``` Code-Referenz - Für das unterstützende Phasenlabel wird ein dunkler Neutralton verwendet; --nsw-text-light ist Weiß. ## NSW Designsystem Einrichtung des AI-Agenten ### Ausgangspunkt für die Implementierung Native Tab-Klicks und Pfeiltasten, erhaltener Speicherstatus, Leeren der Liste und responsives Layout wurden lokal getestet. ``` npm create vite@latest nsw-workshop -- --template vanilla cd nsw-workshop npm install npm install nsw-design-system@3.27.0 @fontsource/public-sans # Replace src/main.js and add src/nsw.css. Keep
. npm run dev ``` ### Ein Prompt für dein Projekt ``` Den NSW-Workshop-Leitfaden mit nativen Tabs aus Version 3.27.0, Public Sans und den tatsächlichen semantischen Rollen erstellen. Eindeutige Panel-IDs, Tastaturauswahl, unabhängigen Speicherstatus der Prompts und eine nützliche leere Leseliste gewährleisten. Klar auf die nur lokale Speicherung hinweisen und keine offiziellen Dienstleistungen behaupten. ``` ## NSW Designsystem Quellen und Geltungsbereich Eine von OpenDesign verfasste Workshop-Studie mit NSW Design System 3.27.0. Das native Tab-Verhalten ist echt; die Inhalte und der Ablauf zum Speichern von Prompts sind eigens entwickelte lokale Anwendungslogik. - Tabs Navigation zwischen gleichrangigen Inhalten und natives Verhalten. - Integration für Entwickler Einrichtung von Paket, Stylesheet und JavaScript. - Typografie Public Sans und Typografie-Hierarchie. - Versionierte Implementierung Theme-Exporte und Tabs-Quelle. ## NSW Designsystem Zugehörige Ressourcen ### 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. ### Poncho Untersuchen Sie über ein funktionsfähiges Aktivitätsverzeichnis das 3er-Raster von Ponchos Bootstrap, semantische Aktionsfarben und vollständig anklickbare Service-Panels. - [Implementierungsreferenz](https://designsystem.nsw.gov.au/components/tabs/index.html) - [Quelle](https://github.com/digitalnsw/nsw-design-system) - [Code-Referenz](https://designsystem.nsw.gov.au/components/tabs/index.html) - [Code-Referenz](https://designsystem.nsw.gov.au/get-started/for-developers.html) - [Tabs Navigation zwischen gleichrangigen Inhalten und natives Verhalten.](https://designsystem.nsw.gov.au/components/tabs/index.html) - [Integration für Entwickler Einrichtung von Paket, Stylesheet und JavaScript.](https://designsystem.nsw.gov.au/get-started/for-developers.html) - [Typografie Public Sans und Typografie-Hierarchie.](https://designsystem.nsw.gov.au/core/typography/index.html) - [Versionierte Implementierung Theme-Exporte und Tabs-Quelle.](https://github.com/digitalnsw/nsw-design-system)