Crea interfacce leggibili per i servizi pubblici giapponesi con i ruoli testuali DADS, token semantici e anatomia nativa dei componenti HTML. Prova una ricerca di ricevute funzionante con errori di formato, un risultato senza corrispondenze e un record di stato consultabile.
Stili nativi per input e pulsanti DADS HTML, aggiornati al 3 ottobre 2026, con design token 2.0.1; layout originale e logica di consultazione locale. · Riferimento per l’implementazione
02
Riferimento di progettazione sistema di design Digital Agency
Documentazione DADS beta v2.18.0; stili di esempio nativi HTML esaminati il 3 ottobre 2026; design-tokens 2.0.1. La documentazione, il repository degli esempi e il pacchetto di token hanno cronologie delle versioni distinte. Le scelte di layout riportate di seguito sono chiaramente distinte dai valori ufficiali dei componenti.
L’indice ufficiale delle risorse offre esempi HTML/CSS/JavaScript, esempi React/Tailwind, un plugin Tailwind e dati di progettazione per Figma. Questo esempio sceglie il percorso semplice HTML: input e pulsante CSS sono copiati senza modifiche, mentre la consultazione dello stato circostante e la convalida lato client sono codice dell’applicazione. Non viene inventato un pacchetto universale di componenti DADS.
L’anteprima è una consultazione fittizia indipendente di pratiche comunali. Non riproduce l’intestazione di un ente governativo, non interroga una banca dati pubblica e non dichiara di rappresentare lo stato di un servizio ufficiale. Il formato della ricevuta e i record di stato sono dati di esempio.
Carica design-tokens prima dei due fogli di stile dei componenti.
Mantieni le classi e gli attributi data documentati sui controlli nativi HTML.
Aggiungi nell’applicazione la convalida specifica del servizio, i contenuti di stato e lo spostamento della messa a fuoco.
Sistema di design Digital Agency Tipografia e lingua
Leggi il nome dello stile di testo
Std-17N-170 descrive un carattere regolare da 17px con un'interlinea senza unità pari a 1.7. L'anteprima applica questo ritmo di lettura al testo e imposta per il titolo un carattere grassetto da 32px con interlinea di 1.5. Noto Sans JP è il sans serif indicato nella documentazione; se il webfont non è caricato, sono disponibili i font di sistema come fallback. Questo esempio locale usa intenzionalmente questi fallback.
Il testo giapponese e quello inglese non hanno la stessa larghezza. Mantieni le etichette visibili sopra i controlli, consenti al titolo di andare a capo ed evita di dimensionare un pulsante sulla base di un numero di caratteri presunto. Una traduzione può richiedere più spazio in verticale senza modificare il ruolo del componente.
Sistema di design Digital Agency Colori semantici e focus
Usa gli alias effettivamente utilizzati da CSS
Il pulsante di esempio dichiara il colore predefinito tramite --color-key-900. Il foglio di stile dei token distribuito risolve questo alias in blue-900, #0017c1. Le regole per gli stati hover e active selezionano invece key-1000 e key-1200, senza applicare opacità arbitrarie. Il bordo di errore dell'input usa --color-semantic-error-1.
Il contorno nero e l'ombra gialla restano visibili quando un controllo riceve il focus da tastiera. Posiziona il controllo lontano dai contenitori che ritagliano il contenuto: una card con overflow-hidden può tagliare l'anello anche se il componente CSS è corretto. Il testo dell'errore e aria-invalid integrano il bordo rosso.
Sistema di design Digital Agency Spaziatura e flusso responsive
Scegli un ritmo essenziale per l'applicazione
Le indicazioni DADS sulla spaziatura offrono esempi, senza imporre una sequenza obbligatoria per ogni interfaccia. Questa composizione usa 8px all'interno di unità correlate, 24px tra le sezioni del modulo e 64px come generoso margine interno della pagina su desktop. La larghezza massima del contenuto, pari a 52rem, è una scelta applicativa, non un token DADS.
A larghezze ridotte, le definizioni dei risultati si dispongono in verticale e i controlli occupano tutto lo spazio disponibile. Questo esempio usa una media query a 768px. Non è presentata come breakpoint DADS universale: sono l'adattamento del contenuto e la dimensione minima dei pulsanti a motivare la modifica.
Sistema di design Digital Agency Struttura degli input ed errori
Tieni separati etichetta, suggerimento ed errore
Il wrapper nativo .dads-input-text definisce le impostazioni predefinite del testo. L'elemento figlio .dads-input-text__input gestisce dimensioni, bordo, padding, raggio e stati di focus. L'etichetta associata è collegata esplicitamente tramite for/id. Il suggerimento resta visibile anche dopo un errore, così l'utente non perde di vista il formato atteso.
L'esempio accetta esattamente sei cifre ASCII. Un valore non valido imposta aria-invalid=true, mostra il messaggio di errore associato e riporta il focus sull'input. Un valore sintatticamente valido diverso da 123456 genera un messaggio distinto, che segnala la mancata corrispondenza e non un errore di formato. Entrambi i comportamenti sono regole di questa dimostrazione locale.
Mantieni il tipo di input testuale: un riferimento è un identificativo, non una quantità.
Usa inputmode=numeric come suggerimento per la tastiera, senza i pulsanti di incremento e decremento degli input numerici.
Mantieni il valore inserito e spiega come correggerlo.
Sistema di design Digital Agency Gerarchia e stati dei pulsanti
Una sola azione principale per questa ricerca
Il pulsante Large a tinta piena avvia la ricerca, mentre il pulsante in stile testo cancella l'esempio. I valori nativi di data-type sono solid-fill, outline e text; data-size seleziona lg, md, sm oppure xs. Si tratta di attributi di esempio HTML, non di proprietà di React.
Il pulsante grande ha una larghezza minima di 136px e un'altezza di 56px. Può allargarsi se l'etichetta richiede più spazio. Le varianti small ed extra-small usano un'area di attivazione più ampia nel CSS fornito; non inserire altri elementi attivabili nell'area. La demo usa le varianti più grandi per evitare questo conflitto.
Sistema di design Digital Agency Un risultato di stato utile
Rendi ispezionabile lo stato locale
Inserendo 123456 viene mostrata una ricevuta fittizia con un elenco di definizioni che riporta il riferimento, la data di invio e l'azione successiva. Dopo la ricerca, il titolo riceve il focus, così chi usa la tastiera raggiunge direttamente il nuovo risultato. Anche lo stato di mancata corrispondenza riceve il focus e include un'opzione per riprovare.
L'elenco in tre fasi è markup originale dell'applicazione. Distingue tra ricevuta, verifica e decisione usando anche il testo, oltre a forma e colore. Un'implementazione reale deve ottenere questi valori dal proprio servizio e gestire i casi di accesso non autorizzato, servizio non disponibile e record scaduto. L'anteprima non effettua richieste esterne e non lascia mai intendere di aver trovato i dati reali di un cittadino.
Sistema di design Digital Agency Integra l'esempio
Tieni separati token, stili e comportamento
Il pacchetto dei token espone dist/tokens.css. Gli esempi HTML fanno parte di un repository sorgente con script Storybook; clonando il repository ottieni un ambiente da ispezionare. Copia gli stili dei componenti necessari insieme alla relativa licenza e annota la revisione sorgente prima di adattarli per la produzione.
Per questa pagina, il pacchetto dei token è fissato alla versione 2.0.1 e gli stili HTML provengono da un'istantanea sorgente datata. La demo autonoma carica file locali, quindi la resa verificata non dipende da un CDN attivo. Il comando di configurazione di Storybook è fornito come percorso ufficiale per accedere al repository; per questa anteprima non è stata eseguita una nuova installazione delle dipendenze.
Sistema di design Digital Agency Esempi di componenti del sistema di progettazione
Un input di riferimento con etichetta
Classi native DADS per input, con suggerimento persistente ed errore associato.
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>
Il documento completo include layout, controlli e inizializzazione. Estrai l’archivio di esempio collegato per ottenere gli esatti asset vendor relativi, quindi avvialo tramite 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>
Scarica l’esempio completo dalla sezione Fonti. Il README indica il comando esatto per avviarlo in locale.
Mantieni i percorsi vendor relativi a questo documento; l’archivio include tutti gli asset usati da questa anteprima.
04
Sistema di design Digital Agency Configurazione dell'agente
Punto di partenza per l’implementazione
Flusso di lavoro del repository di esempi ufficiale e percorso verificato per l'importazione dei token. Questa anteprima esegue localmente file CSS copiati; non richiede React né un backend. Lo ZIP completo dell'esempio funzionante, disponibile in Sources, include anche le dipendenze esatte dell'anteprima e il documento integrale. Estrai l'archivio, esegui python3 -m http.server 8080 in quella directory, quindi apri http://localhost:8080/japan-dads.html. Non aprire gli esempi basati su moduli tramite 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';
Un prompt per il tuo progetto
Prompt per l’agente
Implementa una ricerca fittizia di ricevute per un servizio pubblico, usando gli stili DADS HTML input-text e button insieme a design-tokens 2.0.1. Mantieni visibili l'etichetta, il suggerimento sul formato, aria-describedby e lo stato non valido. Usa il ritmo tipografico Std-17N-170 per il testo e un'azione principale grande. Mostra stati distinti per formato non valido, mancata corrispondenza e record trovato. Conserva il testo inserito, porta il focus sui nuovi titoli di stato, evita dati personali reali e marchi di identità governativa. Considera la larghezza del contenuto di 52rem e le spaziature 8/24/64px come scelte applicative.
05
Sistema di design Digital Agency Fonti e ambito
Composizione didattica indipendente che usa esempi CSS e token ufficiali. Nessuna approvazione governativa, ricerca in tempo reale o identità di enti copiata. Il font sans serif usa come fallback i font di sistema disponibili localmente. Il layout dell'applicazione e i dati dei record non sono specifiche DADS ufficiali.
