# Sistema de design UNDP ## Sistema de design UNDP Prévia da interface Navegue com as teclas de seta, revise as seções e redefina a contagem de leitura local. ## Sistema de design UNDP Referência de design Valores concretos e comportamentos da distribuição pública @undp/design-system-assets 2.0.2. A composição original da página e o comportamento de progresso são identificados separadamente. ### Paleta e superfícies semânticas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --undpds-color-blue-600 | #006eb5 | Valores reais do pacote público. O exemplo usa azul para o destaque editorial e amarelo para um cartão de leitura complementar; essas associações ao conteúdo são originais. | | --undpds-color-blue-700 | #1f5a95 | Valores reais do pacote público. O exemplo usa azul para o destaque editorial e amarelo para um cartão de leitura complementar; essas associações ao conteúdo são originais. | | --undpds-color-gray-200 | #f7f7f7 | Valores reais do pacote público. O exemplo usa azul para o destaque editorial e amarelo para um cartão de leitura complementar; essas associações ao conteúdo são originais. | | --undpds-color-gray-300 | #edeff0 | Valores reais do pacote público. O exemplo usa azul para o destaque editorial e amarelo para um cartão de leitura complementar; essas associações ao conteúdo são originais. | | --undpds-color-gray-700 | #232e3d | Valores reais do pacote público. O exemplo usa azul para o destaque editorial e amarelo para um cartão de leitura complementar; essas associações ao conteúdo são originais. | | --undpds-color-yellow-600 | #fbc412 | Valores reais do pacote público. O exemplo usa azul para o destaque editorial e amarelo para um cartão de leitura complementar; essas associações ao conteúdo são originais. | | --undpds-color-dark-red | #d12800 | Valores reais do pacote público. O exemplo usa azul para o destaque editorial e amarelo para um cartão de leitura complementar; essas associações ao conteúdo são originais. | | --undpds-color-background-default | #fff | Valores reais do pacote público. O exemplo usa azul para o destaque editorial e amarelo para um cartão de leitura complementar; essas associações ao conteúdo são originais. | | --undpds-color-border-default | #000 | Valores reais do pacote público. O exemplo usa azul para o destaque editorial e amarelo para um cartão de leitura complementar; essas associações ao conteúdo são originais. | ### Escala de espaçamento atual | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --undpds-spacing-002 | 2px | Use os nomes exportados exatamente como estão escritos. CSS de componentes também mantém aliases numéricos legados; não deduza valores pelo sufixo de um alias. | | --undpds-spacing-004 | 4px | Use os nomes exportados exatamente como estão escritos. CSS de componentes também mantém aliases numéricos legados; não deduza valores pelo sufixo de um alias. | | --undpds-spacing-008 | 8px | Use os nomes exportados exatamente como estão escritos. CSS de componentes também mantém aliases numéricos legados; não deduza valores pelo sufixo de um alias. | | --undpds-spacing-012 | 12px | Use os nomes exportados exatamente como estão escritos. CSS de componentes também mantém aliases numéricos legados; não deduza valores pelo sufixo de um alias. | | --undpds-spacing-016 | 16px | Use os nomes exportados exatamente como estão escritos. CSS de componentes também mantém aliases numéricos legados; não deduza valores pelo sufixo de um alias. | | --undpds-spacing-024 | 24px | Use os nomes exportados exatamente como estão escritos. CSS de componentes também mantém aliases numéricos legados; não deduza valores pelo sufixo de um alias. | | --undpds-spacing-032 | 32px | Use os nomes exportados exatamente como estão escritos. CSS de componentes também mantém aliases numéricos legados; não deduza valores pelo sufixo de um alias. | | --undpds-spacing-040 | 40px | Use os nomes exportados exatamente como estão escritos. CSS de componentes também mantém aliases numéricos legados; não deduza valores pelo sufixo de um alias. | | --undpds-spacing-048 | 48px | Use os nomes exportados exatamente como estão escritos. CSS de componentes também mantém aliases numéricos legados; não deduza valores pelo sufixo de um alias. | | --undpds-spacing-064 | 64px | Use os nomes exportados exatamente como estão escritos. CSS de componentes também mantém aliases numéricos legados; não deduza valores pelo sufixo de um alias. | | --undpds-spacing-080 | 80px | Use os nomes exportados exatamente como estão escritos. CSS de componentes também mantém aliases numéricos legados; não deduza valores pelo sufixo de um alias. | | --undpds-spacing-096 | 96px | Use os nomes exportados exatamente como estão escritos. CSS de componentes também mantém aliases numéricos legados; não deduza valores pelo sufixo de um alias. | | --undpds-spacing-160 | 160px | Use os nomes exportados exatamente como estão escritos. CSS de componentes também mantém aliases numéricos legados; não deduza valores pelo sufixo de um alias. | ### Referências de tipografia e bordas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --undpds-font-family-proximanova | ProximaNova,sans-serif | Declarações publicadas, não uma afirmação de que esta prévia carrega as fontes da marca. A prévia usa intencionalmente Arial como alternativa. | | --undpds-font-family-sohnebreit | SohneBreit,ProximaNova,sans-serif | Declarações publicadas, não uma afirmação de que esta prévia carrega as fontes da marca. A prévia usa intencionalmente Arial como alternativa. | | --undpds-font-size-14 | 0.875rem | Declarações publicadas, não uma afirmação de que esta prévia carrega as fontes da marca. A prévia usa intencionalmente Arial como alternativa. | | --undpds-font-size-16 | 1rem | Declarações publicadas, não uma afirmação de que esta prévia carrega as fontes da marca. A prévia usa intencionalmente Arial como alternativa. | | --undpds-font-size-20 | 1.25rem | Declarações publicadas, não uma afirmação de que esta prévia carrega as fontes da marca. A prévia usa intencionalmente Arial como alternativa. | | --undpds-font-size-24 | 1.5rem | Declarações publicadas, não uma afirmação de que esta prévia carrega as fontes da marca. A prévia usa intencionalmente Arial como alternativa. | | --undpds-font-size-32 | 2rem | Declarações publicadas, não uma afirmação de que esta prévia carrega as fontes da marca. A prévia usa intencionalmente Arial como alternativa. | | --undpds-font-size-40 | 2.5rem | Declarações publicadas, não uma afirmação de que esta prévia carrega as fontes da marca. A prévia usa intencionalmente Arial como alternativa. | | --undpds-font-weight-regular | 400 | Declarações publicadas, não uma afirmação de que esta prévia carrega as fontes da marca. A prévia usa intencionalmente Arial como alternativa. | | --undpds-font-weight-bold | 700 | Declarações publicadas, não uma afirmação de que esta prévia carrega as fontes da marca. A prévia usa intencionalmente Arial como alternativa. | | --undpds-border-default | 2px | Declarações publicadas, não uma afirmação de que esta prévia carrega as fontes da marca. A prévia usa intencionalmente Arial como alternativa. | ### Estrutura e comportamento das abas nativas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | data-undpds-component | tabs | Identifica a raiz examinada por tabs(). | | Tab collection | .tabs-title[role="tab"] | O exemplo usa itens de lista focalizáveis com painéis correspondentes; a inicialização nativa define IDs e aria-controls. | | Panels | .tabs-content > .tabs-panel | Um painel para cada aba, na mesma ordem; cada painel tem um ID exclusivo e estável. | | Deep links | data-deep-link="false" | Impeça que o estudo incorporado altere o hash da URL ao alternar entre seções. | | Keyboard | Arrow keys, Home, End, Enter, Space | O script nativo move o foco e ativa o painel correspondente. | | State | aria-selected, tabindex, hidden, aria-hidden | A inicialização e a seleção atualizam tanto a semântica quanto a visibilidade efetiva do painel. | ## Sistema de design UNDP Guia completo Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Sistema de design UNDP Limites de execução e recursos do UNDP ### Escolha o pacote de recursos para uma página estática > O exemplo fornecido instala @undp/design-system-assets na versão 2.0.2. Essa distribuição contém CSS base, CSS de componentes e scripts para navegador; ela é diferente de iniciar o repositório completo de desenvolvimento do Storybook. Para esta composição, são necessários apenas a folha de estilos base, a folha de estilos das abas e o script das abas. Carregar all.min.js ou todas as folhas de estilo dos componentes adicionaria comportamentos sem relação com o exemplo, sem melhorar o espaço de leitura. - base-minimal.min.css fornece fundamentos e declarações tipográficas. - components/tab.min.css fornece a apresentação nativa das abas. - js/tabs.min.js exporta o inicializador tabs(). ### Mantenha a identidade institucional separada do conteúdo de exemplo O resumo é conteúdo original de prática OpenDesign sobre o planejamento de uma oficina local. Não se trata de um programa do UNDP, uma declaração de política nem um portal de relatórios. A prévia não contém emblema nem navegação institucional. Os estilos e comportamentos nativos são identificados com precisão, enquanto o resumo, o progresso das caixas de seleção e a ação de redefinição são descritos claramente como código original da aplicação. ## Sistema de design UNDP Papéis de cor e hierarquia editorial do UNDP ### Use a escala real de azuis como base A variável --undpds-color-blue-600, fornecida no pacote, corresponde a #006eb5; blue-700 corresponde a #1f5a95. O exemplo usa a primeira como fundo do bloco de destaque e a segunda na ação de redefinição. gray-200 compõe o cartão complementar discreto, gray-300 divide as abas e yellow-600 adiciona um detalhe de borda. A aba atual recebe o sublinhado vermelho-escuro da biblioteca. É possível inspecionar esses papéis em CSS, em vez de deduzi-los de uma captura de tela. ### Não atribua significados de status inventados às cores dos ODS O pacote base inclui uma paleta separada para os ODS, além de tokens de cor gerais. Uma página sobre desenvolvimento não deve atribuir essas cores a estados arbitrários de sucesso ou erro só porque estão disponíveis. Nesta composição, a conclusão é indicada por um controle marcado e uma contagem legível; nenhuma cor, por si só, representa o estado da revisão. ## Sistema de design UNDP Tipografia, espaçamento e escopo de fontes do UNDP ### Diferencie declarações de fontes carregadas O pacote declara as famílias ProximaNova e SohneBreit e contém arquivos de fontes, mas esta prévia usa intencionalmente Arial como alternativa. Essa substituição está indicada na observação do exemplo e em CSS. A tabela de referência ainda registra as declarações reais de família para que o leitor compreenda o sistema original. Um projeto que adote as fontes da marca deve providenciar os recursos adequados e os direitos de uso, em vez de presumir que o nome da família tipográfica disponibiliza as fontes. ### Use os nomes de espaçamento reais A escala atual em pixels vai de spacing-002 a spacing-160 e inclui 12, 24 e 48 pixels. A folha de estilos das abas também usa aliases antigos, como spacing-03 para 8px e spacing-09 para 48px; ambos estão presentes nesta versão. A demonstração mantém essas regras da biblioteca e acrescenta um layout editorial de duas colunas, que passa a uma coluna abaixo de 720px. Esse ponto de quebra do layout é uma decisão original da composição, diferente do ponto de quebra de 48em da folha de estilos do componente. ## Sistema de design UNDP Estrutura e inicialização das abas nativas do UNDP ### Mantenha alinhadas as coleções de abas e painéis A raiz tem data-undpds-component="tabs", uma lista com role="tablist", três elementos .tabs-title com role="tab" e três seções .tabs-panel dentro de .tabs-content. O script associa essas coleções pela ordem. Se faltar um painel ou a quantidade for diferente, a inicialização não funcionará de forma adequada. Por isso, cada painel tem um ID estável e o conteúdo completo antes da execução de tabs(). A inicialização nativa cria as relações aria-controls e aria-labelledby e marca o item selecionado com is-active. ### Defina o comportamento do hash de forma intencional Por padrão, o pacote ativa links diretos. Neste espaço de trabalho incorporado, data-deep-link="false" na lista de abas impede que a troca de seção grave um hash na URL. Uma publicação independente pode ativar links diretos se for útil compartilhar uma seção, mas deve testar a seleção inicial pelo hash e as mudanças no histórico. Não copie uma convenção de hash para uma prévia incorporada sem decidir qual página controla essa navegação. ## Sistema de design UNDP Navegação por teclado e estado visível do UNDP ### Verifique a visibilidade efetiva dos painéis As teclas de seta e Home ou End alteram a aba ativa e movem o foco pela implementação nativa. Enter e Espaço também a ativam. O script atualiza tabindex, aria-selected, hidden e aria-hidden em conjunto. Testar apenas uma classe CSS ativa não detectaria uma falha em que vários painéis permanecessem visíveis ou um painel oculto ainda pudesse receber foco. Os testes no navegador verificam tanto o item selecionado quanto o conteúdo efetivamente exibido. ### Mantenha os controles de revisão associados à seção correspondente Cada painel inclui uma caixa de seleção nativa com o rótulo Marcar esta seção como revisada. O estado persiste quando o painel fica oculto, pois o nó não é recriado. A contagem de progresso é uma mensagem de status cortês e descreve apenas esta prévia local. Não é uma certificação de aprendizagem nem um registro de conclusão no servidor. O usuário pode voltar a uma seção e alterar a seleção diretamente. ## Sistema de design UNDP Progresso local e recuperação do UNDP ### Deixe explícito o escopo da redefinição Redefinir o progresso de leitura desmarca as três caixas de seleção e recalcula a contagem. A ação não altera a aba ativa nem apaga o conteúdo. O manipulador usa a mesma função de progresso acionada pela mudança de uma caixa de seleção, evitando duas descrições distintas de conclusão. O exemplo não armazena nada fora do documento atual; portanto, uma recarga completa inicia uma nova sessão de leitura. ### Não transforme a leitura opcional em uma obrigação A contagem ajuda na orientação; não é um bloqueio que impeça o acesso às seções seguintes. As três abas continuam disponíveis mesmo sem nenhuma seção revisada, e os leitores podem acessá-las em qualquer ordem. Um fluxo de produção que exigisse confirmação precisaria de requisitos, tratamento de erros e persistência próprios, em vez de reutilizar este modelo de progresso local. ## Sistema de design UNDP Composição de leitura responsiva do UNDP ### Reorganize o conteúdo em vez de apenas reduzi-lo A introdução azul e cada painel usam duas colunas em telas maiores. Abaixo de 720px, as colunas ficam empilhadas, o espaçamento externo diminui para 16px e o título grande fica menor. A lista de abas quebra linhas quando necessário, sem ocultar nenhum rótulo. Nenhum painel com altura fixa corta traduções ou parágrafos mais longos, e a observação complementar continua sendo texto real, não uma imagem decorativa. ### Teste a largura incorporada A coluna de conteúdo de uma página de detalhes é mais estreita que a janela do navegador. Este exemplo foi testado até 280px como documento independente, além de em larguras de desktop, tablet e celular. Um componente que cabe na tela inteira do celular ainda pode transbordar dentro da área recuada da página de detalhes; a verificação compartilhada da página mede as duas situações. ## Integração estática completa do UNDP sistema de design UNDP ### Mantenha os arquivos fornecidos juntos Salve os arquivos fornecidos index.html, undp.css e undp-app.js no mesmo diretório, instale o pacote de recursos com versão fixada e disponibilize esse diretório em um servidor. O HTML aponta para o CSS base, o CSS de abas e o script do navegador para abas do pacote antes de carregar o pequeno script da aplicação. Este exemplo não precisa de empacotador, jQuery ou GSAP. A prévia incorporada localmente inclui esses mesmos recursos dos componentes e remove as declarações font-face não utilizadas. 1. Salve os três arquivos fornecidos no mesmo diretório. 2. Instale @undp/design-system-assets@2.0.2. 3. Disponibilize a pasta em um servidor e teste a seleção de abas com o mouse e o teclado. 4. Revise todas as seções, volte à anterior e redefina a contagem local. ### Separe o comportamento do componente do comportamento da aplicação O script de abas controla a seleção dos painéis e a navegação pelo teclado. O pequeno script da aplicação controla apenas as caixas de seleção de revisão, a contagem e a redefinição. Essa separação facilita revisar atualizações: primeiro compare o comportamento nativo das abas e as alterações nos tokens; depois, verifique se o estado local continua funcionando. Copiar uma estrutura completa de aplicação ocultaria quais comportamentos realmente vêm do sistema de design. ## Exemplos de componentes do sistema de design sistema de design UNDP ### undp-index.html — código-fonte completo Salve como index.html; os três painéis de conteúdo e as importações dos recursos estão incluídos. ``` 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

