# UNDP Designsystem ## UNDP Designsystem Schnittstellenvorschau Navigiere mit den Pfeiltasten, sieh dir die Abschnitte an und setze den lokalen Lesezähler zurück. ## UNDP Designsystem Designreferenz Konkrete Werte und Verhaltensweisen aus der öffentlichen Distribution @undp/design-system-assets 2.0.2. Seitenkomposition und Fortschrittsverhalten des Beispiels sind separat gekennzeichnet. ### Farbpalette und semantische Oberflächenfarben | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --undpds-color-blue-600 | #006eb5 | Tatsächliche Werte des öffentlichen Pakets. Im Beispiel dient Blau als Leitfarbe für den redaktionellen Einstieg und Gelb als Akzent für eine ergänzende Lesekarte. Diese Zuordnung für die Inhalte ist eigenständig erstellt. | | --undpds-color-blue-700 | #1f5a95 | Tatsächliche Werte des öffentlichen Pakets. Im Beispiel dient Blau als Leitfarbe für den redaktionellen Einstieg und Gelb als Akzent für eine ergänzende Lesekarte. Diese Zuordnung für die Inhalte ist eigenständig erstellt. | | --undpds-color-gray-200 | #f7f7f7 | Tatsächliche Werte des öffentlichen Pakets. Im Beispiel dient Blau als Leitfarbe für den redaktionellen Einstieg und Gelb als Akzent für eine ergänzende Lesekarte. Diese Zuordnung für die Inhalte ist eigenständig erstellt. | | --undpds-color-gray-300 | #edeff0 | Tatsächliche Werte des öffentlichen Pakets. Im Beispiel dient Blau als Leitfarbe für den redaktionellen Einstieg und Gelb als Akzent für eine ergänzende Lesekarte. Diese Zuordnung für die Inhalte ist eigenständig erstellt. | | --undpds-color-gray-700 | #232e3d | Tatsächliche Werte des öffentlichen Pakets. Im Beispiel dient Blau als Leitfarbe für den redaktionellen Einstieg und Gelb als Akzent für eine ergänzende Lesekarte. Diese Zuordnung für die Inhalte ist eigenständig erstellt. | | --undpds-color-yellow-600 | #fbc412 | Tatsächliche Werte des öffentlichen Pakets. Im Beispiel dient Blau als Leitfarbe für den redaktionellen Einstieg und Gelb als Akzent für eine ergänzende Lesekarte. Diese Zuordnung für die Inhalte ist eigenständig erstellt. | | --undpds-color-dark-red | #d12800 | Tatsächliche Werte des öffentlichen Pakets. Im Beispiel dient Blau als Leitfarbe für den redaktionellen Einstieg und Gelb als Akzent für eine ergänzende Lesekarte. Diese Zuordnung für die Inhalte ist eigenständig erstellt. | | --undpds-color-background-default | #fff | Tatsächliche Werte des öffentlichen Pakets. Im Beispiel dient Blau als Leitfarbe für den redaktionellen Einstieg und Gelb als Akzent für eine ergänzende Lesekarte. Diese Zuordnung für die Inhalte ist eigenständig erstellt. | | --undpds-color-border-default | #000 | Tatsächliche Werte des öffentlichen Pakets. Im Beispiel dient Blau als Leitfarbe für den redaktionellen Einstieg und Gelb als Akzent für eine ergänzende Lesekarte. Diese Zuordnung für die Inhalte ist eigenständig erstellt. | ### Aktuelle Abstandsskala | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --undpds-spacing-002 | 2px | Verwende die exportierten Namen genau wie angegeben. Die Komponenten-CSS enthält außerdem ältere numerische Aliase; leite Werte nicht aus einem Alias-Suffix ab. | | --undpds-spacing-004 | 4px | Verwende die exportierten Namen genau wie angegeben. Die Komponenten-CSS enthält außerdem ältere numerische Aliase; leite Werte nicht aus einem Alias-Suffix ab. | | --undpds-spacing-008 | 8px | Verwende die exportierten Namen genau wie angegeben. Die Komponenten-CSS enthält außerdem ältere numerische Aliase; leite Werte nicht aus einem Alias-Suffix ab. | | --undpds-spacing-012 | 12px | Verwende die exportierten Namen genau wie angegeben. Die Komponenten-CSS enthält außerdem ältere numerische Aliase; leite Werte nicht aus einem Alias-Suffix ab. | | --undpds-spacing-016 | 16px | Verwende die exportierten Namen genau wie angegeben. Die Komponenten-CSS enthält außerdem ältere numerische Aliase; leite Werte nicht aus einem Alias-Suffix ab. | | --undpds-spacing-024 | 24px | Verwende die exportierten Namen genau wie angegeben. Die Komponenten-CSS enthält außerdem ältere numerische Aliase; leite Werte nicht aus einem Alias-Suffix ab. | | --undpds-spacing-032 | 32px | Verwende die exportierten Namen genau wie angegeben. Die Komponenten-CSS enthält außerdem ältere numerische Aliase; leite Werte nicht aus einem Alias-Suffix ab. | | --undpds-spacing-040 | 40px | Verwende die exportierten Namen genau wie angegeben. Die Komponenten-CSS enthält außerdem ältere numerische Aliase; leite Werte nicht aus einem Alias-Suffix ab. | | --undpds-spacing-048 | 48px | Verwende die exportierten Namen genau wie angegeben. Die Komponenten-CSS enthält außerdem ältere numerische Aliase; leite Werte nicht aus einem Alias-Suffix ab. | | --undpds-spacing-064 | 64px | Verwende die exportierten Namen genau wie angegeben. Die Komponenten-CSS enthält außerdem ältere numerische Aliase; leite Werte nicht aus einem Alias-Suffix ab. | | --undpds-spacing-080 | 80px | Verwende die exportierten Namen genau wie angegeben. Die Komponenten-CSS enthält außerdem ältere numerische Aliase; leite Werte nicht aus einem Alias-Suffix ab. | | --undpds-spacing-096 | 96px | Verwende die exportierten Namen genau wie angegeben. Die Komponenten-CSS enthält außerdem ältere numerische Aliase; leite Werte nicht aus einem Alias-Suffix ab. | | --undpds-spacing-160 | 160px | Verwende die exportierten Namen genau wie angegeben. Die Komponenten-CSS enthält außerdem ältere numerische Aliase; leite Werte nicht aus einem Alias-Suffix ab. | ### Referenzen zu Schrift und Rahmen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --undpds-font-family-proximanova | ProximaNova,sans-serif | Veröffentlichte Deklarationen; dies bedeutet nicht, dass diese Vorschau die Markenschriften lädt. Die Vorschau verwendet bewusst Arial als Ausweichschrift. | | --undpds-font-family-sohnebreit | SohneBreit,ProximaNova,sans-serif | Veröffentlichte Deklarationen; dies bedeutet nicht, dass diese Vorschau die Markenschriften lädt. Die Vorschau verwendet bewusst Arial als Ausweichschrift. | | --undpds-font-size-14 | 0.875rem | Veröffentlichte Deklarationen; dies bedeutet nicht, dass diese Vorschau die Markenschriften lädt. Die Vorschau verwendet bewusst Arial als Ausweichschrift. | | --undpds-font-size-16 | 1rem | Veröffentlichte Deklarationen; dies bedeutet nicht, dass diese Vorschau die Markenschriften lädt. Die Vorschau verwendet bewusst Arial als Ausweichschrift. | | --undpds-font-size-20 | 1.25rem | Veröffentlichte Deklarationen; dies bedeutet nicht, dass diese Vorschau die Markenschriften lädt. Die Vorschau verwendet bewusst Arial als Ausweichschrift. | | --undpds-font-size-24 | 1.5rem | Veröffentlichte Deklarationen; dies bedeutet nicht, dass diese Vorschau die Markenschriften lädt. Die Vorschau verwendet bewusst Arial als Ausweichschrift. | | --undpds-font-size-32 | 2rem | Veröffentlichte Deklarationen; dies bedeutet nicht, dass diese Vorschau die Markenschriften lädt. Die Vorschau verwendet bewusst Arial als Ausweichschrift. | | --undpds-font-size-40 | 2.5rem | Veröffentlichte Deklarationen; dies bedeutet nicht, dass diese Vorschau die Markenschriften lädt. Die Vorschau verwendet bewusst Arial als Ausweichschrift. | | --undpds-font-weight-regular | 400 | Veröffentlichte Deklarationen; dies bedeutet nicht, dass diese Vorschau die Markenschriften lädt. Die Vorschau verwendet bewusst Arial als Ausweichschrift. | | --undpds-font-weight-bold | 700 | Veröffentlichte Deklarationen; dies bedeutet nicht, dass diese Vorschau die Markenschriften lädt. Die Vorschau verwendet bewusst Arial als Ausweichschrift. | | --undpds-border-default | 2px | Veröffentlichte Deklarationen; dies bedeutet nicht, dass diese Vorschau die Markenschriften lädt. Die Vorschau verwendet bewusst Arial als Ausweichschrift. | ### Aufbau und Verhalten nativer Tabs | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | data-undpds-component | tabs | Kennzeichnet das Stamm-Element, das tabs() durchsucht. | | Tab collection | .tabs-title[role="tab"] | Das Beispiel verwendet fokussierbare Listenelemente mit zugehörigen Panels; die native Initialisierung legt IDs und aria-controls fest. | | Panels | .tabs-content > .tabs-panel | Ein Panel pro Tab, in derselben Reihenfolge; jedes Panel hat eine stabile, eindeutige ID. | | Deep links | data-deep-link="false" | Verhindere, dass die eingebettete Beispielseite beim Wechseln zwischen Abschnitten den URL-Hash ändert. | | Keyboard | Arrow keys, Home, End, Enter, Space | Das native Skript verschiebt den Fokus und aktiviert das zugehörige Panel. | | State | aria-selected, tabindex, hidden, aria-hidden | Initialisierung und Auswahl aktualisieren sowohl die Semantik als auch die tatsächliche Sichtbarkeit der Panels. | ## UNDP 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. ## UNDP Designsystem Laufzeit- und Asset-Grenzen von UNDP ### Wähle für eine statische Seite das Assets-Paket > Das bereitgestellte Beispiel installiert @undp/design-system-assets in Version 2.0.2. Diese Distribution enthält Basis-CSS, Komponenten-CSS und Browser-Skripte; sie unterscheidet sich vom vollständigen Storybook-Entwicklungsrepository. Für diese Komposition werden nur das Basis-Stylesheet, das Tab-Stylesheet und das Tab-Skript benötigt. Das Laden von all.min.js oder sämtlichen Komponenten-Stylesheets würde nicht benötigtes Verhalten hinzufügen, ohne den Lesebereich zu verbessern. - base-minimal.min.css stellt Grundlagen und Typografie-Deklarationen bereit. - components/tab.min.css stellt die native Tab-Darstellung bereit. - js/tabs.min.js exportiert den Initialisierer tabs(). ### Institutionelle Identität und Beispielinhalte klar trennen Die Kurzbeschreibung ist eigenständig erstellter OpenDesign-Übungsinhalt zur Planung eines lokalen Workshops. Sie ist weder ein UNDP-Programm noch eine politische Erklärung oder ein Berichtsportal. Die Vorschau enthält weder ein Emblem noch eine institutionelle Navigation. Native Gestaltung und Verhalten sind genau gekennzeichnet; die Kurzbeschreibung, der Fortschritt über Kontrollkästchen und die Zurücksetzen-Aktion werden weiterhin eindeutig als eigenständiger Anwendungscode beschrieben. ## UNDP Designsystem Farbrollen und redaktionelle Hierarchie von UNDP ### Gestalte auf Grundlage der tatsächlichen Blautöne Die ausgelieferte Variable --undpds-color-blue-600 hat den Wert #006eb5, blue-700 den Wert #1f5a95. Im Beispiel dient der erste Farbwert als Hintergrund des Einstiegsblocks, der zweite für die Zurücksetzen-Aktion. Gray-200 bildet die zurückhaltende ergänzende Karte, Gray-300 trennt die Tabs und Yellow-600 setzt einen Akzent am Rahmen. Der aktive Tab erhält die dunkelrote Unterstreichung der Bibliothek. Diese Rollen lassen sich im bereitgestellten CSS überprüfen, statt sie aus einem Screenshot abzuleiten. ### Leite keine erfundenen Statusbedeutungen aus den SDG-Farben ab Das Basispaket enthält neben allgemeinen Farb-Tokens eine separate SDG-Palette. Eine Seite zum Thema Entwicklung sollte diese Einträge nicht allein deshalb beliebigen Erfolgs- oder Fehlerzuständen zuweisen, weil sie verfügbar sind. In dieser Komposition wird der Abschluss durch ein aktiviertes Kontrollkästchen und eine gut lesbare Anzahl dargestellt; keine Farbe allein vermittelt den Prüfstatus. ## UNDP Designsystem UNDP-Typografie, Abstände und Geltungsbereich der Schriftarten ### Deklarierte von geladenen Schriftarten unterscheiden Das Paket deklariert die Schriftfamilien ProximaNova und SohneBreit und enthält Schriftdateien. Diese Vorschau verwendet jedoch bewusst Arial als Ersatzschrift. Diese Ersetzung ist in der Beispielnotiz und CSS sichtbar. In der Referenztabelle sind weiterhin die tatsächlichen Schriftfamiliendeklarationen aufgeführt, damit die ursprüngliche Systematik nachvollziehbar bleibt. Wer in einem Projekt die Markenschriften einsetzen möchte, muss die entsprechenden Dateien und Nutzungsrechte berücksichtigen, statt anzunehmen, dass die Angabe eines font-family-Namens die Schriftarten verfügbar macht. ### Die tatsächlichen Abstandsbezeichnungen verwenden Die aktuelle Pixel-Skala reicht von spacing-002 bis spacing-160 und umfasst unter anderem 12, 24 und 48 Pixel. Das Stylesheet für Tabs verwendet außerdem ältere Aliase wie spacing-03 für 8px und spacing-09 für 48px; beide sind in dieser Version enthalten. Die Demo behält diese Bibliotheksregeln bei und ergänzt ein zweispaltiges redaktionelles Layout, das unter 720px einspaltig wird. Dieser Layout-Breakpoint ist eine eigene Gestaltungsentscheidung und unterscheidet sich vom 48em-Breakpoint des Komponenten-Stylesheets. ## UNDP Designsystem Native Tab-Struktur und Initialisierung von UNDP ### Tab- und Panel-Sammlungen aufeinander abstimmen Das Wurzelelement hat data-undpds-component="tabs", eine Liste mit role="tablist", drei .tabs-title-Elemente mit role="tab" und drei .tabs-panel-Bereiche innerhalb von .tabs-content. Das Skript ordnet diese Sammlungen anhand ihrer Reihenfolge einander zu. Fehlt ein Panel oder stimmt die Anzahl nicht überein, ist keine sinnvolle Initialisierung möglich. Daher hat jedes Panel eine stabile ID und vollständigen Inhalt, bevor tabs() ausgeführt wird. Bei der nativen Initialisierung werden die Beziehungen aria-controls und aria-labelledby erstellt und das ausgewählte Element mit is-active gekennzeichnet. ### Das Hash-Verhalten bewusst festlegen Standardmäßig unterstützt das Paket Deep Linking. In diesem eingebetteten Arbeitsbereich verhindert data-deep-link="false" in der Tab-Liste, dass beim Wechseln zwischen Bereichen ein URL-Hash geschrieben wird. Bei einer eigenständigen Veröffentlichung können Deep Links aktiviert werden, wenn es hilfreich ist, einen bestimmten Bereich zu teilen. In diesem Fall müssen jedoch die anfängliche Auswahl anhand des Hashes und Änderungen im Browserverlauf getestet werden. Eine Hash-Konvention sollte nicht ohne Weiteres in eine eingebettete Vorschau übernommen werden, ohne zuvor festzulegen, welche Seite für diese Navigation zuständig ist. ## UNDP Designsystem Tastaturnavigation und sichtbarer Zustand bei UNDP ### Die tatsächliche Sichtbarkeit der Panels überprüfen Mit den Pfeiltasten sowie Home und End werden der aktive Tab und der Fokus entsprechend der nativen Implementierung geändert. Auch Enter und die Leertaste aktivieren den Tab. Das Skript aktualisiert tabindex, aria-selected, hidden und aria-hidden gemeinsam. Wer nur die aktive CSS-Klasse testet, übersieht möglicherweise, dass mehrere Panels sichtbar bleiben oder ein verborgenes Panel weiterhin den Fokus erhält. Die Browserprüfungen testen sowohl das ausgewählte Element als auch den tatsächlich angezeigten Inhalt. ### Prüfoptionen dem jeweiligen Bereich zuordnen Jedes Panel enthält ein natives Kontrollkästchen mit der Beschriftung „Diesen Abschnitt als gelesen markieren“. Der Status bleibt erhalten, wenn das Panel ausgeblendet wird, da das Element nicht neu erstellt wird. Die Anzahl des Fortschritts wird als höfliche Statusmeldung ausgegeben und bezieht sich ausschließlich auf diese lokale Vorschau. Sie ist weder ein Lernnachweis noch ein serverseitig gespeicherter Abschluss. Nutzerinnen und Nutzer können zu einem Abschnitt zurückkehren und die Auswahl direkt wieder aufheben. ## UNDP Designsystem Lokaler Fortschritt und Zurücksetzen bei UNDP ### Den Umfang des Zurücksetzens klar benennen Mit „Lesefortschritt zurücksetzen“ werden die drei Kontrollkästchen deaktiviert und die Anzahl neu berechnet. Der aktive Tab und der Inhalt bleiben unverändert. Die Ereignisbehandlung verwendet dieselbe Fortschrittsfunktion wie eine Änderung an einem Kontrollkästchen. So muss der Abschlussstatus nicht auf zwei verschiedene Arten beschrieben werden. Das Beispiel speichert nichts außerhalb des aktuellen Dokuments. Bei einem vollständigen Neuladen beginnt daher eine neue Lesesitzung. ### Freiwillige Lektüre nicht als Pflicht erscheinen lassen Die Anzahl dient der Orientierung; sie ist keine Zugangssperre für spätere Abschnitte. Alle drei Tabs sind auch dann verfügbar, wenn noch kein Abschnitt als gelesen markiert wurde, und können in beliebiger Reihenfolge aufgerufen werden. Ein Produktionsablauf, der eine Bestätigung voraussetzt, benötigt dafür eigene Anforderungen, Fehlerbehandlung und Speicherung, statt dieses lokale Fortschrittsmodell zu übernehmen. ## UNDP Designsystem Responsive Lesekomposition von UNDP ### Inhalte neu anordnen, statt sie zu verkleinern Die blaue Einführung und jedes Panel sind bei größeren Ansichtsgrößen zweispaltig angeordnet. Bei 720px werden die Spalten untereinander angeordnet, der Außenabstand wird auf 16px verringert und die große Überschrift verkleinert. Die Tab-Liste wird bei Bedarf umgebrochen, ohne Beschriftungen auszulassen. Kein Panel mit fester Höhe schneidet längere Übersetzungen oder Absätze ab, und die ergänzende Notiz bleibt echter Text statt eines dekorativen Bildes. ### Eingebettete Breite testen In einer Detailansicht ist die Inhaltsspalte schmaler als das Browserfenster. Dieses Beispiel wurde als eigenständiges Dokument bis hinunter zu 280px sowie auf Desktop-, Tablet- und Smartphone-Bildschirmbreiten getestet. Eine Komponente kann auf den gesamten Smartphone-Bildschirm passen und dennoch im eingerückten Rahmen der Detailansicht überlaufen. Die gemeinsame Seitenprüfung misst beides. ## UNDP Designsystem Vollständige statische Integration von UNDP ### Die bereitgestellten Dateien zusammen aufbewahren Speichern Sie die bereitgestellten Dateien index.html, undp.css und undp-app.js im selben Verzeichnis, installieren Sie das Paket mit den festgelegten Assets und stellen Sie dieses Verzeichnis bereit. HTML verweist auf die Basisdatei CSS, die Tab-Datei CSS und das Browser-Skript für Tabs des Pakets, bevor das kleine Anwendungsskript geladen wird. Für dieses Beispiel sind weder ein Bundler noch jQuery oder GSAP erforderlich. Die lokal eingebettete Vorschau bindet dieselben Komponenten-Assets direkt ein und entfernt dabei nicht verwendete font-face-Deklarationen. 1. Speichern Sie alle drei bereitgestellten Dateien im selben Verzeichnis. 2. Installieren Sie @undp/design-system-assets@2.0.2. 3. Stellen Sie den Ordner bereit und testen Sie die Tab-Auswahl mit Maus und Tastatur. 4. Überprüfen Sie alle Bereiche, wechseln Sie zurück und setzen Sie anschließend die lokale Anzahl zurück. ### Komponentenverhalten und Anwendungsverhalten voneinander trennen Das Tab-Skript steuert die Auswahl der Bereiche und die Tastaturnavigation. Das kleine Anwendungsskript kümmert sich ausschließlich um Prüfkästchen, Zähler und Zurücksetzen. Diese Abgrenzung erleichtert die Prüfung von Aktualisierungen: Vergleichen Sie zuerst das native Tab-Verhalten und die Token-Änderungen und prüfen Sie anschließend, ob der lokale Zustand weiterhin funktioniert. Ein vollständiges Anwendungsframework würde verschleiern, welches Verhalten tatsächlich vom Designsystem stammt. ## UNDP Designsystem Beispiele für Designsystem-Komponenten ### undp-index.html — vollständiger Quelltext Speichern Sie die Datei als index.html; alle drei Inhaltsbereiche und die Asset-Imports sind enthalten. ``` Workshop reading brief

