Explora los tokens publicados de color y espaciado de UNDP, pestañas nativas operables con el teclado y un ejemplo completo de lectura de talleres con progreso de revisión local.
Pestañas y script nativos de UNDP 2.0.2 CSS, contenido original OpenDesign y lógica de progreso; fuente Arial como alternativa. · Referencia de implementación
02
Sistema de diseño UNDP Referencia de diseño
Valores y comportamientos concretos de la distribución pública @undp/design-system-assets 2.0.2. La composición original de la página y el comportamiento del progreso se identifican por separado.
Valores reales del paquete público. La muestra usa azul para el contenido editorial principal y amarillo para una tarjeta de lectura complementaria; estas asignaciones de contenido son originales.
--undpds-color-blue-700
#1f5a95
Valores reales del paquete público. La muestra usa azul para el contenido editorial principal y amarillo para una tarjeta de lectura complementaria; estas asignaciones de contenido son originales.
--undpds-color-gray-200
#f7f7f7
Valores reales del paquete público. La muestra usa azul para el contenido editorial principal y amarillo para una tarjeta de lectura complementaria; estas asignaciones de contenido son originales.
--undpds-color-gray-300
#edeff0
Valores reales del paquete público. La muestra usa azul para el contenido editorial principal y amarillo para una tarjeta de lectura complementaria; estas asignaciones de contenido son originales.
--undpds-color-gray-700
#232e3d
Valores reales del paquete público. La muestra usa azul para el contenido editorial principal y amarillo para una tarjeta de lectura complementaria; estas asignaciones de contenido son originales.
--undpds-color-yellow-600
#fbc412
Valores reales del paquete público. La muestra usa azul para el contenido editorial principal y amarillo para una tarjeta de lectura complementaria; estas asignaciones de contenido son originales.
--undpds-color-dark-red
#d12800
Valores reales del paquete público. La muestra usa azul para el contenido editorial principal y amarillo para una tarjeta de lectura complementaria; estas asignaciones de contenido son originales.
--undpds-color-background-default
#fff
Valores reales del paquete público. La muestra usa azul para el contenido editorial principal y amarillo para una tarjeta de lectura complementaria; estas asignaciones de contenido son originales.
--undpds-color-border-default
#000
Valores reales del paquete público. La muestra usa azul para el contenido editorial principal y amarillo para una tarjeta de lectura complementaria; estas asignaciones de contenido son originales.
Usa los nombres exportados tal como aparecen. CSS de componentes también conserva alias numéricos heredados; no deduzcas valores a partir del sufijo de un alias.
--undpds-spacing-004
4px
Usa los nombres exportados tal como aparecen. CSS de componentes también conserva alias numéricos heredados; no deduzcas valores a partir del sufijo de un alias.
--undpds-spacing-008
8px
Usa los nombres exportados tal como aparecen. CSS de componentes también conserva alias numéricos heredados; no deduzcas valores a partir del sufijo de un alias.
--undpds-spacing-012
12px
Usa los nombres exportados tal como aparecen. CSS de componentes también conserva alias numéricos heredados; no deduzcas valores a partir del sufijo de un alias.
--undpds-spacing-016
16px
Usa los nombres exportados tal como aparecen. CSS de componentes también conserva alias numéricos heredados; no deduzcas valores a partir del sufijo de un alias.
--undpds-spacing-024
24px
Usa los nombres exportados tal como aparecen. CSS de componentes también conserva alias numéricos heredados; no deduzcas valores a partir del sufijo de un alias.
--undpds-spacing-032
32px
Usa los nombres exportados tal como aparecen. CSS de componentes también conserva alias numéricos heredados; no deduzcas valores a partir del sufijo de un alias.
--undpds-spacing-040
40px
Usa los nombres exportados tal como aparecen. CSS de componentes también conserva alias numéricos heredados; no deduzcas valores a partir del sufijo de un alias.
--undpds-spacing-048
48px
Usa los nombres exportados tal como aparecen. CSS de componentes también conserva alias numéricos heredados; no deduzcas valores a partir del sufijo de un alias.
--undpds-spacing-064
64px
Usa los nombres exportados tal como aparecen. CSS de componentes también conserva alias numéricos heredados; no deduzcas valores a partir del sufijo de un alias.
--undpds-spacing-080
80px
Usa los nombres exportados tal como aparecen. CSS de componentes también conserva alias numéricos heredados; no deduzcas valores a partir del sufijo de un alias.
--undpds-spacing-096
96px
Usa los nombres exportados tal como aparecen. CSS de componentes también conserva alias numéricos heredados; no deduzcas valores a partir del sufijo de un alias.
--undpds-spacing-160
160px
Usa los nombres exportados tal como aparecen. CSS de componentes también conserva alias numéricos heredados; no deduzcas valores a partir del sufijo de un alias.
Sistema de diseño UNDP Límites de ejecución y recursos de UNDP
Elige el paquete de recursos para una página estática
El ejemplo proporcionado instala @undp/design-system-assets en la versión 2.0.2. Esta distribución incluye CSS base, CSS de componentes y scripts para el navegador; no es lo mismo que iniciar el repositorio completo de desarrollo de Storybook. Para esta composición solo se necesitan la hoja de estilos base, la hoja de estilos de pestañas y el script de pestañas. Cargar all.min.js o las hojas de estilos de todos los componentes añadiría comportamientos irrelevantes sin mejorar el espacio de lectura.
base-minimal.min.css proporciona las bases y las declaraciones tipográficas.
components/tab.min.css proporciona los estilos de presentación de las pestañas nativas.
js/tabs.min.js exporta el inicializador tabs().
Mantén diferenciadas la identidad institucional y el contenido de muestra
La guía es contenido original de práctica OpenDesign sobre la planificación de un taller local. No es un programa de UNDP, una declaración de políticas ni un portal de informes. La vista previa no incluye emblemas ni navegación institucional. Los estilos y comportamientos nativos se identifican con precisión, mientras que la guía, el progreso de las casillas y la acción de restablecimiento se describen claramente como código original de la aplicación.
Sistema de diseño UNDP Funciones del color y jerarquía editorial de UNDP
Construye a partir de la escala de azules real
--undpds-color-blue-600, incluido en la distribución, es #006eb5 y blue-700 es #1f5a95. El ejemplo usa el primero como fondo del bloque principal y el segundo para la acción de restablecimiento. gray-200 aporta la tarjeta complementaria de tono discreto, gray-300 separa las pestañas y yellow-600 añade el acento del borde. La pestaña actual lleva el subrayado rojo oscuro de la biblioteca. Estos usos pueden comprobarse en el CSS proporcionado; no se han deducido de una captura de pantalla.
No conviertas los colores de los ODS en significados de estado inventados
El paquete base incluye una paleta SDG independiente, además de tokens de color generales. Una página con temática de desarrollo no debería asignar esas entradas a estados arbitrarios de éxito o error solo porque están disponibles. En esta composición, la finalización se indica mediante un control marcado y un recuento legible; ningún color por sí solo comunica el estado de revisión.
Sistema de diseño UNDP Tipografía, espaciado y ámbito de fuentes de UNDP
Distinguir las declaraciones de las fuentes cargadas
El paquete declara las familias ProximaNova y SohneBreit e incluye archivos de fuentes, pero esta vista previa usa deliberadamente Arial como alternativa. Esa sustitución se aprecia en la nota de ejemplo y en CSS. La tabla de referencia sigue registrando las declaraciones de familias reales para que se entienda el sistema original. Los proyectos que adopten las tipografías de marca deben gestionar los recursos y derechos de uso correspondientes, en lugar de dar por sentado que el nombre de una familia tipográfica hace que las fuentes estén disponibles.
Usar los nombres de espaciado reales
La escala actual en píxeles va de spacing-002 a spacing-160 e incluye 12, 24 y 48 píxeles. La hoja de estilos de las pestañas también usa alias anteriores, como spacing-03 para 8px y spacing-09 para 48px; ambos están presentes en esta versión. La demostración conserva estas reglas de la biblioteca y añade una composición editorial de dos columnas que pasa a una columna por debajo de 720px. Ese punto de quiebre de la composición es una decisión propia, distinta del punto de quiebre de 48em de la hoja de estilos del componente.
Sistema de diseño UNDP Estructura e inicialización nativas de pestañas de UNDP
Mantener alineadas las colecciones de pestañas y paneles
El elemento raíz tiene data-undpds-component="tabs", una lista con role="tablist", tres elementos .tabs-title con role="tab" y tres secciones .tabs-panel dentro de .tabs-content. El script empareja estas colecciones por orden. Si falta un panel o el número de elementos no coincide, la inicialización no funcionará correctamente. Por eso, cada panel tiene un ID estable y contenido completo antes de ejecutar tabs(). La inicialización nativa crea las relaciones aria-controls y aria-labelledby y marca el elemento seleccionado con is-active.
Decidir de forma deliberada cómo gestionar los fragmentos de URL
Sistema de diseño UNDP Navegación con teclado y estado visible de UNDP
Verificar la visibilidad real de los paneles
Las teclas de flecha y las teclas Inicio o Fin cambian la pestaña activa y el foco mediante la implementación nativa. Enter y Espacio también la activan. El script actualiza tabindex, aria-selected, hidden y aria-hidden en conjunto. Probar únicamente la clase activa CSS no detectaría un fallo en el que varios paneles siguieran visibles o un panel oculto aún recibiera el foco. Las comprobaciones del navegador prueban tanto el elemento seleccionado como el contenido que realmente se muestra.
Mantener los controles de revisión vinculados a su sección
Cada panel incluye una casilla de verificación nativa con la etiqueta Marcar esta sección como revisada. El estado se conserva al ocultar el panel porque el nodo no se vuelve a crear. El recuento del progreso es un mensaje de estado cortés y solo describe esta vista previa local. No es una acreditación formativa ni un registro de finalización del servidor. El usuario puede volver a una sección y cambiar la selección directamente.
Sistema de diseño UNDP Progreso local y recuperación de UNDP
Especificar claramente el alcance del reinicio
Restablecer el progreso de lectura desmarca las tres casillas y vuelve a calcular el recuento. No cambia la pestaña activa ni borra contenido. El controlador usa la misma función de progreso que al cambiar una casilla, para evitar describir la finalización de dos maneras distintas. El ejemplo no guarda nada fuera del documento actual, así que una recarga completa inicia una nueva sesión de lectura.
Evitar que la lectura opcional parezca obligatoria
El recuento ayuda a orientarse; no es un bloqueo que impida acceder a las secciones posteriores. Las tres pestañas siguen disponibles aunque no se haya revisado ninguna sección, y los lectores pueden visitarlas en cualquier orden. Un flujo de trabajo de producción que requiriera una confirmación necesitaría sus propios requisitos, manejo de errores y persistencia, en lugar de reutilizar este modelo de progreso local.
Sistema de diseño UNDP Composición de lectura adaptable de UNDP
Reorganizar el contenido en lugar de reducirlo
La introducción azul y cada panel usan dos columnas en tamaños de pantalla más amplios. A 720px, se apilan las columnas, el relleno exterior se reduce a 16px y se reduce el tamaño del título grande. La lista de pestañas se ajusta a varias líneas cuando hace falta, sin perder ninguna etiqueta. Ningún panel de altura fija recorta una traducción o un párrafo más largo, y la nota complementaria sigue siendo texto real en lugar de una imagen decorativa.
Probar el ancho incrustado
La columna de contenido de una página de detalle es más estrecha que la ventana del navegador. Este ejemplo se probó hasta 280px, tanto como documento independiente como en anchos de escritorio, tableta y teléfono. Un componente que cabe en toda la pantalla del teléfono aún puede desbordarse dentro del marco con márgenes de la página de detalle; la comprobación compartida de la página mide ambos casos.
Sistema de diseño UNDP Integración estática completa de UNDP
Mantener juntos los archivos proporcionados
Guarda index.html, undp.css y undp-app.js en el mismo directorio, instala el paquete de recursos con la versión fijada y sirve ese directorio. HTML apunta al CSS base, al CSS de pestañas y al script de navegador de pestañas del paquete antes de cargar el pequeño script de la aplicación. Este ejemplo no necesita un empaquetador, jQuery ni GSAP. La vista previa incrustada localmente integra esos mismos recursos de componentes y elimina las declaraciones font-face que no se usan.
Guarda los tres archivos proporcionados en el mismo directorio.
Sirve la carpeta y prueba la selección de pestañas con el puntero y el teclado.
Revisa todas las secciones, vuelve a otra y restablece el recuento local.
Separar el comportamiento de los componentes del comportamiento de la aplicación
Ejemplos de componentes del sistema de diseño sistema de diseño UNDP
undp-index.html — código fuente completo
Guarda este archivo como index.html; incluye los tres paneles de contenido y las importaciones de recursos.
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>
Mantén juntos los nombres de archivo y las rutas relativas de los paquetes.
undp-app.js — código fuente completo
Inicialización de pestañas nativas y comportamiento original de progreso local y reinicio.
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();});
Mantén juntos los nombres de archivo y las rutas relativas de los paquetes.
04
Configuración del agente de sistema de diseño UNDP
Punto de partida para la implementación
Abre http://localhost:8000/. HTML importa los recursos reales del paquete; no hace falta un proyecto completo de Storybook.
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
Una instrucción para tu proyecto
Instrucción para el agente
Implementa el espacio de lectura con pestañas nativas de UNDP 2.0.2 proporcionado, usando todos los elementos HTML, CSS y JavaScript. Conserva los nombres reales de los tokens, la correspondencia entre la cantidad de pestañas y paneles, el comportamiento de las teclas de flecha, Inicio y Fin, la alternativa explícita con Arial, el progreso de revisión solo local y la navegación que no bloquea el avance. Mantén el texto original del taller separado de las políticas institucionales.
05
Fuentes y alcance de sistema de diseño UNDP
Guía de aplicación OpenDesign que usa los recursos de pestañas nativas de UNDP 2.0.2 y contenido original. La alternativa con Arial es explícita; no se representa ningún programa de UNDP ni política oficial.
