# Digital Agency Designsystem ## Digital Agency Designsystem-Interfacevorschau Probiere eine ungültige Referenz und eine Referenz ohne Treffer aus. Gib dann 123456 ein, um einen fiktiven Statuseintrag aufzurufen. ## 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. ### Typografie | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Sans family | Noto Sans JP, system fallbacks | Die Vorschau verwendet den dokumentierten Fallback-Schriftstapel, ohne eine Schrift herunterzuladen. | | Std-17N-170 | 17px / 1.7; weight 400 | Standard-Fließtext; die Token-Bezeichnung gibt Größe, Stärke und Zeilenhöhe an. | | Body / UI baseline | 16px or greater | 14px ist für begrenzte unterstützende Kontexte vorgesehen. | | Weight roles | N = 400; B = 700 | Verwende die nativen Schriftschnitte Regular und Bold. | ### Native Anatomie des Eingabefelds | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | data-size sm / md / lg | 2.5rem / 3rem / 3.5rem | Steuerelementhöhen in der Schriftgröße der Wurzel und nicht in drei unterschiedlichen Textgrößen. | | Input border / radius | 1px / 0.5rem | Der Rahmen verwendet neutral-solid-gray-600; der Radius ist CSS der Komponente. | | Input padding | 0.75rem 1rem | Innenabstand auf Block- und Inline-Achse; maximale Breite 100%. | | Focus | 4px black outline, 2px offset, 2px yellow shadow | Natives Fokus-Design für :focus-visible; verhindere, dass der Fokusindikator an den Containerkanten abgeschnitten wird. | ### Farben des Token-Pakets | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --color-key-900 | #0017c1 | Der Standard-Key-Alias verweist auf primitive-blue-900. | | --color-semantic-error-1 | #ec0000 | Der Alias verweist auf primitive-red-800; zusammen mit einer Fehlermeldung verwenden. | | --color-neutral-solid-gray-900 | #1a1a1a | Eingabetext. | | --color-neutral-solid-gray-600 | #666666 | Standardrahmen des Eingabefelds. | | --color-primitive-yellow-300 | #ffd43d | Fokusschatten hinter der schwarzen Kontur. | ### Schaltflächen und Abstände in der Anwendung | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Large minimum | 136 × 56px | Ermögliche es Beschriftungen, sich auszudehnen und umzubrechen. | | Medium minimum | 96 × 48px | Geeignet für eine sekundäre Aktion. | | Small / extra-small minimum | 80 × 36px / 72 × 28px | Sorge für einen Zielbereich von 44 CSS px, auch wenn das sichtbare Steuerelement kürzer ist. | | Preview rhythm | 8 / 24 / 64px | Anwendungsbezogene Auswahl aus den Beispielen der Abstandsrichtlinien; keine verbindliche DADS-Skala. | ## Digital Agency Designsystem Vollständiger Leitfaden Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## 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. 1. Lade design-tokens vor den beiden Komponentenformatierungen. 2. Behalte die dokumentierten Klassen und Datenattribute auf nativen HTML-Steuerelementen bei. 3. Ergänze anwendungsspezifische Validierung, Statusinhalte und Fokuswechsel im Anwendungscode. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. ``` .lookup { max-width:52rem; margin-inline:auto; padding:64px 24px; } @media(max-width:767px) { .lookup { padding:24px; } .actions { align-items:stretch; } } ``` Code-Referenz Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## 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. Unterstützende Spezifikation lesen ## Digital Agency Designsystem DADS-Designsystem-Komponentenbeispiele ### Ein beschriftetes Referenzfeld Native DADS-Eingabeklassen mit dauerhaft sichtbarem Hinweis und zugehöriger Fehlermeldung. ```

Use the 6 digits on your example receipt.

Enter 6 digits, for example 123456.
``` Code-Referenz - Nach einer gültigen Korrektur aria-invalid entfernen und die Fehlermeldung ausblenden. - Die Validierung der Referenz ist Anwendungslogik. ### Primäre Abfrage- und Zurücksetzen-Aktionen Native Schaltflächenvarianten und Aktionstypen von HTML verwenden. ``` ``` Code-Referenz ### Vollständiges eigenständiges Beispiel 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. ``` 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.
``` Code-Referenz - 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. ## 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://. ``` # 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'; ``` ### Ein Prompt für dein Projekt ``` 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. ``` ## 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. - Offizielles System Geltungsbereich, Richtlinien und Kontext zur aktuellen Version des Systems. - Grundlagen Typografie, Farbe, Layout und weitere visuelle Grundlagen. - Ressourcen zur Implementierung Offizielle Designdaten, Codebeispiele und Markdown-Dokumentation. - Vollständiges funktionsfähiges Beispiel herunterladen ZIP-Datei mit dem vollständigen HTML, lokalen Abhängigkeiten für CSS/JavaScript, mitgelieferten Lizenzen und genauen Startanweisungen. Ein Build-Schritt ist nicht erforderlich. ## Digital Agency Designsystem Verwandte Ressourcen ### KERN Erstellen Sie eine native KERN-Oberfläche mit geprüfter Typografie, semantischen Designs, aufklappbaren Inhalten und einem umkehrbaren Bestätigungsablauf. ### Michigan Forty Two Lernen Sie Forty-Twos unterstützten WordPress-Workflow, die Web-Palette und Muster für Personenverzeichnisse anhand eines funktionierenden Beispiels mit Filtern für Rollen und Forschung kennen. ### Aksel Verwende die echten ax-Tokens aus Aksel v8, die native Tabellendichte und die semantische Kopfzeilenstruktur. Sortiere und wähle fiktive Folgedatensätze aus und vergleiche dabei helle und dunkle Designs. - [Implementierungsreferenz](https://github.com/digital-go-jp/design-system-example-components-html) - [Quelle](https://design.digital.go.jp/dads/foundations/typography/) - [Quelle](https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/input-text/input-text.css) - [Quelle](https://github.com/digital-go-jp/design-tokens) - [Quelle](https://design.digital.go.jp/dads/components/button/) - [Unterstützende Spezifikation lesen](https://design.digital.go.jp/dads/resources/) - [Unterstützende Spezifikation lesen](https://design.digital.go.jp/dads/foundations/typography/) - [Unterstützende Spezifikation lesen](https://github.com/digital-go-jp/design-tokens) - [Code-Referenz](https://design.digital.go.jp/dads/foundations/spacing/) - [Unterstützende Spezifikation lesen](https://design.digital.go.jp/dads/foundations/spacing/) - [Unterstützende Spezifikation lesen](https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/input-text) - [Unterstützende Spezifikation lesen](https://design.digital.go.jp/dads/components/button/) - [Unterstützende Spezifikation lesen](https://design.digital.go.jp/dads/components/description-list/) - [Unterstützende Spezifikation lesen](https://github.com/digital-go-jp/design-system-example-components-html) - [Code-Referenz](https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/input-text) - [Code-Referenz](https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/button) - [Code-Referenz](https://github.com/digital-go-jp/design-system-example-components-html) - [Offizielles System Geltungsbereich, Richtlinien und Kontext zur aktuellen Version des Systems.](https://design.digital.go.jp/dads/) - [Grundlagen Typografie, Farbe, Layout und weitere visuelle Grundlagen.](https://design.digital.go.jp/dads/foundations/) - [Ressourcen zur Implementierung Offizielle Designdaten, Codebeispiele und Markdown-Dokumentation.](https://design.digital.go.jp/dads/resources/)