# Sistema de diseño UNDP ## Sistema de diseño UNDP Vista previa de la interfaz Navega con las teclas de flecha, revisa las secciones y restablece el recuento de lectura local. ## 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. ### Paleta y superficies semánticas | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --undpds-color-blue-600 | #006eb5 | 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. | ### Escala de espaciado actual | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --undpds-spacing-002 | 2px | 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. | ### Referencias de tipografía y bordes | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --undpds-font-family-proximanova | ProximaNova,sans-serif | Declaraciones publicadas; no significa que esta vista previa cargue las fuentes de marca. La vista previa usa deliberadamente Arial como alternativa. | | --undpds-font-family-sohnebreit | SohneBreit,ProximaNova,sans-serif | Declaraciones publicadas; no significa que esta vista previa cargue las fuentes de marca. La vista previa usa deliberadamente Arial como alternativa. | | --undpds-font-size-14 | 0.875rem | Declaraciones publicadas; no significa que esta vista previa cargue las fuentes de marca. La vista previa usa deliberadamente Arial como alternativa. | | --undpds-font-size-16 | 1rem | Declaraciones publicadas; no significa que esta vista previa cargue las fuentes de marca. La vista previa usa deliberadamente Arial como alternativa. | | --undpds-font-size-20 | 1.25rem | Declaraciones publicadas; no significa que esta vista previa cargue las fuentes de marca. La vista previa usa deliberadamente Arial como alternativa. | | --undpds-font-size-24 | 1.5rem | Declaraciones publicadas; no significa que esta vista previa cargue las fuentes de marca. La vista previa usa deliberadamente Arial como alternativa. | | --undpds-font-size-32 | 2rem | Declaraciones publicadas; no significa que esta vista previa cargue las fuentes de marca. La vista previa usa deliberadamente Arial como alternativa. | | --undpds-font-size-40 | 2.5rem | Declaraciones publicadas; no significa que esta vista previa cargue las fuentes de marca. La vista previa usa deliberadamente Arial como alternativa. | | --undpds-font-weight-regular | 400 | Declaraciones publicadas; no significa que esta vista previa cargue las fuentes de marca. La vista previa usa deliberadamente Arial como alternativa. | | --undpds-font-weight-bold | 700 | Declaraciones publicadas; no significa que esta vista previa cargue las fuentes de marca. La vista previa usa deliberadamente Arial como alternativa. | | --undpds-border-default | 2px | Declaraciones publicadas; no significa que esta vista previa cargue las fuentes de marca. La vista previa usa deliberadamente Arial como alternativa. | ### Anatomía y comportamiento de las pestañas nativas | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | data-undpds-component | tabs | Marca la raíz que analiza tabs(). | | Tab collection | .tabs-title[role="tab"] | El ejemplo usa elementos de lista enfocables con paneles correspondientes; la inicialización nativa establece los ID y aria-controls. | | Panels | .tabs-content > .tabs-panel | Un panel por pestaña, en el mismo orden; cada uno tiene un ID único y estable. | | Deep links | data-deep-link="false" | Evita que el estudio incrustado modifique el hash de la URL al cambiar de sección. | | Keyboard | Arrow keys, Home, End, Enter, Space | El script nativo mueve el foco y activa el panel correspondiente. | | State | aria-selected, tabindex, hidden, aria-hidden | La inicialización y la selección actualizan tanto la semántica como la visibilidad real del panel. | ## Sistema de diseño UNDP Guía completa Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## 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 El paquete activa los enlaces profundos de forma predeterminada. En este espacio de trabajo incrustado, data-deep-link="false" en la lista de pestañas evita que cambiar de sección escriba un fragmento en la URL. Una publicación independiente puede activar los enlaces profundos si resulta útil compartir una sección, pero deberá probar la selección inicial según el fragmento y los cambios del historial. No copies una convención de fragmentos a una vista previa incrustada sin decidir qué página controla esa navegación. ## 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. 1. Guarda los tres archivos proporcionados en el mismo directorio. 2. Instala @undp/design-system-assets@2.0.2. 3. Sirve la carpeta y prueba la selección de pestañas con el puntero y el teclado. 4. Revisa todas las secciones, vuelve a otra y restablece el recuento local. ### Separar el comportamiento de los componentes del comportamiento de la aplicación El script de pestañas controla la selección de paneles y la navegación con el teclado. El pequeño script de la aplicación se ocupa únicamente de las casillas de revisión, el recuento y el reinicio. Esta separación permite revisar las actualizaciones: primero se comparan el comportamiento de las pestañas nativas y los cambios en los tokens; después, se comprueba que el estado local siga funcionando. Copiar un framework de aplicación completo ocultaría qué comportamientos proceden realmente del sistema de diseño. ## 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. ``` 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

``` Referencia de código - Mantén juntos los nombres de archivo y las rutas relativas de los paquetes. ### undp.css — código fuente completo Composición adaptable original y alternativa explícita con 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}} ``` Referencia de código - 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. ``` 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();}); ``` Referencia de código - Mantén juntos los nombres de archivo y las rutas relativas de los paquetes. ## 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. ``` 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 ``` ### Una instrucción para tu proyecto ``` 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. ``` ## 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. - Sistema de diseño oficial Documentación de componentes y directrices de diseño actuales. - Repositorio oficial Enfoque de distribución y contexto de desarrollo. - CSS de base fijado Declaraciones reales de tokens y tipografía usadas por esta versión. - Implementación de pestañas fijada Selección, foco, enlaces profundos y visibilidad de paneles. ## Recursos relacionados de sistema de diseño UNDP ### USWDS Conecta los tokens de espaciado de USWDS, los roles de tema, las tablas semánticas y los acordeones nativos en una comparación de oportunidades con búsqueda. ### VA sistema de diseño Crea recorridos de servicio claros con los tokens semánticos de VA y la Process List nativa: explicaciones visibles de cada paso, etiquetas de estado significativas y detalles complementarios que mantienen legible el recorrido principal. ### W3C sistema de diseño Crea interfaces de lectura adaptables con tipografía fluida, roles de color semánticos y contenido plegable nativo que sigue siendo legible sin JavaScript. - [Referencia de implementación](https://github.com/undp/design-system) - [Fuente](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/css/base-minimal.min.css) - [Fuente](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/js/tabs.min.js) - [Referencia de código](https://github.com/undp/design-system) - [Sistema de diseño oficial Documentación de componentes y directrices de diseño actuales.](https://design.undp.org/) - [Repositorio oficial Enfoque de distribución y contexto de desarrollo.](https://github.com/undp/design-system) - [CSS de base fijado Declaraciones reales de tokens y tipografía usadas por esta versión.](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/css/base-minimal.min.css) - [Implementación de pestañas fijada Selección, foco, enlaces profundos y visibilidad de paneles.](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/js/tabs.min.js)