Erstellen Sie gut lesbare japanische Oberflächen für öffentliche Dienste mit den Textrollen, semantischen Tokens und der nativen HTML-Komponentenstruktur von DADS. Testen Sie eine funktionsfähige Suche nach Belegen mit Formatfehlern, einem Ergebnis ohne Treffer und einem überprüfbaren Statuseintrag.
Native DADS-Formatierungen für HTML-Eingabefeld und -Schaltfläche, Stand 3. Oktober 2026, mit design-tokens 2.0.1; ursprüngliches Layout und lokale Abfragelogik. · Implementierungsreferenz
02
Digital Agency Designsystem Designreferenz
Dokumentation zu DADS Beta v2.18.0; native HTML-Beispielformatierungen am 3. Oktober 2026 geprüft; design-tokens 2.0.1. Für Dokumentation, Beispiel-Repository und Token-Paket gelten jeweils eigene Versionsverläufe. Die unten gezeigten Layoutentscheidungen sind ausdrücklich von offiziellen Komponentenwerten abgegrenzt.
Digital Agency Designsystem Ressourcen und Geltungsbereich
Den Quellpfad für HTML auswählen
Der offizielle Ressourcenindex bietet HTML/CSS/JavaScript-Beispiele, React-/Tailwind-Beispiele, ein Tailwind-Plugin und Figma-Designdaten. Dieses Beispiel wählt den einfachen HTML-Pfad: Das Eingabefeld und die Schaltfläche CSS werden unverändert übernommen, während die umgebende Statusabfrage und die clientseitige Validierung Anwendungscode sind. Es gibt kein erfundenes universelles DADS-Komponentenpaket.
Die Vorschau ist eine unabhängige, fiktive Abfrage zu einem kommunalen Verfahren. Sie bildet weder einen Behördenkopf nach noch fragt sie eine öffentliche Datenbank ab oder gibt vor, den Status eines offiziellen Dienstes anzuzeigen. Belegformat und Statuseinträge sind Beispieldaten.
Lade design-tokens vor den beiden Komponentenformatierungen.
Behalte die dokumentierten Klassen und Datenattribute auf nativen HTML-Steuerelementen bei.
Ergänze anwendungsspezifische Validierung, Statusinhalte und Fokuswechsel im Anwendungscode.
Digital Agency Designsystem Typografie und Sprache
Den Namen des Textstils lesen
Std-17N-170 bezeichnet eine Schriftgröße von 17px, Regular und eine einheitenlose Zeilenhöhe von 1.7. Die Vorschau übernimmt diesen Leserhythmus für Fließtext und verwendet für die Überschrift 32px Bold mit einer Zeilenhöhe von 1.5. Noto Sans JP ist die dokumentierte serifenlose Schrift; falls die Webfont nicht geladen wird, stehen System-Fallbacks zur Verfügung. Dieses lokale Beispiel verwendet bewusst diese Fallbacks.
Japanischer und englischer Text nehmen unterschiedlich viel Platz in der Breite ein. Platziere Beschriftungen sichtbar über den Steuerelementen, ermögliche den Umbruch der Überschrift und bemesse die Schaltfläche nicht anhand einer angenommenen Zeichenanzahl. Eine Übersetzung kann mehr Platz in der Höhe benötigen, ohne dass sich die Rolle der Komponente ändert.
Digital Agency Designsystem Semantische Farben und Fokus
Die tatsächlich von CSS verwendeten Aliase einsetzen
Die Beispielschaltfläche bezieht ihre Standardfarbe über --color-key-900. Das ausgelieferte Token-Stylesheet löst diesen Alias in blue-900, #0017c1, auf. Für Hover- und Aktivzustände werden stattdessen key-1000 und key-1200 verwendet, nicht beliebige Opazitätswerte. Der Fehlerrand des Eingabefelds greift auf --color-semantic-error-1 zu.
Die schwarze Kontur und der gelbe Schatten bleiben sichtbar, wenn ein Steuerelement den Tastaturfokus erhält. Platziere das Steuerelement nicht in einem Container, der den Fokusindikator abschneidet: Eine Karte mit overflow-hidden kann den Ring abschneiden, selbst wenn CSS der Komponente korrekt ist. Fehlertext und aria-invalid ergänzen den roten Rahmen.
Digital Agency Designsystem Abstände und responsiver Aufbau
Einen einfachen Abstandsgrundrhythmus für die Anwendung wählen
Die DADS-Abstandsrichtlinien enthalten Beispiele, schreiben aber keine verbindliche Abfolge für jedes Interface vor. Dieser Aufbau verwendet 8px innerhalb zusammengehöriger Einheiten, 24px zwischen Formularabschnitten und großzügige 64px Seitenabstand auf dem Desktop. Die maximale Inhaltsbreite von 52rem ist eine Anwendungsentscheidung und kein DADS-Token.
Bei schmalen Ansichten werden die Ergebnisdefinitionen untereinander angeordnet und die Bedienelemente nutzen den verfügbaren Platz. Die Media Query bei 768px kommt nur in diesem Beispiel zum Einsatz. Sie wird nicht als allgemeiner DADS-Breakpoint dargestellt; ausschlaggebend für die Änderung sind der Zeilenumbruch des Inhalts und die Mindestgröße der Schaltfläche.
Digital Agency Designsystem Eingabestruktur und Fehlermeldungen
Beschriftung, Hinweis und Fehlermeldung getrennt halten
Der native Wrapper .dads-input-text legt die Textstandardwerte fest. Das untergeordnete Element .dads-input-text__input ist für Größe, Rahmen, Innenabstand, Eckenradius und Fokuszustände zuständig. Die zugehörige Beschriftung ist ausdrücklich über for/id verknüpft. Der Hinweis bleibt auch nach einem Fehler sichtbar, damit das erwartete Format nicht verloren geht.
Das Beispiel akzeptiert genau sechs ASCII-Ziffern. Bei einer fehlerhaften Eingabe wird aria-invalid=true gesetzt, die verknüpfte Fehlermeldung eingeblendet und der Fokus zum Eingabefeld zurückgesetzt. Ein syntaktisch gültiger Wert ungleich 123456 führt zu einer separaten Meldung, dass kein Treffer vorliegt; er wird nicht als Formatierungsfehler bezeichnet. Beide Verhaltensweisen sind lokale Regeln der Demo.
Den Eingabetyp als Text belassen: Eine Referenz ist eine Kennung, keine Mengenangabe.
inputmode=numeric als Tastaturhinweis verwenden, ohne die Drehfelder numerischer Eingaben einzublenden.
Den eingegebenen Wert beibehalten und zugleich erläutern, was als Nächstes zu korrigieren ist.
Digital Agency Designsystem Schaltflächenhierarchie und Zustände
Eine primäre Aktion für diese Abfrage
Die ausgefüllte große Schaltfläche löst die Abfrage aus, die Schaltfläche im Textstil setzt das Beispiel zurück. Die nativen Werte für data-type sind solid-fill, outline und text; data-size wählt lg, md, sm oder xs aus. Dies sind Beispielattribute von HTML, keine Props von React.
Die große Schaltfläche ist mindestens 136px breit und 56px hoch. Sie kann größer werden, wenn ihre Beschriftung mehr Platz benötigt. Bei den kleinen und extra kleinen Varianten wird im bereitgestellten CSS der Klickbereich vergrößert; andere Klickziele sollten diesen Bereich nicht überlagern. Die Demo verwendet die größeren Varianten, um diesen Konflikt zu vermeiden.
Digital Agency Designsystem Ein aussagekräftiges Statusergebnis
Den lokalen Zustand nachvollziehbar machen
Bei Eingabe von 123456 wird ein fiktiver Beleg mit einer Definitionsliste für Referenz, Eingangsdatum und nächsten Schritt angezeigt. Nach der Abfrage erhält die Überschrift den Fokus, damit Tastaturnutzende direkt zum neuen Ergebnis gelangen. Auch der Zustand ohne Treffer erhält den Fokus und bietet eine Möglichkeit zum erneuten Versuch.
Die dreistufige Liste ist eine eigens erstellte Anwendungsansicht. Sie unterscheidet zwischen „Eingegangen“, „In Prüfung“ und „Entscheidung“ und nutzt dafür sowohl Text als auch Form und Farbe. Eine echte Implementierung muss diese Werte von ihrem Dienst beziehen und nicht autorisierte, nicht verfügbare und abgelaufene Datensätze behandeln. Die Vorschau sendet keine externen Anfragen und erweckt nie den Eindruck, einen tatsächlichen Datensatz einer Bürgerin oder eines Bürgers gefunden zu haben.
Digital Agency Designsystem Das Beispiel integrieren
Tokens, Stile und Verhalten getrennt behandeln
Das Token-Paket stellt dist/tokens.css bereit. Bei den Beispielen von HTML handelt es sich um ein Quellrepository mit Storybook-Skripten; durch das Klonen dieses Repositorys erhältst du eine Umgebung zur Ansicht. Übernimm die benötigten Komponentenstile samt Lizenz und notiere den Quellstand, bevor du sie für den Produktiveinsatz anpasst.
Für diese Seite ist das Token-Paket auf 2.0.1 festgelegt; die Stile von HTML stammen aus einem datierten Quell-Snapshot. Die eigenständige Demo lädt lokale Dateien, daher hängt ihre überprüfte Darstellung nicht von einem aktiven CDN ab. Der Storybook-Einrichtungsbefehl wird als offizieller Einstieg in das Repository angegeben; für diese Vorschau wurde keine neue Installation der Abhängigkeiten ausgeführt.
Digital Agency Designsystem DADS-Designsystem-Komponentenbeispiele
Ein beschriftetes Referenzfeld
Native DADS-Eingabeklassen mit dauerhaft sichtbarem Hinweis und zugehöriger Fehlermeldung.
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>
Das vollständige Dokument enthält Layout, Steuerelemente und Initialisierung. Entpacken Sie das verknüpfte Beispielarchiv, um die exakten relativen Vendor-Assets zu erhalten, und stellen Sie es anschließend über HTTP bereit.
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>
Laden Sie das vollständige Beispiel unter Sources herunter. Die README enthält den genauen lokalen Startbefehl.
Behalten Sie die Vendor-Pfade relativ zu diesem Dokument bei. Das Archiv enthält alle Assets, die in dieser Vorschau verwendet werden.
04
Digital Agency Designsystem Einrichtung des KI-Agenten
Ausgangspunkt für die Implementierung
Offizieller Workflow für das Beispielrepository und verifizierter Importpfad für Tokens. Diese Vorschau verwendet lokal kopierte Dateien von CSS; sie benötigt weder React noch ein Backend. Die vollständige ZIP-Datei mit dem funktionierenden Beispiel unter „Quellen“ enthält außerdem die exakten Abhängigkeiten für die Vorschau und das vollständige Dokument. Entpacke sie, führe in diesem Verzeichnis python3 -m http.server 8080 aus und öffne anschließend http://localhost:8080/japan-dads.html. Öffne Beispiele mit Modulen nicht über 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';
Ein Prompt für dein Projekt
Agenten-Prompt
Implementiere eine fiktive Abfrage von Belegen für öffentliche Dienstleistungen mit den DADS-Stilen für HTML input-text und Schaltflächen sowie design-tokens 2.0.1. Behalte die sichtbare Beschriftung, den Formatierungshinweis, aria-describedby und den ungültigen Zustand bei. Verwende den Schreibrhythmus Std-17N-170 und eine große primäre Aktion. Zeige getrennte Zustände für fehlerhaftes Format, keinen Treffer und gefundenen Datensatz. Bewahre den eingegebenen Text, setze den Fokus auf neue Statusüberschriften, vermeide echte personenbezogene Daten und Hoheitszeichen. Behandle die Inhaltsbreite von 52rem und die Abstände von 8/24/64px als Anwendungsentscheidungen.
05
Digital Agency Designsystem Quellen und Geltungsbereich
Eigenständige, zu Bildungszwecken erstellte Zusammenstellung mit offiziellen Beispielen von CSS und Tokens. Keine Unterstützung durch eine Regierungsstelle, keine Live-Abfrage und keine übernommene Behördenidentität. Als Schriftart wird eine lokal verfügbare System-Sans-Serif-Schrift verwendet. Anwendungs-Layout und Datensätze sind keine offiziellen DADS-Spezifikationen.
