Explore os tokens de design da NSW, a tipografia Public Sans e as guias nativas acessíveis por teclado em um guia completo de workshop, com uma lista de leitura local independente.
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.
03
Sistema de design NSW Guia completo
Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.
DESIGN-nsw.md
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
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.
Instale a versão fixada do pacote NSW e os arquivos da fonte Public Sans.
Salve o arquivo de entrada completo e nsw.css com um elemento raiz para montagem.
Salve prompts em duas abas diferentes e verifique se o estado é mantido.
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.
javascript
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=`<main><p class="eyebrow">NSW DESIGN SYSTEM / ORIGINAL WORKSHOP STUDY</p><h1>Plan a focused discussion</h1><p class="nsw-intro">Move between three stages and save useful prompts to a local reading list.</p><div class="layout"><section class="nsw-tabs js-tabs"><ul class="nsw-tabs__list">${sessions.map(([name],i)=>`<li><a href="#session-${i}">${name}</a></li>`).join('')}</ul>${sessions.map(([name,title,lead,body],i)=>`<section id="session-${i}" class="nsw-tabs__content"><p class="step">STAGE ${i+1} / 3</p><h2>${title}</h2><p class="nsw-intro">${lead}</p><p>${body}</p><div class="prompt"><h3>Prompt to keep</h3><blockquote>${['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]}</blockquote><button class="nsw-button nsw-button--dark save" data-index="${i}" aria-pressed="false">Save this prompt</button></div></section>`).join('')}</section><aside><h2>Your reading list</h2><p id="count" role="status">0 prompts saved</p><ul id="saved"></ul><p id="empty">Save a prompt from any stage. Changing tabs keeps your selection.</p><button class="nsw-button nsw-button--white" id="clear" disabled>Clear reading list</button><p class="note">This is an original local study using NSW 3.27.0 tabs and CSS. Nothing is stored after reloading.</p></aside></div></main>`;
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()});
O rótulo auxiliar do estágio usa um neutro escuro; --nsw-text-light é branco.
04
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.
sh
npm create vite@latest nsw-workshop -- --template vanilla
cd nsw-workshop
npm install
npm install [email protected] @fontsource/public-sans
# Replace src/main.js and add src/nsw.css. Keep <div id="root"></div>.
npm run dev
Um prompt para seu projeto
Prompt para agente de IA
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.
05
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.