Learning brief / original sample

Plan a local resilience workshop

A small reading workspace for exploring how a development brief can separate context, participation and follow-through.

Native UNDP 2.0.2 tab styles and keyboard behavior. Original OpenDesign sample content, not a UNDP programme or official policy. This preview uses Arial fallback rather than the distributed brand fonts.

Start with the local context

A useful workshop begins with a question people can answer from experience. Ask which everyday service is hardest to rely on during a disruption. Avoid assuming that a technical solution is already agreed.

Prepare the conversation

  1. Write one plain-language question.
  2. Invite examples of what already works.
  3. Record uncertainty separately from an agreed need.

Make participation practical

Participation depends on when, where and how a session takes place. Offer more than one way to contribute and explain how notes will be used before the discussion begins.

Remove avoidable barriers

  1. Offer spoken and written contributions.
  2. Ask participants about access needs privately.
  3. Explain how to decline recording or attribution.

Close the loop with participants

End with a short record of decisions, open questions and named next steps. Send a readable summary back through a channel that participants can actually access.

Turn discussion into a next step

  1. Separate decisions from suggestions.
  2. Attach an owner and review point to the next action.
  3. Invite corrections before treating the notes as agreed.

0 of 3 sections reviewed in this preview

``` Code-Referenz - Bewahren Sie die Dateinamen zusammen mit den relativen Paketpfaden auf. ### undp.css — vollständiger Quelltext Ursprüngliche responsive Gestaltung mit explizitem Fallback auf Arial. ``` *{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif}h1,h2,h3,p,button{font-family:inherit}main{max-width:1100px;margin:auto;padding:40px}.intro{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;padding:32px;background:var(--undpds-color-blue-600);color:white}.intro h1{font-size:40px;line-height:1.1;margin:16px 0}.intro p{font-size:16px;line-height:1.6}.eyebrow{font-size:12px!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.study-note{font-size:13px;line-height:1.6;margin:24px 0}.tabs>ul{display:flex;flex-wrap:wrap;padding-left:0;gap:16px;margin-top:32px}.tabs>ul li{margin-right:0;padding:12px 0;font-size:16px}.tabs-title:focus-visible{outline:3px solid var(--undpds-color-blue-600);outline-offset:4px}.tabs-panel{padding-top:24px!important}.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}h2{font-size:28px;line-height:1.2;margin:0 0 24px}h3{font-size:20px;line-height:1.3}p,li{font-size:16px;line-height:1.6}li{margin-bottom:12px}.reading-card{background:var(--undpds-color-gray-200);padding:24px;border-left:4px solid var(--undpds-color-yellow-600)}.reading-card p:last-child{margin-bottom:0}label{display:flex;gap:12px;align-items:flex-start;margin-top:24px;font-size:16px;line-height:1.5}input{width:20px;height:20px;accent-color:var(--undpds-color-blue-600);flex-shrink:0}#progress{border-top:2px solid var(--undpds-color-gray-300);padding-top:24px;font-size:14px}button{background:transparent;border:2px solid var(--undpds-color-blue-600);color:var(--undpds-color-blue-700);padding:12px 16px;font-weight:700;cursor:pointer;min-height:44px}.bottom{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:32px}button:focus-visible,input:focus-visible{outline:3px solid var(--undpds-color-blue-600);outline-offset:4px}[hidden]{display:none!important}@media(max-width:720px){main{padding:16px}.intro,.panel-grid{grid-template-columns:1fr;gap:16px}.intro{padding:24px}.intro h1{font-size:32px}.bottom{flex-wrap:wrap}} ``` Code-Referenz - Bewahren Sie die Dateinamen zusammen mit den relativen Paketpfaden auf. ### undp-app.js — vollständiger Quelltext Initialisierung nativer Tabs und ursprüngliches lokales Verhalten für Fortschritt und Zurücksetzen. ``` tabs();const boxes=[...document.querySelectorAll('[data-read]')];function progress(){document.querySelector('#progress').textContent=boxes.filter(x=>x.checked).length+' of 3 sections reviewed in this preview';}boxes.forEach(x=>x.addEventListener('change',progress));document.querySelector('#reset').addEventListener('click',()=>{boxes.forEach(x=>x.checked=false);progress();}); ``` Code-Referenz - Bewahren Sie die Dateinamen zusammen mit den relativen Paketpfaden auf. ## UNDP Designsystem Einrichtung des KI-Agenten ### Ausgangspunkt für die Implementierung Öffnen Sie http://localhost:8000/. Über HTML werden die tatsächlichen Paket-Assets eingebunden; ein vollständiges Storybook-Projekt ist nicht erforderlich. ``` npm init -y npm install @undp/design-system-assets@2.0.2 # Save the supplied HTML as index.html alongside undp.css and undp-app.js. python3 -m http.server 8000 ``` ### Ein Prompt für dein Projekt ``` Implementieren Sie den bereitgestellten Lesebereich mit nativen Tabs aus UNDP 2.0.2 unter Verwendung aller bereitgestellten HTML, CSS und JavaScript. Bewahren Sie die echten Token-Namen, die übereinstimmende Anzahl von Tabs und Bereichen, das Verhalten der Pfeiltasten sowie der Tasten Pos1 und Ende, den expliziten Arial-Fallback, den ausschließlich lokalen Prüfungsfortschritt und die Navigation ohne Sperren. Halten Sie den ursprünglichen Workshoptext klar von institutionellen Richtlinien getrennt. ``` ## UNDP Designsystem Quellen und Geltungsbereich Ein OpenDesign-Anwendungsleitfaden mit nativen Tab-Assets aus UNDP 2.0.2 und eigens verfassten Inhalten. Der Arial-Fallback ist ausdrücklich angegeben; der Inhalt stellt weder ein UNDP-Programm noch eine offizielle Richtlinie dar. - Offizielles Designsystem Komponentendokumentation und aktuelle Designrichtlinien. - Offizielles Repository Verteilungsansatz und Entwicklungskontext. - Angeheftete Grundlage CSS Die tatsächlichen Token- und Typografie-Deklarationen dieser Version. - Angeheftete Tab-Implementierung Auswahl, Fokus, Deeplinks und Sichtbarkeit der Bereiche. ## UNDP Designsystem Verwandte Ressourcen ### USWDS USWDS-Abstands-Tokens, Theme-Rollen, semantische Tabellen und native Akkordeons in einem durchsuchbaren Vergleich von Möglichkeiten verbinden. ### VA Designsystem Gestalte klare Serviceabläufe mit den semantischen Tokens von VA und der nativen Process List: sichtbare Erläuterungen zu den einzelnen Schritten, aussagekräftige Statusbezeichnungen und ergänzende Details, die den Hauptablauf übersichtlich halten. ### W3C Designsystem Gestalten Sie robuste Leseoberflächen mit flexibler Typografie, semantischen Farbrollen und nativen aufklappbaren Inhalten, die auch ohne JavaScript lesbar bleiben. - [Implementierungsreferenz](https://github.com/undp/design-system) - [Quelle](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/css/base-minimal.min.css) - [Quelle](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/js/tabs.min.js) - [Code-Referenz](https://github.com/undp/design-system) - [Offizielles Designsystem Komponentendokumentation und aktuelle Designrichtlinien.](https://design.undp.org/) - [Offizielles Repository Verteilungsansatz und Entwicklungskontext.](https://github.com/undp/design-system) - [Angeheftete Grundlage CSS Die tatsächlichen Token- und Typografie-Deklarationen dieser Version.](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/css/base-minimal.min.css) - [Angeheftete Tab-Implementierung Auswahl, Fokus, Deeplinks und Sichtbarkeit der Bereiche.](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/js/tabs.min.js)