# Système de design Digital Agency ## Système de design Digital Agency Aperçu de l’interface Essayez une référence non valide, une référence sans résultat, puis 123456 pour afficher un dossier fictif de statut. ## 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. ### Typographie | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Sans family | Noto Sans JP, system fallbacks | L’aperçu utilise la pile de polices de remplacement documentée sans télécharger de police. | | Std-17N-170 | 17px / 1.7; weight 400 | Texte courant ; la nomenclature des jetons indique la taille, la graisse et la hauteur de ligne. | | Body / UI baseline | 16px or greater | La taille de 14px est réservée à certains contextes d’accompagnement. | | Weight roles | N = 400; B = 700 | Utilisez les graisses normale et grasse natives. | ### Anatomie native du champ | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | data-size sm / md / lg | 2.5rem / 3rem / 3.5rem | Hauteurs des contrôles basées sur la taille de police racine, et non sur trois tailles de texte différentes. | | Input border / radius | 1px / 0.5rem | La bordure utilise neutral-solid-gray-600 ; le rayon est celui du composant CSS. | | Input padding | 0.75rem 1rem | Marges intérieures de bloc et en ligne ; largeur maximale de 100%. | | Focus | 4px black outline, 2px offset, 2px yellow shadow | Style natif de focus-visible ; évitez que le focus soit rogné par les bords du conteneur. | ### Couleurs du package de jetons | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --color-key-900 | #0017c1 | L’alias de la clé par défaut pointe vers primitive-blue-900. | | --color-semantic-error-1 | #ec0000 | L’alias pointe vers primitive-red-800 ; associez-le à un message d’erreur. | | --color-neutral-solid-gray-900 | #1a1a1a | Texte du champ. | | --color-neutral-solid-gray-600 | #666666 | Bordure du champ par défaut. | | --color-primitive-yellow-300 | #ffd43d | Ombre de focus derrière le contour noir. | ### Boutons et espacement de l’application | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Large minimum | 136 × 56px | Laissez les libellés s’agrandir et passer à la ligne. | | Medium minimum | 96 × 48px | Convient à une action secondaire. | | Small / extra-small minimum | 80 × 36px / 72 × 28px | Prévoyez une zone cible de 44 CSS px même si le contrôle visible est plus court. | | Preview rhythm | 8 / 24 / 64px | Choix de l’application parmi les exemples du guide d’espacement ; il ne s’agit pas d’une échelle DADS obligatoire. | ## Guide complet système de design Digital Agency Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## 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. 1. Chargez design-tokens avant les deux feuilles de style des composants. 2. Conservez les classes et les attributs de données documentés sur les contrôles natifs HTML. 3. Ajoutez la validation propre au service, le contenu des statuts et la gestion du déplacement du focus dans le code de l’application. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. ``` .lookup { max-width:52rem; margin-inline:auto; padding:64px 24px; } @media(max-width:767px) { .lookup { padding:24px; } .actions { align-items:stretch; } } ``` Référence du code Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. ```

Use the 6 digits on your example receipt.

Enter 6 digits, for example 123456.
``` Référence du code - Supprimez aria-invalid et masquez l’erreur après une correction valide. - La validation de la référence relève de la logique applicative. ### Actions principales de recherche et de réinitialisation Utilisez les variantes natives des boutons et les types d’action HTML. ``` ``` Référence du code ### Exemple autonome complet 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. ``` DADS procedure receipt example
SERVICE PATTERN · DADS HTML

Check a procedure receipt

Use the reference from your receipt to view the next step. This is a fictional local example.

Enter 6 digits. Try 123456 for the example record.

Independent OpenDesign demonstration. Native DADS component CSS; system font fallback. No information is sent or stored.
``` Référence du code - 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. ## 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://. ``` # 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/design-tokens@2.0.1 # 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 ``` 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. ``` ## 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. - Système officiel Périmètre du système, recommandations et contexte de la version actuelle. - Fondements Typographie, couleurs, mise en page et autres fondements visuels. - Ressources d’implémentation Données officielles du système, exemples de code et documentation Markdown. - Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire. ## Système de design Digital Agency Ressources connexes ### KERN Créez une interface native KERN avec une typographie vérifiée, des thèmes sémantiques, des panneaux dépliables et un parcours de confirmation réversible. ### Michigan Forty Two Découvrez le flux de travail WordPress pris en charge par Forty-Two, sa palette Web et ses modèles d’annuaire, au moyen d’un exemple fonctionnel de filtre par rôle et domaine de recherche. ### Aksel Utilisez les véritables tokens ax de Aksel v8, la densité native des tableaux et la structure sémantique de leurs en-têtes. Triez et sélectionnez des dossiers de suivi fictifs tout en comparant les thèmes clair et sombre. - [Référence de mise en œuvre](https://github.com/digital-go-jp/design-system-example-components-html) - [Source](https://design.digital.go.jp/dads/foundations/typography/) - [Source](https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/input-text/input-text.css) - [Source](https://github.com/digital-go-jp/design-tokens) - [Source](https://design.digital.go.jp/dads/components/button/) - [Consultez la spécification associée](https://design.digital.go.jp/dads/resources/) - [Consultez la spécification associée](https://design.digital.go.jp/dads/foundations/typography/) - [Consultez la spécification associée](https://github.com/digital-go-jp/design-tokens) - [Référence du code](https://design.digital.go.jp/dads/foundations/spacing/) - [Consultez la spécification associée](https://design.digital.go.jp/dads/foundations/spacing/) - [Consultez la spécification associée](https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/input-text) - [Consultez la spécification associée](https://design.digital.go.jp/dads/components/button/) - [Consultez la spécification associée](https://design.digital.go.jp/dads/components/description-list/) - [Consultez la spécification associée](https://github.com/digital-go-jp/design-system-example-components-html) - [Référence du code](https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/input-text) - [Référence du code](https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/button) - [Référence du code](https://github.com/digital-go-jp/design-system-example-components-html) - [Système officiel Périmètre du système, recommandations et contexte de la version actuelle.](https://design.digital.go.jp/dads/) - [Fondements Typographie, couleurs, mise en page et autres fondements visuels.](https://design.digital.go.jp/dads/foundations/) - [Ressources d’implémentation Données officielles du système, exemples de code et documentation Markdown.](https://design.digital.go.jp/dads/resources/)