# VA Designsystem ## VA Designsystem-Oberflächenvorschau Sehen Sie sich drei beispielhafte Prozesszustände an und öffnen Sie eine ergänzende Erläuterung, ohne die Schrittübersicht auszublenden. ## VA Designsystem-Designreferenz Veröffentlichte Variablen aus css-library 0.36.1 und Web Components 24.14.0 als Abhängigkeit von component-library 56.14.0. Die Schriften sind ausdrücklich lokale Ersatzschriften. Der 52rem breite Beispielcontainer ist eine Entscheidung auf Anwendungsebene. ### Semantische Typografie | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --vads-font-family-heading | Bitter, Georgia, Cambria, Times New Roman, Times, serif | Überschriftenfamilie; in der Vorschau wird Georgia verwendet. | | --vads-font-family-sans | Source Sans Pro Web / Source Sans Pro, system sans fallbacks | Schriftfamilie für Fließtext und Benutzeroberfläche; in der Vorschau wird Arial verwendet. | | --vads-font-size-body-default | 1.06rem (about 17px) | Semantische Rolle gegenüber source-sans-normalized bevorzugen. | | --vads-font-size-heading-level-1 / 2 / 3 | 2.5 / 2 / 1.25rem | 40 / 32 / 20px bei 16px Root-Größe. | | --vads-font-size-heading-level-4 / 5 / 6 | 1.063 / .938 / .938rem | Etwa 17 / 15 / 15px. | | --vads-font-line-height-default / heading / body-lead | 1.5 / 1.2 / 1.75 | Die passende Textrolle verwenden. | ### Abstand | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --vads-spacing-inset-s / m / l | 1 / 1.5 / 2rem | 16 / 24 / 32px. | | --vads-spacing-vertical-stack-default | 1rem / 16px | Allgemeiner vertikaler Abstand. | | --vads-forms-spacing-vertical-stack-default | 2rem / 32px | Abstand zwischen Formularfeldern. | | --vads-spacing-0p5 / 1 / 1p5 / 2 / 2p5 / 3 | 4 / 8 / 12 / 16 / 20 / 24px | Primitive Skala bei standardmäßiger Root-Größe. | | --vads-spacing-4 / 5 / 6 / 7 / 8 | 32 / 40 / 48 / 56 / 64px | Größere primitive Werte. | ### Semantische Farbe | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --vads-color-text | #1b1b1b | Bevorzugte Standardrolle für Text. | | --vads-color-link / link-active | #005ea2 / #0b4778 | Standard- und aktive Linkrollen. | | --vads-color-primary-darker | #162e51 | Referenz für eine primäre Oberfläche mit hoher Hervorhebung. | | --vads-color-base-lighter / base-lightest | #dfe1e2 / #f0f0f0 | Neutrale Trennlinien und Hintergründe. | | --vads-color-error | #d54309 | Die Fehlersemantik anstelle des veralteten sekundären Rots verwenden. | | --vads-color-success-darker | #216e1f | Dunklere Referenz für Erfolg; der Status muss dennoch in Worten ausgedrückt werden. | ### Responsive Breakpoints | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --vads-breakpoint-mobile / mobile-lg | 320 / 480px | Referenzgrenzen für kleine Bildschirme. | | --vads-breakpoint-tablet / tablet-lg | 640 / 880px | Layouts für mittlere Bildschirmgrößen. | | --vads-breakpoint-desktop / desktop-lg | 1024 / 1201px | Desktop-Grenzwerte. | | --vads-breakpoint-widescreen | 1400px | Referenz für breite Layouts. | ## VA 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. ## VA Designsystem Ein Servicesystem für Veteranen ### Grundlagen und Komponenten sind separate Pakete > Das VA-System umfasst Servicemuster, Inhaltsrichtlinien, Tokens, CSS-Hilfsfunktionen und Web Components. Für die dokumentierte Installation wird ein CSS-library-Paket für die globalen Grundlagen und ein component-library-Paket für interaktive Elemente verwendet. Diese Referenz kombiniert component-library 56.14.0 mit css-library 0.36.1; die Pakete haben voneinander unabhängige Versionsnummern. Das Beispiel erläutert fiktiv eine Anfrage zu Unterlagen. Es zeigt, wie eine Prozessliste den Fortschritt vermittelt, ohne zu behaupten, dass eine Anfrage eingereicht wurde oder jemand Anspruch auf eine Leistung hat. Es sind weder ein VA-Logo noch ein Banner mit Regierungskennzeichnung, persönliche Unterlagen oder ein tatsächlicher Fallstatus zu sehen. Texte für einen Produktiveinsatz müssen weiterhin mit dem zuständigen VA-Programm abgestimmt werden. Unterstützende Spezifikation lesen ## VA Designsystem Semantische Typografierollen ### Schriftfamilien für Fließtext und Überschriften unterscheiden sich bewusst Die semantische Schriftfamilie für Überschriften ist Bitter, mit Georgia und weiteren Serifen-Ersatzschriften. Der Schriftstapel für Fließtext beginnt mit Source Sans Pro Web und Source Sans Pro, gefolgt von plattformabhängigen serifenlosen Ersatzschriften. Die Standardrolle für Fließtext beträgt 1.06rem, also ungefähr 17px bei einer Root-Größe von 16px. Überschriften verwenden 40px für Ebene 1, 32px für Ebene 2, 20px für Ebene 3 und etwa 17px für Ebene 4. Verwenden Sie --vads-font-size-body-default anstelle des älteren Namens source-sans-normalized. Das semantische Token bezeichnet die Rolle, während der ältere Normalisierungsname ein Implementierungsdetail der Schrift offenlegt. In der Vorschau werden ausdrücklich Arial für Fließtext und Georgia für Überschriften verwendet. Die native Prozesskomponente CSS bestimmt weiterhin ihre interne Struktur und Größen. Die Ersatzschrift gibt nicht vor, die genauen Metriken von Source Sans und Bitter wiederzugeben. Unterstützende Spezifikation lesen ### Die Zeilenhöhe richtet sich nach der Rolle Der Standardwert für die Zeilenhöhe von Absätzen beträgt 1.5, für Überschriften 1.2. Fließtext mit hervorgehobener Rolle hat eine Zeilenhöhe von 1.75. Das Serifen-Zeilenhöhen-Token beträgt 1.9 und ist für fortlaufenden Text mit Serifen gedacht, nicht für jede Überschrift mit Serifen. Der Wert 1.9 für eine kompakte Prozessüberschrift zu verwenden, würde zwei unterschiedliche Rollen verwechseln. Die Prozesselemente in diesem Beispiel verwenden Ebene 3 unterhalb des Abschnittstitels der Seite auf Ebene 2. Unterstützende Spezifikation lesen ## VA Designsystem Semantische Abstände und Layout ### Einen gewöhnlichen Abstandsstapel von einem Formular unterscheiden Der allgemeine Standardabstand für vertikale Stapel beträgt 1rem/16px. Bei Formularen beträgt der Standardabstand für vertikale Stapel 2rem/32px. Dieser Unterschied ist sinnvoll: Zwei kurze Erläuterungen benötigen einen anderen Rhythmus als einzelne Fragen mit Beschriftungen, Hinweisen, Steuerelementen und Fehlermeldungen. Die Innenabstände s, m und l entsprechen 16, 24 bzw. 32px. Die primitive Abstandsreihe umfasst 4, 8, 12, 16, 20 und 24px sowie größere Schritte von jeweils acht Pixeln und spezielle Werte von einem und zwei Pixeln. Bevorzuge semantische Abstandsnamen, wenn ihre Bedeutung zum Layout passt. Die äußere Hülle von 52rem im Beispiel ist eine Anwendungsentscheidung; der Innenabstand von 24px und der Abschnittsabstand von 32px verwenden dagegen veröffentlichte Skalenwerte. Die Hülle ist nicht für jede VA-Seitenvorlage vorgeschrieben. Unterstützende Spezifikation lesen ## VA Designsystem Farben und responsive Tokens ### Eine Rolle statt eines historischen Alias verwenden Das aktuelle Text-Token ist --vads-color-text (#1b1b1b). --vads-color-link hat den Wert #005ea2, die Rolle für aktive Links den Wert #0b4778; diese Werte entsprechen nicht allen dunkleren Einträgen der Primärfarbpalette. Die Fehlermeldungsrolle hat den Wert #d54309. Die geerbte sekundäre Rotpalette ist für diesen Zweck veraltet. Eine neue Validierungsdarstellung sollte daher auf die Fehlersemantik statt auf die Sekundärfarbe verweisen. Die Tabellen mit primitiven und semantischen Tokens werden anhand eines benannten Releases von CSS-library generiert. Das Beispiel lädt die tatsächlichen Variablen, statt eine alte USWDS-Palette zu kopieren und als VA-Palette auszugeben. Die nativen Komponenten können zusätzlich zu diesen Variablen eigene, einkompilierte Werte enthalten. Prüfe bei einer Aktualisierung beide Ebenen. Unterstützende Spezifikation lesen ### VA-Breakpoints sind keine allgemeine Framework-Skala Der Token-Satz definiert die Breakpoints Mobile mit 320px, Mobile groß mit 480px, Tablet mit 640px, Tablet groß mit 880px, Desktop mit 1024px, Desktop groß mit 1201px und Widescreen mit 1400px. Der ungewöhnliche Schwellenwert von 1201px ist wichtig, wenn bestehende Vorlagen nachgebildet werden sollen. Breakpoint-Variablen dokumentieren Werte; CSS-Custom-Properties lassen sich nicht einfach in einer nativen Media-Query-Bedingung einsetzen. Verwende den entsprechenden Wert zur Build-Zeit oder einen Literalwert, der vom überprüften Token abgeleitet wurde. Unterstützende Spezifikation lesen ## VA Designsystem Aufbau der Process List ### Drei bis zehn aussagekräftige Schritte Die VA Process List wird auch als U-Bahn-Karte beschrieben. Sie erläutert einen längeren Ablauf oder zeigt an, an welcher Stelle sich eine Person darin befindet. Die Richtlinien empfehlen drei bis zehn Schritte und höchstens eine solche Liste pro Seite. Jeder Eintrag benötigt eine prägnante, mit einem Verb beginnende Überschrift und sichtbare Erläuterungen. Eine dekorative Zahl neben einer ansonsten leeren Überschrift reicht nicht aus. Die nativen Tags sind va-process-list und va-process-list-item. Ein Element verwendet header und level sowie active, pending, checkmark und status-text. Im veröffentlichten Komponentenmodul hat checkmark Vorrang, gefolgt von active und dann pending. Vermeide widersprüchliche Kombinationen, indem du beim Setzen eines booleschen Status die anderen zurücksetzt. Expliziter Statustext ergänzt die Statusdarstellung und macht die Phase verständlich, ohne dass die Farbe interpretiert werden muss. ```

