Entdecke die veröffentlichten Farb- und Abstandstokens von UNDP, native, per Tastatur bedienbare Tabs und ein vollständiges Beispiel zum Lesen eines Workshops mit lokal gespeichertem Lesefortschritt.
Natives Tab-CSS und Skript von UNDP 2.0.2, eigenständige Inhalte und Fortschrittslogik unter OpenDesign; Arial als Ausweichschrift. · Implementierungsreferenz
02
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.
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.
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.
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.
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
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.
Speichern Sie alle drei bereitgestellten Dateien im selben Verzeichnis.
Stellen Sie den Ordner bereit und testen Sie die Tab-Auswahl mit Maus und Tastatur.
Überprüfen Sie alle Bereiche, wechseln Sie zurück und setzen Sie anschließend die lokale Anzahl zurück.
Komponentenverhalten und Anwendungsverhalten voneinander trennen
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.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop reading brief</title><link rel="stylesheet" href="./node_modules/@undp/design-system-assets/css/base-minimal.min.css"><link rel="stylesheet" href="./node_modules/@undp/design-system-assets/css/components/tab.min.css"><link rel="stylesheet" href="./undp.css"></head><body><main><header class="intro"><div><p class="eyebrow">Learning brief / original sample</p><h1>Plan a local resilience workshop</h1></div><p>A small reading workspace for exploring how a development brief can separate context, participation and follow-through.</p></header><p class="study-note">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.</p><div class="tabs" data-undpds-component="tabs"><ul role="tablist" aria-label="Workshop reading sections" data-deep-link="false"><li role="tab" class="tabs-title is-active" tabindex="0">Understand</li><li role="tab" class="tabs-title" tabindex="-1">Include</li><li role="tab" class="tabs-title" tabindex="-1">Follow through</li></ul><div class="tabs-content"><section id="understand" class="tabs-panel is-active"><div class="panel-grid"><div><h2>Start with the local context</h2><p>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.</p><h3>Prepare the conversation</h3><ol><li>Write one plain-language question.</li><li>Invite examples of what already works.</li><li>Record uncertainty separately from an agreed need.</li></ol></div><aside class="reading-card"><h3>What would change the decision?</h3><p>Collect contrasting experiences, not just the first answer. A disagreement can reveal who is missing from the conversation.</p><label><input type="checkbox" data-read="understand">Mark this section as reviewed</label></aside></div></section><section id="include" class="tabs-panel"><div class="panel-grid"><div><h2>Make participation practical</h2><p>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.</p><h3>Remove avoidable barriers</h3><ol><li>Offer spoken and written contributions.</li><li>Ask participants about access needs privately.</li><li>Explain how to decline recording or attribution.</li></ol></div><aside class="reading-card"><h3>Who has not been heard?</h3><p>A count of attendees does not prove representative participation. Check whether the invitation, language or format prevented people from joining.</p><label><input type="checkbox" data-read="include">Mark this section as reviewed</label></aside></div></section><section id="follow" class="tabs-panel"><div class="panel-grid"><div><h2>Close the loop with participants</h2><p>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.</p><h3>Turn discussion into a next step</h3><ol><li>Separate decisions from suggestions.</li><li>Attach an owner and review point to the next action.</li><li>Invite corrections before treating the notes as agreed.</li></ol></div><aside class="reading-card"><h3>What happens after the session?</h3><p>A clear follow-up commitment is more useful than a polished report with no owner. Keep unresolved issues visible in the next conversation.</p><label><input type="checkbox" data-read="follow">Mark this section as reviewed</label></aside></div></section></div></div><div class="bottom"><p id="progress" role="status">0 of 3 sections reviewed in this preview</p><button id="reset" type="button">Reset reading progress</button></div></main><script src="./node_modules/@undp/design-system-assets/js/tabs.min.js"></script><script src="./undp-app.js"></script></body></html>
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.
javascript
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();});
Bewahren Sie die Dateinamen zusammen mit den relativen Paketpfaden auf.
04
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.
sh
npm init -y
npm install @undp/[email protected]
# 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
Agenten-Prompt
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.
05
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.
