Développement mondial et éditorial · Nouvelle ressource
Système de design UNDP.
Explorez les tokens de couleur et d’espacement publiés par l’UNDP, les onglets natifs utilisables au clavier et un exemple complet de lecture d’atelier avec progression locale de la révision.
Onglets natifs CSS et script de UNDP 2.0.2 ; contenu et logique de progression originaux de OpenDesign, police de repli Arial. · Référence de mise en œuvre
02
Référence de design système de design UNDP
Valeurs et comportements concrets issus de la distribution publique de @undp/design-system-assets 2.0.2. La composition originale de la page et le comportement de progression sont indiqués séparément.
Valeurs réelles du package public. L’exemple utilise le bleu pour son introduction éditoriale et le jaune pour une carte de lecture complémentaire ; ces associations de couleurs au contenu sont originales.
--undpds-color-blue-700
#1f5a95
Valeurs réelles du package public. L’exemple utilise le bleu pour son introduction éditoriale et le jaune pour une carte de lecture complémentaire ; ces associations de couleurs au contenu sont originales.
--undpds-color-gray-200
#f7f7f7
Valeurs réelles du package public. L’exemple utilise le bleu pour son introduction éditoriale et le jaune pour une carte de lecture complémentaire ; ces associations de couleurs au contenu sont originales.
--undpds-color-gray-300
#edeff0
Valeurs réelles du package public. L’exemple utilise le bleu pour son introduction éditoriale et le jaune pour une carte de lecture complémentaire ; ces associations de couleurs au contenu sont originales.
--undpds-color-gray-700
#232e3d
Valeurs réelles du package public. L’exemple utilise le bleu pour son introduction éditoriale et le jaune pour une carte de lecture complémentaire ; ces associations de couleurs au contenu sont originales.
--undpds-color-yellow-600
#fbc412
Valeurs réelles du package public. L’exemple utilise le bleu pour son introduction éditoriale et le jaune pour une carte de lecture complémentaire ; ces associations de couleurs au contenu sont originales.
--undpds-color-dark-red
#d12800
Valeurs réelles du package public. L’exemple utilise le bleu pour son introduction éditoriale et le jaune pour une carte de lecture complémentaire ; ces associations de couleurs au contenu sont originales.
--undpds-color-background-default
#fff
Valeurs réelles du package public. L’exemple utilise le bleu pour son introduction éditoriale et le jaune pour une carte de lecture complémentaire ; ces associations de couleurs au contenu sont originales.
--undpds-color-border-default
#000
Valeurs réelles du package public. L’exemple utilise le bleu pour son introduction éditoriale et le jaune pour une carte de lecture complémentaire ; ces associations de couleurs au contenu sont originales.
Reprenez les noms exportés tels quels. Le composant CSS conserve également les anciens alias numériques ; ne déduisez pas les valeurs à partir du suffixe d’un alias.
--undpds-spacing-004
4px
Reprenez les noms exportés tels quels. Le composant CSS conserve également les anciens alias numériques ; ne déduisez pas les valeurs à partir du suffixe d’un alias.
--undpds-spacing-008
8px
Reprenez les noms exportés tels quels. Le composant CSS conserve également les anciens alias numériques ; ne déduisez pas les valeurs à partir du suffixe d’un alias.
--undpds-spacing-012
12px
Reprenez les noms exportés tels quels. Le composant CSS conserve également les anciens alias numériques ; ne déduisez pas les valeurs à partir du suffixe d’un alias.
--undpds-spacing-016
16px
Reprenez les noms exportés tels quels. Le composant CSS conserve également les anciens alias numériques ; ne déduisez pas les valeurs à partir du suffixe d’un alias.
--undpds-spacing-024
24px
Reprenez les noms exportés tels quels. Le composant CSS conserve également les anciens alias numériques ; ne déduisez pas les valeurs à partir du suffixe d’un alias.
--undpds-spacing-032
32px
Reprenez les noms exportés tels quels. Le composant CSS conserve également les anciens alias numériques ; ne déduisez pas les valeurs à partir du suffixe d’un alias.
--undpds-spacing-040
40px
Reprenez les noms exportés tels quels. Le composant CSS conserve également les anciens alias numériques ; ne déduisez pas les valeurs à partir du suffixe d’un alias.
--undpds-spacing-048
48px
Reprenez les noms exportés tels quels. Le composant CSS conserve également les anciens alias numériques ; ne déduisez pas les valeurs à partir du suffixe d’un alias.
--undpds-spacing-064
64px
Reprenez les noms exportés tels quels. Le composant CSS conserve également les anciens alias numériques ; ne déduisez pas les valeurs à partir du suffixe d’un alias.
--undpds-spacing-080
80px
Reprenez les noms exportés tels quels. Le composant CSS conserve également les anciens alias numériques ; ne déduisez pas les valeurs à partir du suffixe d’un alias.
--undpds-spacing-096
96px
Reprenez les noms exportés tels quels. Le composant CSS conserve également les anciens alias numériques ; ne déduisez pas les valeurs à partir du suffixe d’un alias.
--undpds-spacing-160
160px
Reprenez les noms exportés tels quels. Le composant CSS conserve également les anciens alias numériques ; ne déduisez pas les valeurs à partir du suffixe d’un alias.
L’exemple utilise des éléments de liste pouvant recevoir le focus et des panneaux correspondants ; l’initialisation native définit les ID et aria-controls.
Panels
.tabs-content > .tabs-panel
Un panneau par onglet, dans le même ordre ; chacun possède un ID unique et stable.
Deep links
data-deep-link="false"
Empêchez l’étude intégrée de modifier le fragment d’URL lors du changement de section.
Keyboard
Arrow keys, Home, End, Enter, Space
Le script natif déplace le focus et active le panneau correspondant.
State
aria-selected, tabindex, hidden, aria-hidden
L’initialisation et la sélection mettent à jour à la fois la sémantique et la visibilité réelle du panneau.
03
Guide complet système de design UNDP
Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.
DESIGN-undp.md
Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.
Système de design UNDP Environnement d’exécution et limites des ressources UNDP
Choisissez le package de ressources pour une page statique
L’exemple fourni installe @undp/design-system-assets en version 2.0.2. Il s’agit de la distribution qui contient les fichiers de base CSS, de composants CSS et les scripts pour navigateur ; elle est différente du dépôt complet de développement Storybook. Pour cette composition, seuls la feuille de style de base, la feuille de style des onglets et le script des onglets sont nécessaires. Charger all.min.js ou toutes les feuilles de style des composants ajouterait des comportements sans rapport avec l’exemple, sans améliorer l’espace de lecture.
base-minimal.min.css fournit les fondations et les déclarations typographiques.
components/tab.min.css fournit la présentation native des onglets.
js/tabs.min.js exporte l’initialiseur tabs().
Distinguer l’identité institutionnelle du contenu d’exemple
Le brief est un contenu d’exercice original OpenDesign consacré à la planification d’un atelier local. Il ne s’agit ni d’un programme ou d’une déclaration de politique de l’UNDP, ni d’un portail de rapports. L’aperçu ne contient ni emblème ni navigation institutionnelle. Les styles et comportements natifs sont identifiés précisément, tandis que le brief, le suivi par cases à cocher et l’action de réinitialisation sont clairement présentés comme du code applicatif original.
Système de design UNDP Rôles des couleurs et hiérarchie éditoriale du système de design UNDP
S’appuyer sur la véritable échelle de bleus
Dans la version fournie, --undpds-color-blue-600 correspond à #006eb5 et blue-700 à #1f5a95. L’exemple utilise le premier comme arrière-plan du bloc d’introduction et le second pour l’action de réinitialisation. gray-200 sert de fond discret à la carte d’accompagnement, gray-300 sépare les onglets et yellow-600 apporte une touche de couleur à sa bordure. L’onglet actif reçoit le soulignement rouge foncé de la bibliothèque. Ces rôles peuvent être vérifiés dans CSS, sans avoir à les déduire d’une capture d’écran.
Ne pas attribuer aux couleurs des ODD des significations d’état inventées
Le package de base comprend une palette distincte pour les ODD, en plus des jetons de couleur généraux. Une page sur le développement ne devrait pas attribuer ces couleurs à des états de réussite ou d’erreur arbitraires simplement parce qu’elles sont disponibles. Dans cette composition, l’avancement est indiqué par une case cochée et un décompte lisible ; aucune couleur ne représente à elle seule l’état de lecture.
Système de design UNDP Typographie, espacement et portée des polices du système de design UNDP
Distinguer les déclarations des polices effectivement chargées
Le package déclare les familles ProximaNova et SohneBreit et contient des fichiers de police, mais cet aperçu utilise volontairement la police de remplacement Arial. Cette substitution est signalée dans la note de l’exemple et dans CSS. Le tableau de référence indique néanmoins les déclarations de familles réellement utilisées par le système, afin que le lecteur puisse comprendre le système d’origine. Un projet qui adopte les polices de marque doit gérer les ressources appropriées et les droits d’utilisation, plutôt que de supposer que la déclaration d’un nom de famille suffit à rendre les polices disponibles.
Utiliser les noms d’espacement réels
L’échelle actuelle en pixels va de spacing-002 à spacing-160, et comprend notamment les valeurs de 12, 24 et 48 pixels. La feuille de style des onglets utilise aussi d’anciens alias, comme spacing-03 pour 8px et spacing-09 pour 48px ; les deux sont présents dans cette version. La démonstration conserve les règles de la bibliothèque et ajoute une mise en page éditoriale sur deux colonnes, qui passe à une seule colonne sous 720px. Ce point de rupture est un choix propre à la composition, distinct du point de rupture de 48em défini dans la feuille de style du composant.
Système de design UNDP Structure native des onglets et initialisation du système de design UNDP
Garder les collections d’onglets et de panneaux synchronisées
L’élément racine possède data-undpds-component="tabs", une liste avec role="tablist", trois éléments .tabs-title avec role="tab" et trois sections .tabs-panel dans .tabs-content. Le script associe ces collections dans leur ordre d’apparition. Si un panneau manque ou si le nombre d’éléments diffère, l’initialisation ne peut pas fonctionner correctement. Chaque panneau a donc un ID stable et un contenu complet avant l’exécution de tabs(). L’initialisation native crée les relations aria-controls et aria-labelledby et marque l’élément sélectionné avec is-active.
Choisir délibérément le comportement des fragments d’URL
Système de design UNDP Navigation au clavier et état visible du système de design UNDP
Vérifier la visibilité réelle des panneaux
Les flèches, ainsi que les touches Home et End, déplacent le focus et changent l’onglet actif grâce à l’implémentation native. Entrée et Espace permettent également de l’activer. Le script met à jour simultanément tabindex, aria-selected, hidden et aria-hidden. Vérifier uniquement la classe active CSS ne permettrait pas de détecter un problème laissant plusieurs panneaux visibles ou permettant encore de placer le focus dans un panneau masqué. Les tests du navigateur vérifient à la fois l’élément sélectionné et le contenu réellement affiché.
Garder les commandes de suivi associées à leur section
Chaque panneau comprend une case à cocher native intitulée « Marquer cette section comme lue ». Son état est conservé lorsque le panneau est masqué, car l’élément n’est pas recréé. Le décompte de progression est un message de statut annoncé de manière non intrusive et décrit uniquement cet aperçu local. Il ne constitue ni une attestation de formation ni un relevé d’achèvement côté serveur. L’utilisateur peut revenir à une section et modifier directement sa sélection.
Système de design UNDP Progression locale et réinitialisation du système de design UNDP
Préciser la portée de la réinitialisation
Réinitialiser la progression de lecture décoche les trois cases et recalcule le décompte. Cette action ne change pas l’onglet actif et n’efface pas le contenu. Le gestionnaire utilise la même fonction de mise à jour que lors d’un changement de case à cocher, ce qui évite de décrire l’achèvement de deux façons différentes. L’exemple ne stocke aucune donnée en dehors du document actuel ; un rechargement complet démarre donc une nouvelle session de lecture.
Ne pas présenter la lecture facultative comme une obligation
Le décompte aide à se repérer ; il ne bloque pas l’accès aux sections suivantes. Les trois onglets restent accessibles même si aucune section n’a été lue, et les lecteurs peuvent les parcourir dans l’ordre de leur choix. Un processus de production exigeant une confirmation nécessiterait ses propres règles, sa propre gestion des erreurs et sa propre persistance, plutôt que de reprendre ce modèle de progression locale.
Système de design UNDP Mise en page de lecture adaptative du système de design UNDP
Réorganiser le contenu plutôt que le réduire
L’introduction bleue et chaque panneau sont organisés en deux colonnes sur les écrans larges. À 720px, les colonnes s’empilent, la marge extérieure passe à 16px et le grand titre est réduit. La liste d’onglets passe à la ligne si nécessaire, sans perdre aucun libellé. Aucun panneau à hauteur fixe ne tronque une traduction ou un paragraphe plus long, et la note d’accompagnement reste du texte réel plutôt qu’une image décorative.
Tester la largeur dans le cadre intégré
La colonne de contenu d’une page de détails est plus étroite que la fenêtre du navigateur. Cet exemple a été testé jusqu’à 280px en tant que document autonome, ainsi qu’aux largeurs pour ordinateur, tablette et téléphone. Un composant qui tient sur tout l’écran d’un téléphone peut quand même déborder dans le cadre en retrait de la page de détails ; la vérification commune de la page mesure les deux.
Système de design UNDP Intégration statique complète
Conservez les fichiers fournis ensemble
Enregistrez index.html, undp.css et undp-app.js dans un même répertoire, installez le package de ressources à version verrouillée, puis servez ce répertoire. Le HTML pointe vers le CSS de base du package, le CSS des onglets et le script du navigateur pour les onglets, avant le chargement du petit script de l’application. Cet exemple ne nécessite ni bundler, ni jQuery, ni GSAP. L’aperçu intégré localement incorpore ces mêmes ressources de composants tout en supprimant les déclarations font-face inutilisées.
Enregistrez les trois fichiers fournis dans le même répertoire.
Servez le dossier et testez la sélection des onglets à la souris et au clavier.
Parcourez toutes les sections, revenez en arrière, puis réinitialisez le compteur local.
Séparez le comportement des composants de celui de l’application
Système de design UNDP Exemples de composants du système de design
undp-index.html — code source complet
Enregistrez ce fichier sous index.html ; les trois panneaux de contenu et les imports de ressources sont inclus.
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>
Conservez ensemble les noms de fichiers et les chemins relatifs des packages.
undp-app.js — code source complet
Initialisation native des onglets et comportement d’origine du suivi de progression et de la réinitialisation locales.
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();});
Conservez ensemble les noms de fichiers et les chemins relatifs des packages.
04
Système de design UNDP Configuration de l’agent
Point de départ de l’implémentation
Ouvrez http://localhost:8000/. Le HTML importe les ressources réelles du package ; aucun projet Storybook complet n’est nécessaire.
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 pour votre projet
Prompt pour l’agent IA
Implémentez l’espace de lecture fourni, basé sur les onglets natifs UNDP 2.0.2, en utilisant tous les HTML, CSS et JavaScript fournis. Préservez les noms réels des tokens, la correspondance entre le nombre d’onglets et de panneaux, le comportement des flèches et des touches Home/End, la police Arial de remplacement explicitement définie, la progression de lecture enregistrée uniquement en local et la navigation sans condition bloquante. Veillez à distinguer le texte original de l’atelier des politiques institutionnelles.
05
Système de design UNDP Sources et périmètre
Guide d’application OpenDesign utilisant les ressources d’onglets natifs UNDP 2.0.2 et du contenu original. La police Arial de remplacement est explicitement définie ; ce guide ne représente ni un programme UNDP ni une politique officielle.