Identify the record you need and the office that holds it.

A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.

In this example, a request is ready for the appropriate service. No request is sent from this page.

A real service should explain where a response appears and how to ask about missing information.

 ``` Code-Referenz Unterstützende Spezifikation lesen ## VA Designsystem Details ergänzen einen sichtbaren Schritt ### Nicht jeden Schritt in ein Akkordeon verwandeln Die Process-List-Richtlinien raten davon ab, eine Akkordeonüberschrift mit einem Prozessschritt zu kombinieren. Alle Erläuterungen auszublenden, vereitelt den Zweck, den Ablauf sichtbar zu machen. Innerhalb eines Schritts ist jedoch eine Details-Komponente für ergänzende Informationen zulässig. Im Beispiel bleibt die Erläuterung zur Identifizierung eines Eintrags sichtbar; eine optionale Ergänzung befindet sich in va-details. Das Attribut label der Komponente wird zur sichtbaren Frage des Offenlegungsbereichs. Eine kurze Frage ist hilfreicher als „Weitere Informationen“, weil sie den Lesenden zeigt, ob der verborgene Inhalt relevant ist. In diesem Beispiel wird erläutert, was bei der Identifizierung eines Eintrags hilfreich sein kann. Ein ausdrücklicher Hinweis stellt klar, dass es sich um beispielhafte Inhalte und nicht um Anweisungen für ein bestimmtes VA-Verfahren handelt. - Eine Zusammenfassung jeder Phase sichtbar halten, auch bei Phasen mit dem Status „Ausstehend“. - Eine Details-Offenlegung nur für ergänzende Erläuterungen innerhalb einer Phase verwenden. - Die nächste tatsächliche Serviceaktion außerhalb der Prozessüberschrift platzieren, statt die Überschrift in ein Steuerelement zu verwandeln. Unterstützende Spezifikation lesen ## VA Designsystem Statusdemonstration und Wahrheitsgehalt ### Einen Szenario-Auswahlschalter statt eines vorgetäuschten Fortschritts verwenden Die Szenarioauswahl „Beispielphase“ in der Vorschau wechselt zwischen den Zuständen Vorbereitung, Übermittlung und Prüfung der Antwort. Sie führt keine echte Anfrage weiter, schätzt keine offizielle Bearbeitungsdauer und leitet den Abschluss nicht daraus ab, dass eine Person auf eine Schaltfläche klickt. Ein aktiver Service sollte einen verifizierten Backend-Status auf diese visuellen Zustände abbilden und Verzögerungen separat erläutern. Beim Ändern der Auswahl werden vorherige Phasen auf „Abgeschlossen“, die ausgewählte Phase auf „Aktiv“ und spätere Phasen auf „Ausstehend“ gesetzt. Ein Live-Statustext gibt die Änderung des Beispielstatus bekannt. Alle drei Erläuterungen bleiben sichtbar, und der optionale Zustand „Details“ bleibt erhalten. Durch Zurücksetzen wird die erste Beispielphase wiederhergestellt und die ergänzende Offenlegung geschlossen. Unterstützende Spezifikation lesen ## VA Designsystem Native Web Components laden ### Einmal registrieren und Abhängigkeiten beibehalten Der dokumentierte Bundler-Weg importiert main.css und ruft defineCustomElements aus dem Paket component-library auf. Die Schriftarten stammen aus CSS-library und werden separat bereitgestellt. Komponenten, die das Icon-Sprite verwenden, benötigen einen Sprite-Pfad gleichen Ursprungs; standardmäßig ist dies /img/sprite.svg. Dabei handelt es sich um tatsächliche Integrationsanforderungen und nicht um optionalen Feinschliff, den man erst nach der Bereitstellung entdeckt. Das eigenständige Beispiel verwendet den offiziellen ESM-Browser-Einstieg aus web-components 24.14.0, die von component-library 56.14.0 deklarierte Abhängigkeit sowie die spezifischen Lazy-Module für Process List, Process List Item und Details. Das Anwendungsskript wählt lediglich Beispielzustände aus. Die Browserlaufzeit stellt das Verhalten der nativen Custom Elements bereit, einschließlich des Details-Steuerelements. 1. Das passende Token-CSS und den Browser-Komponenteneinstieg laden; dabei die relativen Modulpfade beibehalten. 2. Vor dem Zuweisen von Beispielzuständen warten, bis va-process-list-item definiert ist. 3. Alle Szenariozustände, die Tastaturbedienung von Details und schmale Ansichtsbreiten testen, ohne Erläuterungen auszublenden. Unterstützende Spezifikation lesen ## VA Designsystem Beispiele für VA-Designsystem-Komponenten ### Eine native Erläuterung in drei Phasen Echte Web-Component-Attribute und eine zulässige Details-Offenlegung innerhalb eines Schritts. ```

