Sviluppo globale e contenuti editoriali · Nuova risorsa
Sistema di design UNDP.
Esplora i token pubblicati di colore e spaziatura di UNDP, le schede native controllabili da tastiera e un esempio completo di lettura e workshop con progressi di revisione locali.
Scheda a schede nativa UNDP 2.0.2 CSS e script, contenuti originali OpenDesign e logica di avanzamento; carattere sostitutivo Arial. · Riferimento per l’implementazione
02
Riferimento al design sistema di design UNDP
Valori concreti e comportamenti della distribuzione pubblica @undp/design-system-assets 2.0.2. La composizione originale della pagina e il comportamento di avanzamento sono indicati separatamente.
Valori effettivi del pacchetto pubblico. L’esempio usa il blu per l’introduzione editoriale e il giallo per una scheda di lettura di supporto; queste associazioni ai contenuti sono originali.
--undpds-color-blue-700
#1f5a95
Valori effettivi del pacchetto pubblico. L’esempio usa il blu per l’introduzione editoriale e il giallo per una scheda di lettura di supporto; queste associazioni ai contenuti sono originali.
--undpds-color-gray-200
#f7f7f7
Valori effettivi del pacchetto pubblico. L’esempio usa il blu per l’introduzione editoriale e il giallo per una scheda di lettura di supporto; queste associazioni ai contenuti sono originali.
--undpds-color-gray-300
#edeff0
Valori effettivi del pacchetto pubblico. L’esempio usa il blu per l’introduzione editoriale e il giallo per una scheda di lettura di supporto; queste associazioni ai contenuti sono originali.
--undpds-color-gray-700
#232e3d
Valori effettivi del pacchetto pubblico. L’esempio usa il blu per l’introduzione editoriale e il giallo per una scheda di lettura di supporto; queste associazioni ai contenuti sono originali.
--undpds-color-yellow-600
#fbc412
Valori effettivi del pacchetto pubblico. L’esempio usa il blu per l’introduzione editoriale e il giallo per una scheda di lettura di supporto; queste associazioni ai contenuti sono originali.
--undpds-color-dark-red
#d12800
Valori effettivi del pacchetto pubblico. L’esempio usa il blu per l’introduzione editoriale e il giallo per una scheda di lettura di supporto; queste associazioni ai contenuti sono originali.
--undpds-color-background-default
#fff
Valori effettivi del pacchetto pubblico. L’esempio usa il blu per l’introduzione editoriale e il giallo per una scheda di lettura di supporto; queste associazioni ai contenuti sono originali.
--undpds-color-border-default
#000
Valori effettivi del pacchetto pubblico. L’esempio usa il blu per l’introduzione editoriale e il giallo per una scheda di lettura di supporto; queste associazioni ai contenuti sono originali.
Usa i nomi esportati esattamente come sono scritti. CSS dei componenti conserva anche gli alias numerici legacy; non dedurre i valori dal suffisso di un alias.
--undpds-spacing-004
4px
Usa i nomi esportati esattamente come sono scritti. CSS dei componenti conserva anche gli alias numerici legacy; non dedurre i valori dal suffisso di un alias.
--undpds-spacing-008
8px
Usa i nomi esportati esattamente come sono scritti. CSS dei componenti conserva anche gli alias numerici legacy; non dedurre i valori dal suffisso di un alias.
--undpds-spacing-012
12px
Usa i nomi esportati esattamente come sono scritti. CSS dei componenti conserva anche gli alias numerici legacy; non dedurre i valori dal suffisso di un alias.
--undpds-spacing-016
16px
Usa i nomi esportati esattamente come sono scritti. CSS dei componenti conserva anche gli alias numerici legacy; non dedurre i valori dal suffisso di un alias.
--undpds-spacing-024
24px
Usa i nomi esportati esattamente come sono scritti. CSS dei componenti conserva anche gli alias numerici legacy; non dedurre i valori dal suffisso di un alias.
--undpds-spacing-032
32px
Usa i nomi esportati esattamente come sono scritti. CSS dei componenti conserva anche gli alias numerici legacy; non dedurre i valori dal suffisso di un alias.
--undpds-spacing-040
40px
Usa i nomi esportati esattamente come sono scritti. CSS dei componenti conserva anche gli alias numerici legacy; non dedurre i valori dal suffisso di un alias.
--undpds-spacing-048
48px
Usa i nomi esportati esattamente come sono scritti. CSS dei componenti conserva anche gli alias numerici legacy; non dedurre i valori dal suffisso di un alias.
--undpds-spacing-064
64px
Usa i nomi esportati esattamente come sono scritti. CSS dei componenti conserva anche gli alias numerici legacy; non dedurre i valori dal suffisso di un alias.
--undpds-spacing-080
80px
Usa i nomi esportati esattamente come sono scritti. CSS dei componenti conserva anche gli alias numerici legacy; non dedurre i valori dal suffisso di un alias.
--undpds-spacing-096
96px
Usa i nomi esportati esattamente come sono scritti. CSS dei componenti conserva anche gli alias numerici legacy; non dedurre i valori dal suffisso di un alias.
--undpds-spacing-160
160px
Usa i nomi esportati esattamente come sono scritti. CSS dei componenti conserva anche gli alias numerici legacy; non dedurre i valori dal suffisso di un alias.
Dichiarazioni pubblicate; non significa che questa anteprima carichi i caratteri del marchio. L’anteprima usa intenzionalmente Arial come carattere sostitutivo.
--undpds-font-family-sohnebreit
SohneBreit,ProximaNova,sans-serif
Dichiarazioni pubblicate; non significa che questa anteprima carichi i caratteri del marchio. L’anteprima usa intenzionalmente Arial come carattere sostitutivo.
--undpds-font-size-14
0.875rem
Dichiarazioni pubblicate; non significa che questa anteprima carichi i caratteri del marchio. L’anteprima usa intenzionalmente Arial come carattere sostitutivo.
--undpds-font-size-16
1rem
Dichiarazioni pubblicate; non significa che questa anteprima carichi i caratteri del marchio. L’anteprima usa intenzionalmente Arial come carattere sostitutivo.
--undpds-font-size-20
1.25rem
Dichiarazioni pubblicate; non significa che questa anteprima carichi i caratteri del marchio. L’anteprima usa intenzionalmente Arial come carattere sostitutivo.
--undpds-font-size-24
1.5rem
Dichiarazioni pubblicate; non significa che questa anteprima carichi i caratteri del marchio. L’anteprima usa intenzionalmente Arial come carattere sostitutivo.
--undpds-font-size-32
2rem
Dichiarazioni pubblicate; non significa che questa anteprima carichi i caratteri del marchio. L’anteprima usa intenzionalmente Arial come carattere sostitutivo.
--undpds-font-size-40
2.5rem
Dichiarazioni pubblicate; non significa che questa anteprima carichi i caratteri del marchio. L’anteprima usa intenzionalmente Arial come carattere sostitutivo.
--undpds-font-weight-regular
400
Dichiarazioni pubblicate; non significa che questa anteprima carichi i caratteri del marchio. L’anteprima usa intenzionalmente Arial come carattere sostitutivo.
--undpds-font-weight-bold
700
Dichiarazioni pubblicate; non significa che questa anteprima carichi i caratteri del marchio. L’anteprima usa intenzionalmente Arial come carattere sostitutivo.
--undpds-border-default
2px
Dichiarazioni pubblicate; non significa che questa anteprima carichi i caratteri del marchio. L’anteprima usa intenzionalmente Arial come carattere sostitutivo.
Sistema di design UNDP Confini di runtime e asset UNDP
Scegli il pacchetto di asset per una pagina statica
L’esempio fornito installa @undp/design-system-assets alla versione 2.0.2. Questa distribuzione include CSS di base, CSS dei componenti e script per il browser; è diversa dall’avvio del repository di sviluppo completo di Storybook. Per questa composizione servono solo il foglio di stile di base, quello delle schede e lo script delle schede. Caricare all.min.js o i fogli di stile di tutti i componenti aggiungerebbe comportamenti non pertinenti senza migliorare la lettura.
base-minimal.min.css fornisce le basi e le dichiarazioni tipografiche.
components/tab.min.css fornisce la presentazione nativa delle schede.
js/tabs.min.js esporta l’inizializzatore tabs().
Tieni distinta l’identità istituzionale dai contenuti d’esempio
La scheda contiene materiale originale OpenDesign per esercitarsi a pianificare un workshop locale. Non è un programma, una dichiarazione di policy o un portale di rendicontazione dell’UNDP. L’anteprima non contiene emblemi né navigazione istituzionale. Gli stili e i comportamenti nativi sono identificati con precisione; la scheda, l’avanzamento tramite caselle di controllo e l’azione di ripristino sono chiaramente indicati come codice applicativo originale.
Ruoli dei colori e gerarchia editoriale UNDP sistema di design UNDP
Parti dalla scala di blu effettiva
Il valore distribuito di --undpds-color-blue-600 è #006eb5, mentre quello di blue-700 è #1f5a95. L’esempio usa il primo come sfondo del blocco introduttivo e il secondo per l’azione di ripristino. gray-200 fornisce la scheda di supporto più discreta, gray-300 separa le schede e yellow-600 aggiunge un accento al bordo. La scheda attiva presenta la sottolineatura rosso scuro della libreria. Questi ruoli sono verificabili in CSS, non dedotti da uno screenshot.
Non attribuire ai colori degli SDG significati di stato inventati
Il pacchetto di base include una palette SDG distinta oltre ai token di colore generali. Una pagina a tema sviluppo non dovrebbe assegnare questi valori a stati arbitrari di successo o errore solo perché sono disponibili. In questa composizione, il completamento è indicato da un controllo selezionato e da un conteggio leggibile; nessun colore, da solo, comunica lo stato della revisione.
Tipografia, spaziatura e ambito dei caratteri UNDP sistema di design UNDP
Distingui le dichiarazioni dai caratteri caricati
Il pacchetto dichiara le famiglie ProximaNova e SohneBreit e include file dei caratteri, ma questa anteprima usa deliberatamente Arial come carattere sostitutivo. La sostituzione è indicata nella nota dell’esempio e in CSS. La tabella di riferimento registra comunque le dichiarazioni effettive delle famiglie, così da rendere comprensibile il sistema originale. Un progetto che adotta i caratteri del marchio deve gestire gli asset pertinenti e i relativi diritti d’uso, senza presumere che il nome di una famiglia renda disponibili i caratteri.
Usa i nomi effettivi delle spaziature
La scala attuale in pixel va da spacing-002 a spacing-160 e include 12, 24 e 48 pixel. Anche il foglio di stile delle schede usa alias meno recenti, come spacing-03 per 8px e spacing-09 per 48px; entrambi sono presenti in questa versione. La demo mantiene queste regole della libreria e aggiunge un layout editoriale a due colonne che diventa a colonna singola sotto i 720px. Questa interruzione responsive è una scelta compositiva originale, distinta dal breakpoint di 48em del foglio di stile del componente.
Struttura e inizializzazione delle schede native UNDP sistema di design UNDP
Mantieni allineate le raccolte di schede e pannelli
L’elemento radice ha data-undpds-component="tabs", un elenco con ruolo "tablist", tre elementi .tabs-title con ruolo "tab" e tre sezioni .tabs-panel all’interno di .tabs-content. Lo script abbina queste raccolte in base all’ordine. Se manca un pannello o il numero di elementi è diverso, l’inizializzazione non funziona correttamente. Per questo ogni pannello ha un ID stabile e contenuti completi prima dell’esecuzione di tabs(). L’inizializzazione nativa crea le relazioni aria-controls e aria-labelledby e contrassegna l’elemento selezionato con is-active.
Scegli con attenzione il comportamento degli hash
Sistema di design UNDP Navigazione da tastiera e stato visibile di UNDP
Verifica la visibilità effettiva dei pannelli
I tasti freccia e Home o End spostano la scheda attiva e il focus tramite l’implementazione nativa. Anche Invio e Spazio la attivano. Lo script aggiorna insieme tabindex, aria-selected, hidden e aria-hidden. Verificare soltanto la classe CSS non rileverebbe un errore per cui restano visibili più pannelli o un pannello nascosto continua a ricevere il focus. I controlli nel browser verificano sia l’elemento selezionato sia il contenuto effettivamente visualizzato.
Mantieni i controlli di revisione associati alla relativa sezione
Ogni pannello include una casella di controllo nativa con l’etichetta Segna questa sezione come esaminata. Lo stato persiste quando il pannello viene nascosto, perché il nodo non viene ricreato. Il conteggio dei progressi è un messaggio di stato cortese e descrive solo questa anteprima locale. Non è un attestato di apprendimento né una registrazione del completamento sul server. È possibile tornare a una sezione e annullare direttamente la selezione.
Sistema di design UNDP Progressi locali e ripristino di UNDP
Specifica chiaramente l’ambito del ripristino
Reimposta i progressi di lettura cancella le tre caselle di controllo e ricalcola il conteggio. Non modifica la scheda attiva né elimina i contenuti. Il gestore usa la stessa funzione dei progressi richiamata quando cambia una casella di controllo, evitando di descrivere il completamento in due modi diversi. L’esempio non salva nulla al di fuori del documento corrente, quindi un ricaricamento completo avvia una nuova sessione di lettura.
Evita di far sembrare obbligatoria la lettura facoltativa
Il conteggio aiuta a orientarsi: non impedisce l’accesso alle sezioni successive. Tutte e tre le schede sono disponibili anche se non è stata esaminata alcuna sezione, e si possono visitare in qualsiasi ordine. Un flusso di lavoro di produzione che richiedesse una conferma avrebbe bisogno di requisiti, gestione degli errori e persistenza propri, invece di riutilizzare questo modello di progressi locali.
Sistema di design UNDP Composizione di lettura adattiva di UNDP
Adatta il contenuto invece di rimpicciolirlo
L’introduzione blu e ciascun pannello sono disposti su due colonne alle larghezze maggiori. A 720px si impilano, il padding esterno si riduce a 16px e il titolo grande si ridimensiona. L’elenco delle schede va a capo quando necessario, mantenendo visibili tutte le etichette. Nessun pannello con altezza fissa taglia una traduzione o un paragrafo più lungo, e la nota di supporto rimane testo effettivo anziché diventare un’immagine decorativa.
Verifica la larghezza incorporata
La colonna dei contenuti di una pagina di dettaglio è più stretta della finestra del browser. Questo esempio è stato testato fino a 280px in un documento autonomo, oltre che alle larghezze desktop, tablet e telefono. Un componente che entra nello schermo intero di un telefono può comunque fuoriuscire dal riquadro interno della pagina di dettaglio; il controllo condiviso della pagina misura entrambi.
Sistema di design UNDP Integrazione statica completa di UNDP
Tieni insieme i file forniti
Salva index.html, undp.css e undp-app.js forniti nella stessa directory, installa il pacchetto di asset con versione fissata e avvia un server per quella directory. HTML punta a CSS di base, a CSS delle schede e allo script del browser per le schede del pacchetto, prima di caricare il piccolo script dell’applicazione. Per questo esempio non servono un bundler, jQuery o GSAP. L’anteprima incorporata localmente integra questi stessi asset dei componenti, rimuovendo le dichiarazioni font-face inutilizzate.
Salva tutti e tre i file forniti nella stessa directory.
Avvia un server per la cartella e verifica la selezione delle schede con il puntatore e la tastiera.
Esamina tutte le sezioni, torna indietro e reimposta il conteggio locale.
Separa il comportamento dei componenti da quello dell’applicazione
Sistema di design UNDP Esempi di componenti del sistema di progettazione
undp-index.html — sorgente completa
Salvalo come index.html; include tutti e tre i pannelli di contenuto e le importazioni degli asset.
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>
Tieni insieme i nomi dei file e i percorsi relativi dei pacchetti.
undp-app.js — sorgente completa
Inizializzazione nativa delle schede e comportamento originale di avanzamento e ripristino locale.
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();});
Tieni insieme i nomi dei file e i percorsi relativi dei pacchetti.
04
Sistema di design UNDP Configurazione dell’agent
Punto di partenza per l’implementazione
Apri http://localhost:8000/. HTML importa gli asset effettivi del pacchetto; non è necessario un progetto Storybook completo.
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
Un prompt per il tuo progetto
Prompt per l’agente
Implementa lo spazio di lavoro di lettura con schede native UNDP 2.0.2 fornito, usando tutti gli elementi HTML, CSS e JavaScript. Mantieni i nomi reali dei token, lo stesso numero di schede e pannelli, il comportamento di freccia/Home/End, il fallback Arial esplicito, i progressi di revisione solo locali e la navigazione non vincolante. Mantieni distinti i testi originali del workshop dalle politiche istituzionali.
05
Sistema di design UNDP Fonti e ambito
Guida applicativa OpenDesign che usa gli asset delle schede native UNDP 2.0.2 e contenuti originali. Il fallback Arial è esplicito; non rappresenta alcun programma UNDP né alcuna politica ufficiale.
