Crie interfaces japonesas legíveis para serviços públicos com funções de texto do DADS, tokens semânticos e a anatomia nativa dos componentes de HTML. Experimente uma consulta funcional de recibos com erros de formato, resultado sem correspondências e um registro de status que pode ser revisado.
Estilos nativos de campo/botão DADS HTML, datados de 3 de outubro de 2026, com design-tokens 2.0.1; layout original e lógica de consulta local. · Referência de implementação
02
Referência de design do sistema de design Digital Agency
Documentação beta do DADS v2.18.0; estilos nativos de exemplo de HTML inspecionados em 3 de outubro de 2026; design-tokens 2.0.1. A documentação, o repositório de exemplos e o pacote de tokens têm históricos de versão distintos. As escolhas de layout abaixo são diferenciadas explicitamente dos valores oficiais dos componentes.
Recursos e escopo sistema de design Digital Agency
Escolha o caminho de origem de HTML
O índice oficial de recursos oferece exemplos de HTML/CSS/JavaScript, exemplos de React/Tailwind, um plugin do Tailwind e dados de design do Figma. Este exemplo escolhe o caminho simples de HTML: o campo e o botão CSS são copiados sem alterações, enquanto a consulta de status e a validação no cliente ao redor deles são código do aplicativo. Não existe um pacote universal de componentes DADS inventado.
A prévia é uma consulta fictícia e independente de procedimentos municipais. Ela não reproduz o cabeçalho de um órgão governamental, não consulta um banco de dados público nem alega apresentar o status de um serviço oficial. O formato do comprovante e os registros de status são dados de exemplo.
Carregue design-tokens antes dos estilos dos dois componentes.
Mantenha as classes e os atributos de dados documentados nos controles nativos de HTML.
Adicione validação específica do serviço, conteúdo de status e movimentação do foco no código do aplicativo.
Tipografia e idioma sistema de design Digital Agency
Entenda o nome do estilo de texto
Std-17N-170 descreve uma tipografia regular de 17px, com entrelinha unitária de 1.7. A prévia aplica esse ritmo de leitura ao texto corrido e define o título com 32px em negrito e entrelinha de 1.5. Noto Sans JP é a opção sem serifa documentada; também há fontes alternativas do sistema disponíveis quando a fonte da web não é carregada. Este exemplo local usa intencionalmente essas alternativas.
Textos em japonês e em inglês não ocupam a mesma largura. Mantenha os rótulos visíveis acima dos controles, permita que o título quebre linha e evite dimensionar um botão com base em uma contagem presumida de caracteres. Uma tradução pode exigir mais espaço vertical sem alterar a função do componente.
Cores semânticas e foco sistema de design Digital Agency
Use os aliases realmente consumidos por CSS
O botão de exemplo define sua cor padrão a partir de --color-key-900. A folha de estilos de tokens distribuída resolve esse alias para blue-900, #0017c1. As regras de hover e active selecionam key-1000 e key-1200, em vez de aplicar uma opacidade arbitrária. A borda de erro do campo usa --color-semantic-error-1.
O contorno preto e a sombra amarela permanecem visíveis quando um controle recebe foco pelo teclado. Posicione o controle longe de contêineres que possam recortá-lo; um cartão com overflow-hidden pode cortar o indicador mesmo quando CSS do componente está correto. O texto de erro e aria-invalid complementam a borda vermelha.
Espaçamento e fluxo responsivo sistema de design Digital Agency
Escolha um ritmo de espaçamento simples para o aplicativo
As orientações de espaçamento do DADS apresentam exemplos, em vez de prescrever uma sequência obrigatória única para todas as interfaces. Esta composição usa 8px dentro de unidades relacionadas, 24px entre seções do formulário e 64px como margem generosa da página em telas desktop. A largura máxima do conteúdo, de 52rem, é uma decisão do aplicativo, não um token DADS.
Em larguras estreitas, as definições dos resultados ficam empilhadas e os controles ocupam todo o espaço disponível. Este exemplo usa uma media query de 768px. Ela não é apresentada como um breakpoint universal do DADS; a quebra do conteúdo e o tamanho mínimo do botão são os motivos para a alteração.
Estrutura de campos e erros sistema de design Digital Agency
Mantenha o rótulo, a dica e o erro separados
O contêiner nativo .dads-input-text define os padrões de texto. O elemento filho .dads-input-text__input controla tamanho, borda, preenchimento, raio e estados de foco. O rótulo associado é vinculado explicitamente por for/id. A dica continua disponível após um erro para que a pessoa não perca a informação sobre o formato esperado.
O exemplo aceita exatamente seis dígitos ASCII. Uma entrada malformada define aria-invalid=true, exibe a mensagem de erro associada e devolve o foco ao campo. Um valor sintaticamente válido diferente de 123456 gera uma mensagem separada de ausência de correspondência; não é descrito como erro de formatação. Ambos os comportamentos são regras locais da demonstração.
Mantenha o tipo do campo como texto: uma referência é um identificador, não uma quantidade.
Use inputmode=numeric como dica de teclado, sem os botões de incremento e decremento de campos numéricos.
Mantenha o valor digitado enquanto explica como corrigi-lo.
Sistema de design Digital Agency Hierarquia e estados dos botões
Uma ação principal para esta consulta
O botão grande preenchido inicia a consulta, e o botão de estilo textual limpa o exemplo. Os valores nativos de data-type são solid-fill, outline e text; data-size seleciona lg, md, sm ou xs. Estes são atributos de exemplo HTML, não props de React.
O botão grande tem largura mínima de 136px e altura de 56px. Ele pode se expandir quando o rótulo exigir mais espaço. As variantes pequena e extrapequena usam uma área de interação ampliada no CSS fornecido; não coloque alvos adjacentes nessa área. A demonstração usa as variantes maiores para evitar esse conflito.
Sistema de design Digital Agency Um resultado de status útil
Torne o estado local inspecionável
Ao inserir 123456, é exibido um comprovante fictício com uma lista de definições para referência, data de envio e próxima ação. Após a consulta, o foco vai para o título, para que a pessoa que navega pelo teclado acesse diretamente o novo resultado. O estado sem correspondência também recebe o foco e inclui uma opção para tentar novamente.
A lista de três etapas é uma composição original da aplicação. Ela diferencia recebido, em análise e decisão por meio de texto, forma e cor. Uma implementação real deve obter esses valores do serviço e tratar registros não autorizados, indisponíveis e expirados. A prévia não faz solicitações externas e nunca dá a entender que encontrou o registro de uma pessoa real.
Sistema de design Digital Agency Integre o exemplo
Separe tokens, estilos e comportamento
O pacote de tokens disponibiliza dist/tokens.css. Os exemplos de HTML estão em um repositório de código-fonte com scripts do Storybook; clonar esse repositório fornece um ambiente para inspeção. Copie os estilos dos componentes necessários junto com a licença e registre a revisão de origem antes de adaptá-los para produção.
Nesta página, o pacote de tokens está fixado na versão 2.0.1, e os estilos de HTML vêm de um instantâneo de código-fonte datado. A demonstração independente carrega arquivos locais, então a renderização verificada não depende de um CDN ativo. O comando de configuração do Storybook é fornecido como caminho oficial para acessar o repositório; uma instalação limpa das dependências não foi executada para esta prévia.
Sistema de design Digital Agency Exemplos de componentes do sistema de design
Um campo de referência com rótulo
Classes nativas de campo de entrada do DADS com uma dica persistente e um erro associado.
html
<div class="dads-input-text">
<label for="reference">Reference number (required)</label>
<p id="reference-hint">Use the 6 digits on your example receipt.</p>
<input class="dads-input-text__input" data-size="lg"
id="reference" inputmode="numeric" autocomplete="off"
aria-describedby="reference-hint reference-error" aria-invalid="true">
<span class="dads-input-text__error-text" id="reference-error">
Enter 6 digits, for example 123456.
</span>
</div>
O documento completo inclui layout, controles e inicialização. Extraia o arquivo de exemplo indicado para obter os recursos do fornecedor no caminho relativo exato e, em seguida, disponibilize-o por HTTP.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>DADS procedure receipt example</title><link rel="stylesheet" href="vendor/dads-2026-10-03/tokens.css"><link rel="stylesheet" href="vendor/dads-2026-10-03/input-text.css"><link rel="stylesheet" href="vendor/dads-2026-10-03/button.css"><style>
*{box-sizing:border-box}body{margin:0;color:var(--color-neutral-solid-gray-900);font:400 17px/1.7 var(--font-family-sans);background:#fff}.lookup{max-width:52rem;padding:64px 24px;margin:auto}.eyebrow{font-size:14px;letter-spacing:.08em;border-bottom:1px solid #b3b3b3;padding-bottom:16px}h1{font-size:32px;line-height:1.5;margin:24px 0}h2{font-size:24px;line-height:1.5}p{margin:8px 0 24px}.field{margin:32px 0}label{font-weight:700;display:block}.dads-input-text__input{width:22rem}#reference-hint{margin:8px 0}.actions{display:flex;gap:24px;flex-wrap:wrap;align-items:center;margin:24px 0}.result{border-top:4px solid var(--color-key-900);background:#f5f5f5;padding:24px;margin-top:32px}.result:focus{outline:3px solid #111;outline-offset:4px}dl{display:grid;grid-template-columns:10rem 1fr;gap:16px}dt{font-weight:700}dd{margin:0;overflow-wrap:anywhere}ol{padding-left:24px}li{padding:8px}li.current{font-weight:700;color:var(--color-key-900)}small{display:block;font-size:14px;margin-top:32px;color:#555}[hidden]{display:none!important}@media(max-width:767px){.lookup{padding:24px}h1{font-size:28px}.actions{align-items:stretch;flex-direction:column}.actions button{width:100%}dl{grid-template-columns:1fr;gap:4px}dd{margin-bottom:16px}}
</style><main class="lookup"><div class="eyebrow">SERVICE PATTERN · DADS HTML</div><h1>Check a procedure receipt</h1><p>Use the reference from your receipt to view the next step. This is a fictional local example.</p><form id="lookup-form" novalidate><div class="dads-input-text field"><label for="reference">Reference number (required)</label><p id="reference-hint">Enter 6 digits. Try <strong>123456</strong> for the example record.</p><input id="reference" class="dads-input-text__input" data-size="lg" inputmode="numeric" autocomplete="off" aria-describedby="reference-hint reference-error"><span id="reference-error" class="dads-input-text__error-text" hidden>Enter 6 digits, for example 123456.</span></div><div class="actions"><button class="dads-button" data-type="solid-fill" data-size="lg" type="submit">Show example status</button><button class="dads-button" data-type="text" data-size="md" type="reset">Clear reference</button></div></form><section class="result" id="missing" tabindex="-1" hidden><h2>No matching example</h2><p>This reference has the correct format, but is not in the local example data. Try 123456.</p></section><section class="result" id="found" tabindex="-1" hidden><h2>Receipt 123456</h2><dl><dt>Procedure</dt><dd>Community room request</dd><dt>Submitted</dt><dd>1 October 2026 — fictional date</dd><dt>Next action</dt><dd>Wait for the example review. No documents are currently requested.</dd></dl><ol aria-label="Procedure progress"><li>Received</li><li class="current" aria-current="step">Checking the request — current step</li><li>Decision — not started</li></ol></section><small>Independent OpenDesign demonstration. Native DADS component CSS; system font fallback. No information is sent or stored.</small></main><script>
const f=document.querySelector('form'),i=document.querySelector('input'),e=document.querySelector('#reference-error'),found=document.querySelector('#found'),missing=document.querySelector('#missing');f.addEventListener('submit',ev=>{ev.preventDefault();found.hidden=missing.hidden=true;const valid=/^[0-9]{6}$/.test(i.value.trim());e.hidden=valid;i.setAttribute('aria-invalid',String(!valid));if(!valid){i.focus();return}const target=i.value.trim()==='123456'?found:missing;target.hidden=false;target.focus()});f.addEventListener('reset',()=>{found.hidden=missing.hidden=e.hidden=true;i.removeAttribute('aria-invalid');i.focus()});
</script></html>
Baixe o exemplo completo em Fontes. O README informa o comando exato para iniciá-lo localmente.
Mantenha os caminhos do fornecedor relativos a este documento; o arquivo inclui todos os recursos usados nesta prévia.
04
Sistema de design Digital Agency Configuração do agente
Ponto de partida para implementação
Fluxo de trabalho do repositório oficial de exemplos e caminho verificado para importar tokens. Esta prévia é executada com CSS copiados localmente; não requer React nem um back-end. O ZIP completo do exemplo funcional em Sources também inclui as dependências exatas da prévia e o documento completo. Extraia os arquivos, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/japan-dads.html. Não abra exemplos baseados em módulos por meio de file://.
bash
# Official HTML samples are a source repository, not a published component SDK.
git clone https://github.com/digital-go-jp/design-system-example-components-html.git
cd design-system-example-components-html
npm install
npm run storybook
# For the standalone composition, copy these component styles into your app:
# src/components/input-text/input-text.css
# src/components/button/button.css
# Install the independently versioned token package:
npm install @digital-go-jp/[email protected]
# In a CSS-aware bundler entry:
# import '@digital-go-jp/design-tokens/dist/tokens.css';
# import './input-text.css';
# import './button.css';
Um prompt para seu projeto
Prompt para agente de IA
Implemente uma consulta fictícia de comprovante de serviço público usando os estilos input-text e button do DADS HTML, além de design-tokens 2.0.1. Mantenha o rótulo visível, a dica de formato, aria-describedby e o estado inválido. Use o ritmo de texto Std-17N-170 e uma ação principal grande. Mostre estados separados para formato incorreto, ausência de correspondência e registro encontrado. Preserve o texto digitado, mova o foco para os títulos dos novos estados, evite dados pessoais reais e marcas de identidade governamentais. Trate a largura de conteúdo de 52rem e os espaçamentos de 8/24/64px como escolhas da aplicação.
05
Sistema de design Digital Agency Fontes e escopo
Composição educacional independente que utiliza exemplos e tokens oficiais de CSS. Sem endosso governamental, consulta ativa ou identidade de órgão copiada. A fonte usa como alternativa a fonte sem serifa do sistema disponível localmente. O layout da aplicação e os dados dos registros não são especificações oficiais do DADS.