Identify the record you need and the office that holds it.

A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.

In this example, a request is ready for the appropriate service. No request is sent from this page.

A real service should explain where a response appears and how to ask about missing information.

 ``` Code-Referenz - 3–10 Schritte und eine Process List pro Seite verwenden. - Schrittüberschriften nicht durch Akkordeon-Auslöser ersetzen. - Für jedes Element darf nur ein Statuskennzeichen gesetzt sein. ### 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. ``` Request journey — VA component specimen

VA native component example

Understand a request journey

See how a service can explain preparation, sending a request, and reviewing its response.

Fictional process for design exploration. These are not VA submission instructions or a real case status.

Example: preparing a request.

The three stages

Identify the record you need and the office that holds it.

A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.

In this example, a request is ready for the appropriate service. No request is sent from this page.

A real service should explain where a response appears and how to ask about missing information.
``` 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. ## VA Designsystem Agent einrichten ### Ausgangspunkt für die Implementierung Dokumentierte Initialisierung des Bundlers mit verifizierten Paketversionen. Das eigenständige Browserbeispiel verwendet anstelle eines React-Builds die entsprechende native ESM-Distribution der Web Components. Das vollständige ZIP mit dem funktionsfähigen Beispiel unter „Quellen“ enthält außerdem die exakten Abhängigkeiten für die Vorschau und das vollständige Dokument. Entpacken Sie es, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie anschließend http://localhost:8080/va.html. Öffnen Sie Beispiele mit Modulen nicht über file://. ``` // Install in an application with a JavaScript bundler: // npm install @department-of-veterans-affairs/component-library@56.14.0 \ // @department-of-veterans-affairs/css-library@0.36.1 import '@department-of-veterans-affairs/component-library/dist/main.css'; import '@department-of-veterans-affairs/css-library/dist/tokens/css/variables.css'; import { defineCustomElements } from '@department-of-veterans-affairs/component-library'; defineCustomElements(); // Render the va-process-list markup in your page after this initialization. // Deliver the CSS-library fonts separately, or choose an explicit fallback. // Components that use va-icon also require the same-origin /img/sprite.svg. ``` ### Ein Prompt für dein Projekt ``` Erstellen Sie eine Erläuterung zum VA-Dienstprozess mit einem va-process-list und drei bis zehn va-process-list-item-Elementen. Verwenden Sie handlungsorientierte Überschriften, level=3 unter einem h2, sichtbare Beschreibungen und pro Element genau einen Status für aktiv, ausstehend oder erledigt – jeweils mit explizitem status-text. Verwenden Sie va-details nur für ergänzende Informationen innerhalb eines Schritts und blenden Sie niemals den gesamten Schritt aus. Importieren Sie die aktuelle VADS-CSS-Token-Datei und registrieren Sie die nativen Komponenten. Behalten Sie 17px Fließtext, die Rollen der Schriftfamilien Bitter/Source Sans, semantische Abstände und die Haltepunkte 320/480/640/880/1024/1201/1400px bei. Jede interaktive Vorschau muss ihre Phasen ausdrücklich als veranschaulichend kennzeichnen und darf nicht den Eindruck erwecken, sie stelle einen eingereichten VA-Antrag dar. ``` ## VA Designsystem Quellen und Umfang Technische Komponentendemonstration mit fiktiven Phasen einer Aktenanfrage. Es werden weder eine echte VA-Anfrage noch ein tatsächlicher Fallstatus oder Leistungsbescheid dargestellt oder eine institutionelle Unterstützung suggeriert. - VA Design System Offizielle Grundlagen, Inhalte, Komponenten und Richtlinien. - VA-Muster Muster für Antragsaufgaben, vorausgefüllte Angaben, Unterschriften und Wiederherstellung. - VA-Komponenten Komponentenspezifikationen, Entscheidungen und Informationen zur Barrierefreiheit. - 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. ## VA Designsystem Verwandte Ressourcen ### W3C Designsystem Gestalten Sie robuste Leseoberflächen mit flexibler Typografie, semantischen Farbrollen und nativen aufklappbaren Inhalten, die auch ohne JavaScript lesbar bleiben. ### Codex Nutzen Sie die echte SearchInput-Struktur von Codex, die Aktionshierarchie und die auf das Lesen ausgerichteten Tokens. Durchsuchen Sie einen lokalen Artikelindex, sehen Sie sich ein Ergebnis an und kehren Sie zur gleichen Leseposition zurück. ### Agriculture Designsystem Erstelle längere Servicevorgänge mit den konkreten Abständen, responsiven Props und dem TaskList-Statusmodell von AgDS. Probiere einen Vorbereitungsvorgang aus, bei dem der Prüfschritt erst freigeschaltet wird, wenn alle Voraussetzungen erfüllt sind. - [Implementierungsreferenz](https://design.va.gov/components/process-list) - [Quelle](https://design.va.gov/foundation/design-tokens/typography) - [Quelle](https://design.va.gov/foundation/design-tokens/spacing) - [Quelle](https://design.va.gov/foundation/design-tokens/color) - [Quelle](https://design.va.gov/foundation/design-tokens/breakpoints) - [Unterstützende Spezifikation lesen](https://design.va.gov/about/developers/install) - [Unterstützende Spezifikation lesen](https://design.va.gov/foundation/design-tokens/typography) - [Unterstützende Spezifikation lesen](https://design.va.gov/foundation/design-tokens/spacing) - [Unterstützende Spezifikation lesen](https://design.va.gov/foundation/design-tokens/color) - [Unterstützende Spezifikation lesen](https://design.va.gov/foundation/design-tokens/breakpoints) - [Code-Referenz](https://design.va.gov/components/process-list) - [Unterstützende Spezifikation lesen](https://design.va.gov/components/process-list) - [VA Design System Offizielle Grundlagen, Inhalte, Komponenten und Richtlinien.](https://design.va.gov/) - [VA-Muster Muster für Antragsaufgaben, vorausgefüllte Angaben, Unterschriften und Wiederherstellung.](https://design.va.gov/patterns/) - [VA-Komponenten Komponentenspezifikationen, Entscheidungen und Informationen zur Barrierefreiheit.](https://design.va.gov/components/)