# Sistema de design NSW ## Sistema de design NSW Pré-visualização da interface Alterne entre as guias com o mouse ou o teclado sem perder sua lista de leitura local. ## Sistema de design NSW Referência de design Exportações reais de CSS de nsw-design-system 3.27.0 e implementação de Tabs, com fontes Public Sans locais. ### Funções de marca e neutras | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --nsw-brand-dark | #002664 | Tema padrão real da versão 3.27.0. Text-light significa texto de cor clara em superfícies escuras, não texto com pouca ênfase sobre fundo branco. | | --nsw-brand-light | #cbedfd | Tema padrão real da versão 3.27.0. Text-light significa texto de cor clara em superfícies escuras, não texto com pouca ênfase sobre fundo branco. | | --nsw-brand-supplementary | #146cfd | Tema padrão real da versão 3.27.0. Text-light significa texto de cor clara em superfícies escuras, não texto com pouca ênfase sobre fundo branco. | | --nsw-brand-accent | #d7153a | Tema padrão real da versão 3.27.0. Text-light significa texto de cor clara em superfícies escuras, não texto com pouca ênfase sobre fundo branco. | | --nsw-brand-accent-light | #ffe6ea | Tema padrão real da versão 3.27.0. Text-light significa texto de cor clara em superfícies escuras, não texto com pouca ênfase sobre fundo branco. | | --nsw-grey-01 | #22272b | Tema padrão real da versão 3.27.0. Text-light significa texto de cor clara em superfícies escuras, não texto com pouca ênfase sobre fundo branco. | | --nsw-grey-02 | #495054 | Tema padrão real da versão 3.27.0. Text-light significa texto de cor clara em superfícies escuras, não texto com pouca ênfase sobre fundo branco. | | --nsw-grey-03 | #cdd3d6 | Tema padrão real da versão 3.27.0. Text-light significa texto de cor clara em superfícies escuras, não texto com pouca ênfase sobre fundo branco. | | --nsw-grey-04 | #ebebeb | Tema padrão real da versão 3.27.0. Text-light significa texto de cor clara em superfícies escuras, não texto com pouca ênfase sobre fundo branco. | | --nsw-off-white | #f2f2f2 | Tema padrão real da versão 3.27.0. Text-light significa texto de cor clara em superfícies escuras, não texto com pouca ênfase sobre fundo branco. | | --nsw-text-dark | #22272b | Tema padrão real da versão 3.27.0. Text-light significa texto de cor clara em superfícies escuras, não texto com pouca ênfase sobre fundo branco. | | --nsw-text-light | #fff | Tema padrão real da versão 3.27.0. Text-light significa texto de cor clara em superfícies escuras, não texto com pouca ênfase sobre fundo branco. | ### Pares de status | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --nsw-status-success | #008a07 | Combine a cor de status significativa com sua função de fundo e uma explicação textual legível. | | --nsw-status-success-bg | #e5f6e6 | Combine a cor de status significativa com sua função de fundo e uma explicação textual legível. | | --nsw-status-info | #2e5299 | Combine a cor de status significativa com sua função de fundo e uma explicação textual legível. | | --nsw-status-info-bg | #eaedf4 | Combine a cor de status significativa com sua função de fundo e uma explicação textual legível. | | --nsw-status-warning | #c95000 | Combine a cor de status significativa com sua função de fundo e uma explicação textual legível. | | --nsw-status-warning-bg | #fbeee5 | Combine a cor de status significativa com sua função de fundo e uma explicação textual legível. | | --nsw-status-error | #b81237 | Combine a cor de status significativa com sua função de fundo e uma explicação textual legível. | | --nsw-status-error-bg | #f7e7eb | Combine a cor de status significativa com sua função de fundo e uma explicação textual legível. | ### Tipografia e raio | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --nsw-font-family | "Public Sans",sans-serif | Referência tipográfica responsiva publicada e função compartilhada de cantos. Um par tipográfico para dispositivos móveis e desktop não é uma família de fontes separada. | | --nsw-font-size | 16px | Referência tipográfica responsiva publicada e função compartilhada de cantos. Um par tipográfico para dispositivos móveis e desktop não é uma família de fontes separada. | | --nsw-font-normal | 400 | Referência tipográfica responsiva publicada e função compartilhada de cantos. Um par tipográfico para dispositivos móveis e desktop não é uma família de fontes separada. | | --nsw-font-bold | 700 | Referência tipográfica responsiva publicada e função compartilhada de cantos. Um par tipográfico para dispositivos móveis e desktop não é uma família de fontes separada. | | --nsw-font-size-md-mobile | 1.125rem | Referência tipográfica responsiva publicada e função compartilhada de cantos. Um par tipográfico para dispositivos móveis e desktop não é uma família de fontes separada. | | --nsw-font-size-md-desktop | 1.25rem | Referência tipográfica responsiva publicada e função compartilhada de cantos. Um par tipográfico para dispositivos móveis e desktop não é uma família de fontes separada. | | --nsw-font-size-lg-mobile | 1.375rem | Referência tipográfica responsiva publicada e função compartilhada de cantos. Um par tipográfico para dispositivos móveis e desktop não é uma família de fontes separada. | | --nsw-font-size-lg-desktop | 1.5rem | Referência tipográfica responsiva publicada e função compartilhada de cantos. Um par tipográfico para dispositivos móveis e desktop não é uma família de fontes separada. | | --nsw-font-size-xl-mobile | 1.75rem | Referência tipográfica responsiva publicada e função compartilhada de cantos. Um par tipográfico para dispositivos móveis e desktop não é uma família de fontes separada. | | --nsw-font-size-xl-desktop | 2rem | Referência tipográfica responsiva publicada e função compartilhada de cantos. Um par tipográfico para dispositivos móveis e desktop não é uma família de fontes separada. | | --nsw-font-size-xxl-mobile | 2.25rem | Referência tipográfica responsiva publicada e função compartilhada de cantos. Um par tipográfico para dispositivos móveis e desktop não é uma família de fontes separada. | | --nsw-font-size-xxl-desktop | 3rem | Referência tipográfica responsiva publicada e função compartilhada de cantos. Um par tipográfico para dispositivos móveis e desktop não é uma família de fontes separada. | | --nsw-border-radius | 0.25rem | Referência tipográfica responsiva publicada e função compartilhada de cantos. Um par tipográfico para dispositivos móveis e desktop não é uma família de fontes separada. | ## Sistema de design NSW 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 NSW Ambiente de execução e tema fixados ### Use a implementação nativa de guias > O exemplo usa nsw-design-system 3.27.0. Ele importa o pacote CSS e a classe Tabs, e então inicializa o único grupo de guias após criar a marcação. Essa inicialização direcionada evita registrar componentes não relacionados que não estão presentes. A documentação atual pode descrever uma versão mais recente; o código para download e os valores dos tokens aqui continuam vinculados ao pacote verificado. ### Separe os componentes do estado da aplicação A classe Tabs nativa controla a seleção de guias, a visibilidade dos painéis e a navegação pelo teclado. A aplicação mantém um Set de prompts salvos. Assim, alternar entre etapas não altera a lista de leitura. Essa divisão está explícita no código-fonte: não há armazenamento global oculto, solicitação a um backend nem imitação de uma conta governamental. ## Sistema de design NSW Funções da marca e superfícies legíveis ### Use as funções escura e clara em conjunto A cor escura padrão da marca é #002664, enquanto a superfície clara é #CBEDFD. O painel do prompt usa o papel claro e uma ação escura. A aba ativa usa o tratamento de destaque do pacote. Esses são os papéis reais do tema, não uma paleta azul arbitrária escolhida para sugerir um site do setor público. O exemplo não usa um logotipo oficial do governo. ### Interprete os nomes dos tokens com atenção O token text-light é branco. Ele deve ser usado sobre um fundo escuro, não como sinônimo genérico de texto discreto. O texto auxiliar do estágio usa o papel neutro mais escuro. A referência inclui pares de primeiro plano e fundo para status, mas o workshop não inventa um alerta de erro ou sucesso apenas para exibir todas as cores disponíveis. ## Sistema de design NSW Public Sans e escala responsiva ### Carregue a fonte antes de inspecionar o layout O exemplo carrega localmente as versões 400 e 700 da Public Sans. O pacote define tamanhos separados para dispositivos móveis e desktop: o texto médio aumenta de 1.125rem para 1.25rem, e a referência de título maior aumenta de 2.25rem para 3rem. Esses pares ajudam a manter a hierarquia de leitura conforme a largura disponível muda. ### Mantenha a hierarquia do conteúdo simples Um rótulo curto para o estágio antecede um título descritivo, uma introdução, um parágrafo explicativo e um prompt salvo. A página não transforma cada frase em um cartão. Em telas estreitas, a lista de leitura vem depois do painel do estágio, enquanto a faixa curta de três rótulos das abas continua utilizável sem dividir o texto em várias linhas. ## Sistema de design NSW Marcação e comportamento de teclado das abas ### Permita que o componente aprimore links reais A lista inicial de abas contém links para IDs de conteúdo exclusivos. A inicialização adiciona a semântica de tablist/tab/tabpanel, gerencia a seleção e define a aba que pode receber foco. Manter os destinos href corretos é necessário para que o componente encontre os painéis. Não duplique IDs ao colocar mais de um grupo de abas na página. - Associe cada link de aba ao ID de um único painel. - Inicialize o grupo depois de inserir a marcação. - Deixe o componente nativo gerenciar a seleção e o foco do teclado. ### Verifique a seleção pelo teclado, além dos cliques A implementação nativa responde à navegação pelas teclas de seta. A verificação no navegador foca em Prepare, pressiona ArrowRight e confirma que Discuss foi selecionada. Esse comportamento é diferente de apenas estilizar o último rótulo clicado. Um grupo de abas é apropriado para esses estágios equivalentes, pois o leitor pode alternar entre eles; ele não é usado para ocultar campos obrigatórios em um envio sequencial. ## Sistema de design NSW Prompts salvos e feedback claro ### Mantenha o estado salvo independente da aba visível A ação de cada estágio alterna o estado do prompt em um Set, atualiza aria-pressed e muda o rótulo de Save para Remove. A contagem e os itens da lista de leitura são derivados desse Set. Ao voltar a um estágio salvo, o estado selecionado é exibido corretamente. Clear reading list remove todas as seleções e fica desativado quando não há nada para limpar. ### Explique os limites da persistência A lista de leitura é um estado local da página e desaparece ao recarregá-la. A interface informa isso diretamente. Uma lista realmente persistente precisaria de um modelo explícito de armazenamento e de um comportamento de restauração; nada disso está implícito aqui. O conteúdo é um estudo original sobre discussão de design, não um guia de elegibilidade para serviços nem uma alegação de que um fluxo oficial de NSW foi reproduzido. ## Sistema de design NSW Implementação completa e revisão ### Reproduza a fonte com as dependências dela Crie um projeto Vite vanilla, instale nsw-design-system 3.27.0 e Public Sans e salve o arquivo de entrada fornecido e nsw.css. Mantenha um elemento raiz para montagem. O conteúdo completo dos três estágios, os prompts originais, a inicialização nativa de Tabs e os manipuladores da lista de leitura estão incluídos. Nenhum pseudocódigo substitui o comportamento de salvar e redefinir. 1. Instale a versão fixada do pacote NSW e os arquivos da fonte Public Sans. 2. Salve o arquivo de entrada completo e nsw.css com um elemento raiz para montagem. 3. Salve prompts em duas abas diferentes e verifique se o estado é mantido. 4. Use ArrowRight, limpe a lista e inspecione o estado vazio. ### Mantenha a navegação por abas separada do conteúdo salvo Inicialize a classe nativa Tabs somente depois que os destinos dos links e os painéis existirem. IDs de fragmento correspondentes formam o contrato de aprimoramento: alterar o ID de um painel sem alterar seu href rompe essa relação, mesmo que os rótulos das abas continuem com a aparência correta. Se houver vários grupos na página, atribua IDs distintos a cada um. Trate a lista de leitura como estado da aplicação, separado da instância de abas. O estado salvo de um prompt deve persistir ao mudar de painel, e aria-pressed deve refletir esse estado quando o painel voltar a ser exibido. Use abas para conteúdos equivalentes que os leitores possam revisitar; um formulário sequencial que exige concluir etapas precisa de outro modelo de navegação. A persistência também exigiria uma política explícita de armazenamento e restauração, em vez de alterar silenciosamente este exemplo que funciona apenas na página. ## Sistema de design NSW Exemplos de componentes do sistema de design ### main.js — exemplo completo de abas nativas e lista de leitura Inclui todo o conteúdo original dos estágios, a inicialização das abas e a lógica completa para salvar, remover e redefinir. ``` import Tabs from 'nsw-design-system/src/components/tabs/tabs.js'; import 'nsw-design-system/css'; import '@fontsource/public-sans/latin-400.css'; import '@fontsource/public-sans/latin-700.css'; import './nsw.css'; const sessions=[['Prepare','Choose one question to explore','Start with a clear outcome rather than a long list of activities.','Write a one-sentence purpose. Identify the people who can answer the question and the evidence you already have.'],['Discuss','Make room for different views','Use a short, structured discussion to compare observations.','Ask participants to describe what they noticed before proposing solutions. Keep a separate record of assumptions that need evidence.'],['Review','Turn observations into a next step','End with an action that has an owner and a clear reason.','Choose one improvement to investigate. Record what would count as success and when the group will review the result.']]; document.getElementById('root').innerHTML=`