``` Referência de código - Mantenha juntos os nomes de arquivo e os caminhos relativos do pacote. ### undp.css — código-fonte completo Composição responsiva original e alternativa explícita com 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}} ``` Referência de código - Mantenha juntos os nomes de arquivo e os caminhos relativos do pacote. ### undp-app.js — código-fonte completo Inicialização nativa das abas e comportamento original de progresso e redefinição locais. ``` 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();}); ``` Referência de código - Mantenha juntos os nomes de arquivo e os caminhos relativos do pacote. ## Configuração do agente de IA sistema de design UNDP ### Ponto de partida para implementação Abra http://localhost:8000/. O HTML importa os recursos reais do pacote; não é necessário um projeto completo do 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 ``` ### Um prompt para seu projeto ``` Implemente o espaço de leitura fornecido, com abas nativas do UNDP 2.0.2, usando todos os HTML, CSS e JavaScript fornecidos. Preserve os nomes reais dos tokens, a correspondência entre a quantidade de abas e painéis, o comportamento das teclas de seta, Home e End, a alternativa explícita com Arial, o progresso de revisão apenas local e a navegação que não bloqueia o fluxo. Mantenha o texto original da oficina distinto das políticas institucionais. ``` ## Fontes e escopo sistema de design UNDP Um guia de aplicação OpenDesign que usa os recursos de abas nativas do UNDP 2.0.2 e conteúdo original. A alternativa com Arial é explícita; o conteúdo não representa nenhum programa do UNDP nem política oficial. - Sistema de design oficial Documentação dos componentes e orientações de design atuais. - Repositório oficial Abordagem de distribuição e contexto de desenvolvimento. - Fundação com versão fixada CSS Declarações reais de tokens e tipografia usadas nesta versão. - Implementação de abas com versão fixada Seleção, foco, links diretos e visibilidade dos painéis. ## Recursos relacionados sistema de design UNDP ### USWDS Combine os tokens de espaçamento de USWDS, os papéis do tema, tabelas semânticas e accordions nativos em uma comparação de oportunidades pesquisável. ### VA sistema de design Crie jornadas de serviço claras com os tokens semânticos e a Process List nativa da VA: explicações visíveis das etapas, rótulos de status significativos e detalhes complementares que mantêm o fluxo principal legível. ### W3C sistema de design Crie interfaces de leitura resilientes com tipografia fluida, papéis semânticos de cores e conteúdo expansível nativo que continua legível sem JavaScript. - [Referência de implementação](https://github.com/undp/design-system) - [Fonte](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/css/base-minimal.min.css) - [Fonte](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/js/tabs.min.js) - [Referência de código](https://github.com/undp/design-system) - [Sistema de design oficial Documentação dos componentes e orientações de design atuais.](https://design.undp.org/) - [Repositório oficial Abordagem de distribuição e contexto de desenvolvimento.](https://github.com/undp/design-system) - [Fundação com versão fixada CSS Declarações reais de tokens e tipografia usadas nesta versão.](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/css/base-minimal.min.css) - [Implementação de abas com versão fixada Seleção, foco, links diretos e visibilidade dos painéis.](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/js/tabs.min.js)