Créez des interfaces japonaises de services publics faciles à lire grâce aux rôles typographiques DADS, aux tokens sémantiques et à l’anatomie native des composants HTML. Essayez une recherche de reçu fonctionnelle avec des erreurs de format, un résultat sans correspondance et un relevé de statut consultable.
Styles natifs de champ/bouton DADS HTML, datés du 3 octobre 2026, avec des jetons de design 2.0.1 ; mise en page originale et logique de recherche locale. · Référence de mise en œuvre
02
Système de design Digital Agency Référence de conception
Documentation DADS bêta v2.18.0 ; styles d’exemple natifs HTML examinés le 3 octobre 2026 ; design-tokens 2.0.1. La documentation, le dépôt d’exemples et le package de jetons ont des historiques de versions distincts. Les choix de mise en page ci-dessous sont clairement distingués des valeurs officielles des composants.
Ressources et périmètre système de design Digital Agency
Choisir le chemin source HTML
L’index officiel des ressources propose des exemples HTML/CSS/JavaScript, des exemples React/Tailwind, un plugin Tailwind et des données de conception Figma. Cet exemple choisit le chemin HTML sans ajout : les composants CSS du champ et du bouton sont copiés sans modification, tandis que la consultation du statut et la validation côté client relèvent du code de l’application. Aucun package universel de composants DADS n’est inventé.
L’aperçu est une consultation fictive et autonome d’une démarche municipale. Il ne reproduit pas l’en-tête d’un site gouvernemental, ne consulte pas de base de données publique et ne prétend pas indiquer le statut d’un service officiel. Le format du reçu et les enregistrements de statut sont des données d’exemple.
Chargez design-tokens avant les deux feuilles de style des composants.
Conservez les classes et les attributs de données documentés sur les contrôles natifs HTML.
Ajoutez la validation propre au service, le contenu des statuts et la gestion du déplacement du focus dans le code de l’application.
Typographie et langue système de design Digital Agency
Lire le nom du style de texte
Std-17N-170 désigne un texte normal de 17px avec une hauteur de ligne sans unité de 1.7. L’aperçu applique ce rythme de lecture au corps du texte et choisit une graisse grasse de 32px avec une hauteur de ligne de 1.5 pour son titre. Noto Sans JP est la police sans empattement recommandée ; des polices système de remplacement sont disponibles si la police web n’est pas chargée. Cet exemple local utilise volontairement ces polices de remplacement.
Les textes japonais et anglais n’occupent pas la même largeur. Gardez les libellés visibles au-dessus des contrôles, laissez le titre passer à la ligne et ne dimensionnez pas un bouton en fonction d’un nombre de caractères supposé. Une traduction peut nécessiter davantage d’espace vertical sans modifier le rôle du composant.
Couleurs sémantiques et focus système de design Digital Agency
Utiliser les alias réellement employés par CSS
Le bouton d’exemple définit sa couleur par défaut à partir de --color-key-900. La feuille de style des jetons distribuée associe cet alias à blue-900, #0017c1. Les règles de survol et d’activation sélectionnent plutôt key-1000 et key-1200, sans appliquer de transparence arbitraire. La bordure d’erreur du champ utilise --color-semantic-error-1.
Le contour noir et l’ombre jaune restent visibles lorsqu’un contrôle reçoit le focus au clavier. Éloignez le contrôle des conteneurs qui peuvent le rogner : une carte avec overflow-hidden peut couper l’anneau même si le composant CSS est correct. Le texte d’erreur et aria-invalid complètent la bordure rouge.
Espacement et disposition adaptative système de design Digital Agency
Choisir un rythme d’espacement adapté à l’application
Le guide d’espacement DADS fournit des exemples, sans imposer une séquence unique à toutes les interfaces. Cette composition utilise 8px à l’intérieur des éléments associés, 24px entre les sections du formulaire et une généreuse marge intérieure de page de 64px sur ordinateur. La largeur maximale du contenu, de 52rem, relève d’un choix de l’application et non d’un jeton DADS.
Sur les écrans étroits, les définitions de résultat s’empilent et les contrôles occupent toute la largeur disponible. Seul cet exemple utilise une requête média à 768px. Il ne s’agit pas d’un point de rupture DADS universel ; le passage du contenu à la ligne et la taille minimale du bouton motivent cette adaptation.
Structure du champ et erreurs système de design Digital Agency
Distinguer le libellé, l’indication et l’erreur
L’enveloppe native .dads-input-text définit les valeurs par défaut du texte. L’élément enfant .dads-input-text__input gère la taille, la bordure, les marges intérieures, le rayon et les états de focus. Le libellé associé est relié explicitement à l’aide de for/id. L’indication reste affichée après une erreur afin que l’utilisateur conserve le format attendu.
L’exemple accepte exactement six chiffres ASCII. Une saisie mal formée définit aria-invalid=true, affiche le message d’erreur associé et redonne le focus au champ. Une valeur syntaxiquement valide autre que 123456 affiche un message distinct indiquant qu’aucun résultat ne correspond ; il ne s’agit pas d’une erreur de format. Ces deux comportements sont propres à la démonstration locale.
Conservez un type de champ textuel : une référence est un identifiant, pas une quantité.
Utilisez inputmode=numeric pour suggérer un clavier numérique sans afficher les boutons d’incrémentation d’un champ numérique.
Conservez la valeur saisie tout en indiquant la correction à apporter.
Hiérarchie et états des boutons système de design Digital Agency
Une seule action principale pour cette consultation
Le grand bouton plein lance la consultation et le bouton de style texte efface l’exemple. Les valeurs natives de data-type sont solid-fill, outline et text ; data-size sélectionne lg, md, sm ou xs. Il s’agit d’attributs HTML d’exemple, et non de propriétés React.
Le grand bouton a une largeur minimale de 136px et une hauteur de 56px. Il peut s’agrandir si son libellé nécessite plus d’espace. Les variantes small et extra-small utilisent une zone cible agrandie dans le CSS fourni ; ne placez pas de cibles voisines dans cette zone. La démonstration utilise les variantes plus grandes pour éviter ce problème.
Un résultat de statut utile système de design Digital Agency
Rendre l’état local consultable
La saisie de 123456 affiche un reçu fictif avec une liste de définitions indiquant la référence, la date d’envoi et la prochaine étape. Après la recherche, le titre reçoit le focus afin que les personnes utilisant le clavier accèdent directement au nouveau résultat. L’état sans résultat reçoit lui aussi le focus et propose une nouvelle tentative.
La liste en trois étapes est créée dans le balisage de l’application. Elle distingue les états « reçu », « en cours de vérification » et « décision » au moyen du texte, de la forme et de la couleur. Une implémentation réelle doit obtenir ces valeurs auprès de son service et gérer les dossiers non autorisés, indisponibles ou expirés. L’aperçu n’effectue aucune requête externe et ne laisse jamais entendre qu’il a trouvé un dossier réel de citoyen.
Système de design Digital Agency Intégrer l’exemple
Distinguer les jetons, les styles et le comportement
Le package de jetons expose dist/tokens.css. Les exemples HTML se trouvent dans un dépôt source accompagné de scripts Storybook ; le clonage de ce dépôt fournit un environnement d’inspection. Copiez les styles des composants nécessaires, avec leur licence, et consignez la révision source avant de les adapter à la production.
Pour cette page, la version du package de jetons est fixée à 2.0.1 et les styles HTML proviennent d’un instantané daté des sources. La démo autonome charge des fichiers locaux ; son rendu vérifié ne dépend donc pas d’un CDN actif. La commande de configuration de Storybook est fournie comme point d’entrée officiel du dépôt ; aucune nouvelle installation des dépendances n’a été effectuée pour cet aperçu.
Système de design Digital Agency Exemples de composants du système de design
Un champ de référence avec libellé
Classes natives de champ DADS, avec une aide persistante et une erreur associée.
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>
Le document complet comprend sa mise en page, ses contrôles et son initialisation. Extrayez l’archive d’exemple liée pour obtenir les ressources de fournisseur avec leurs chemins relatifs exacts, puis servez le contenu via 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>
Téléchargez l’exemple complet depuis les sources. Son fichier README indique la commande exacte pour le lancer localement.
Conservez des chemins relatifs pour les ressources de fournisseur par rapport à ce document ; l’archive contient toutes les ressources utilisées par cet aperçu.
04
Système de design Digital Agency Configuration de l’agent
Point de départ de l’implémentation
Procédure officielle du dépôt d’exemples et chemin d’importation des jetons vérifié. Cet aperçu s’exécute à partir de CSS copiés localement ; il ne nécessite ni React ni backend. L’archive ZIP contenant l’exemple fonctionnel complet, disponible dans Sources, inclut également les dépendances exactes de l’aperçu et le document complet. Extrayez-la, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/japan-dads.html. N’ouvrez pas les exemples utilisant des modules via 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 pour votre projet
Prompt pour l’agent IA
Créez une recherche fictive de reçus de service public à l’aide des styles de champ input-text et de bouton DADS HTML, ainsi que de design-tokens 2.0.1. Conservez le libellé visible, l’indication de format, aria-describedby et l’état invalide. Adoptez le rythme typographique Std-17N-170 et une action principale de grande taille. Affichez séparément les états « format incorrect », « aucun résultat » et « résultat trouvé ». Conservez le texte saisi, placez le focus sur les titres de statut nouvellement affichés, évitez les données personnelles réelles et les emblèmes gouvernementaux. Considérez la largeur de contenu de 52rem et les espacements de 8/24/64px comme des choix propres à l’application.
05
Système de design Digital Agency Sources et périmètre
Composition pédagogique indépendante utilisant les exemples officiels CSS et les jetons. Aucune approbation gouvernementale, recherche en direct ni identité d’organisme copiée. La police utilise par défaut une police sans empattement disponible localement. La mise en page de l’application et les données des dossiers ne font pas partie des spécifications officielles de DADS.