NSW DESIGN SYSTEM / ORIGINAL WORKSHOP STUDY

Plan a focused discussion

Move between three stages and save useful prompts to a local reading list.

    ${sessions.map(([name],i)=>`
  • ${name}
    • `).join('')}
${sessions.map(([name,title,lead,body],i)=>`

STAGE ${i+1} / 3

${title}

${lead}

${body}

Prompt to keep

${['What do we need to understand before choosing a solution?','Which observations are shared, and where do they differ?','What is the smallest next step that would reduce uncertainty?'][i]}
`).join('')}
`; new Tabs(document.querySelector('.js-tabs')).init();const saved=new Set();const $=id=>document.getElementById(id);function render(){$('count').textContent=saved.size+' prompt'+(saved.size===1?'':'s')+' saved';$('saved').replaceChildren(...[...saved].sort().map(i=>{const li=document.createElement('li');li.textContent=sessions[i][0]+': '+sessions[i][1];return li}));$('empty').hidden=saved.size>0;$('clear').disabled=!saved.size;document.querySelectorAll('.save').forEach(b=>{const yes=saved.has(Number(b.dataset.index));b.setAttribute('aria-pressed',String(yes));b.textContent=yes?'Remove saved prompt':'Save this prompt'})}document.querySelectorAll('.save').forEach(b=>b.addEventListener('click',()=>{const i=Number(b.dataset.index);saved.has(i)?saved.delete(i):saved.add(i);render()}));$('clear').addEventListener('click',()=>{saved.clear();render()}); ``` Referência de código - A classe NSW gerencia as abas; o Set armazena a lista de leitura original. ### nsw.css — composição responsiva original Layout e superfícies dos prompts usando os papéis semânticos publicados do tema. ``` body{margin:0}main{max-width:1240px;padding:32px;margin:auto}.eyebrow,.step{font-size:14px;letter-spacing:.05em;font-weight:700}.eyebrow{color:var(--nsw-brand-dark)}h1{max-width:24ch}.layout{display:grid;grid-template-columns:1.8fr 1fr;gap:32px;margin-top:40px}.nsw-tabs__content{min-height:0}.prompt{margin-top:32px;padding:24px;background:var(--nsw-brand-light)}.prompt h3{margin-top:0}.prompt blockquote{margin:16px 0 24px;padding:0;border:0;font-size:20px;line-height:1.5}.step{margin-top:0;color:var(--nsw-grey-02)}aside{padding:24px;border-top:4px solid var(--nsw-brand-dark);background:var(--nsw-off-white);align-self:start}aside h2{font-size:24px;margin-top:0}aside li{margin:16px 0}aside ul{padding-left:24px}.note{font-size:14px;margin-top:24px}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr}h1{font-size:36px}.prompt{padding:20px}} ``` Referência de código - O rótulo auxiliar do estágio usa um neutro escuro; --nsw-text-light é branco. ## Sistema de design NSW Configuração do agente ### Ponto de partida para implementação Os cliques nas abas nativas e o uso das teclas de seta, a manutenção do estado salvo, a limpeza e o layout responsivo foram testados localmente. ``` npm create vite@latest nsw-workshop -- --template vanilla cd nsw-workshop npm install npm install nsw-design-system@3.27.0 @fontsource/public-sans # Replace src/main.js and add src/nsw.css. Keep
. npm run dev ``` ### Um prompt para seu projeto ``` Crie o guia de workshop NSW com Tabs nativo da versão 3.27.0, Public Sans e os papéis semânticos reais. Mantenha IDs de painel exclusivos, seleção pelo teclado, estado dos prompts salvos independente e uma lista de leitura útil quando vazia. Deixe claros os limites do armazenamento apenas local e evite alegações sobre serviços oficiais. ``` ## Sistema de design NSW Fontes e escopo Um estudo de workshop criado com OpenDesign e NSW Design System 3.27.0. O comportamento nativo das abas é real; o conteúdo e o fluxo de trabalho com prompts salvos são lógicas originais de uma aplicação local. - Abas Navegação entre conteúdos equivalentes e comportamento nativo. - Integração para desenvolvedores Configuração do pacote, da folha de estilos e de JavaScript. - Tipografia Public Sans e hierarquia tipográfica. - Implementação com versão fixada Exportações do tema e código-fonte de Tabs. ## Sistema de design NSW Recursos relacionados ### ONS sistema de design Crie uma resposta de pesquisa que não possa se contradizer: caixas de seleção nativas do ONS, respostas mutuamente exclusivas, referências exatas de tipografia e cores e um fluxo local completo de revisão. ### Ontario sistema de design Crie um guia extenso no estilo de Ontário, com tipografia real, valores publicados de espaçamento e cores, comportamento nativo de acordeão e código-fonte completo correspondente à versão. ### Poncho Inspecione a grade Bootstrap 3 de Poncho, as cores semânticas das ações e os painéis de serviço totalmente clicáveis em um diretório de atividades funcional. - [Referência de implementação](https://designsystem.nsw.gov.au/components/tabs/index.html) - [Fonte](https://github.com/digitalnsw/nsw-design-system) - [Referência de código](https://designsystem.nsw.gov.au/components/tabs/index.html) - [Referência de código](https://designsystem.nsw.gov.au/get-started/for-developers.html) - [Abas Navegação entre conteúdos equivalentes e comportamento nativo.](https://designsystem.nsw.gov.au/components/tabs/index.html) - [Integração para desenvolvedores Configuração do pacote, da folha de estilos e de JavaScript.](https://designsystem.nsw.gov.au/get-started/for-developers.html) - [Tipografia Public Sans e hierarquia tipográfica.](https://designsystem.nsw.gov.au/core/typography/index.html) - [Implementação com versão fixada Exportações do tema e código-fonte de Tabs.](https://github.com/digitalnsw/nsw-design-system)