# USWDS-Designsystem

## USWDS-Designsystem-Oberflächenvorschau

Fiktive Datensätze durchsuchen und filtern, bei leeren Ergebnissen zur Suche zurückkehren und native Anforderungsbereiche aufklappen.

## USWDS-Designsystem-Designreferenz

Native Komponentenverteilung von USWDS 3.14.0. Standard-Tokens aus der offiziellen Dokumentation; Ersatzschriften in der Vorschau sind ausdrücklich gewählte lokale Anpassungen.

### Abstandseinheiten

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| 0.5 / 05 | 4px | Abstände in halben Einheiten und Utility-Formular |
| 1 | 8px | Basiseinheit für Abstände |
| 1.5 / 105 | 12px | Zwischenabstand |
| 2 | 16px | Kompakter Innenabstand |
| 3 | 24px | Abstand zwischen verwandten Inhalten |
| 4 | 32px | Abstand zwischen Abschnitten |
| 5 | 40px | Größerer Abstand |
| 6 | 48px | Großer Abstand |
| tablet | 640px | Benanntes Breiten-Token |
| desktop | 1024px | Benanntes Breiten-Token |
### Standardzuordnung für Schriftarten

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| sans | source-sans-pro | Schriftfamilien-Token nach Schriftart |
| serif | merriweather | Schriftfamilien-Token nach Schriftart |
| body / ui | sans | Rollenbasierte Zuordnung |
| heading | serif | Rollenbasierte Zuordnung |
| code | mono → roboto-mono | Zuordnung der Code-Rolle |
### Standardfarben des Designs

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| primary | blue-60v / #005ea2 | Primäralias |
| primary-lighter | blue-10 / #d9e8f6 | Unterstützender Primärfarbton |
| primary-dark | blue-warm-70v / #1a4480 | Dunklerer Primäralias |
| ink | gray-90 / #1b1b1b | Alias für Haupttext |
### Komponentenverträge

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| aria-controls | Panel ID | Verknüpft jede Akkordeon-Schaltfläche mit ihrem Inhalt. |
| aria-expanded | true / false | Natives JavaScript verwaltet den geöffneten Zustand. |
| data-allow-multiple | Accordion root attribute | Ermöglicht das unabhängige Öffnen mehrerer Bereiche. |
| usa-accordion--bordered | Root modifier | Stellt die umrandete Variante bereit. |
## USWDS-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.

## USWDS-Designsystem: ein konfigurierbares Foundation

### Standard-Tokens sind eine Ausgangskonfiguration

> USWDS trennt System-Tokens, Projekteinstellungen für das Design, Utility-Klassen und Komponenten. Die folgende Referenz hält die Standardkonfiguration des Designs aus der aktuellen Dokumentation fest. Ein Bundesprogramm kann andere Schriftrollen oder Farbaliase konfigurieren, ohne sämtliche Komponenten zu ersetzen.

Die Vorschau ist ein unabhängiger Vergleich von Fördermöglichkeiten im Forschungsbereich mit 3.14.0 CSS und Akkordeon JavaScript. Das Behördenbanner und die Markenkennzeichen sind nicht enthalten. Programmnamen und Förderphasen sind frei erfunden; die Filterung erfolgt vollständig im Browser.

Unterstützende Spezifikation lesen

## Abstände und Theme-Tokens im USWDS-Designsystem

### Die Einheit statt der Zahl lesen

Eine Abstandseinheit USWDS beträgt 8px: units(2) bedeutet 16px, während units(3) 24px bedeutet. Halb-Einheiten-Tokens ermöglichen kleinere Abstände; in der Utility-Schreibweise steht 05 für eine halbe Einheit. Eine margin-2-Utility bedeutet keinen Abstand von zwei Pixeln.

Die Skala umfasst auch benannte Breiten wie tablet und desktop. Diese Namen sind wiederverwendbare Tokens und keine Vorgabe, jede Seite bei jeder Breite neu zu gestalten. Im Vergleich wird der Inhalt mit grid-container umschlossen; die Tabelle befindet sich in einem eigenen, scrollbareren Bereich.

```
@use "uswds-core" as *;
.opportunity-meta {
  padding: units(2);
  margin-bottom: units(3);
}
```

Code-Referenz

Unterstützende Spezifikation lesen

## Schriftarten und Rollen im USWDS-Designsystem

### Eine Rolle lässt sich ändern, ohne Komponenten umzubenennen

Das standardmäßige sans-Token verweist auf Source Sans Pro, serif auf Merriweather. Die Rollen body und UI verweisen auf sans, heading auf serif. Die Funktion family("body") löst diese Zuordnungskette auf. Dokumentieren Sie ein Projekt so, dass die semantische Rolle von der letztlich verwendeten Schriftfamilie unterschieden wird.

Die lokale Vorschau verwendet ausdrücklich Helvetica/Arial für den Fließtext und Georgia für Überschriften, sodass keine Schriftarten heruntergeladen werden müssen. Diese Überschreibung dient nur der Demonstration und entspricht nicht der standardmäßigen Schriftgestaltung von USWDS. Für einen Produktionsbuild sollten diese Rollen über die Einstellungen von uswds-core konfiguriert oder die bereitgestellten Schriftdateien kopiert werden.

```
@use "uswds-core" with (
  $theme-font-type-sans: "helvetica",
  $theme-font-type-serif: "georgia",
  $theme-font-role-body: "sans",
  $theme-font-role-heading: "serif"
);
```

Code-Referenz

Unterstützende Spezifikation lesen

## Farbaliase im USWDS-Designsystem

### Aliase ihrer jeweiligen Rolle zuordnen

Der standardmäßige Alias primary verweist auf blue-60v, #005ea2. primary-dark verweist auf blue-warm-70v, #1a4480; ink verweist auf gray-90, #1b1b1b. Dies sind Theme-Werte und keine Aussage, dass jede USWDS-Website dieselbe Markenfarbe verwenden muss.

Verwenden Sie den semantischen Alias für eine Aktion oder die Gestaltung einer Überschrift und ein Systemfarb-Token nur dann, wenn dies der tatsächlichen Designentscheidung entspricht. Einen primary-Alias in den Einstellungen zu ersetzen, ist kontrollierter, als jede übereinstimmende Hexadezimalzeichenfolge im kompilierten CSS zu ersetzen.

Unterstützende Spezifikation lesen

## Vergleichbare Fördermöglichkeiten als Tabellenzeilen im USWDS-Designsystem

### Die Tabelle semantisch korrekt gestalten

Das Beispiel verwendet eine Tabellenbeschriftung, Spaltenüberschriften mit scope="col" und den Namen einer Fördermöglichkeit mit scope="row". Es handelt sich um eine Tabelle, weil Leserinnen und Leser in mehreren Datensätzen dieselben Themen- und Phasenfelder vergleichen. Diese Beziehungen bleiben auch beim Scrollen des Bereichs erhalten.

Der scrollbarere Container hat tabindex="0", damit Tastaturnutzende ihn fokussieren können. So bleiben umfangreiche Daten auf diesen Bereich beschränkt, statt das gesamte Dokument zu verbreitern. Die Vorschau enthält einfache Textzellen; für fehlende Programmdaten wäre ein expliziter Inhaltszustand erforderlich, nicht eine erfundene Zahl.

Unterstützende Spezifikation lesen

### Sortieren ist eine separate Erweiterung

USWDS unterstützt sortierbare Spaltenüberschriften über data-sortable. Eine sortierbare Tabelle benötigt außerdem einen usa-table__announcement-region mit aria-live="polite". Bei numerischen Anzeigen kann data-sort-value erforderlich sein, damit ein formatierter Betrag als Zahl statt alphabetisch sortiert wird. Der aktuelle Vergleich aktiviert die Sortierung nicht, da die Demonstration den Filter nach Themen auf drei Zeilen beschränkt.

Unterstützende Spezifikation lesen

## Anforderungen als Offenlegungsbereiche im USWDS-Designsystem

### Die IDs von Schaltfläche und Panel verknüpfen

Jede usa-accordion__button hat ein aria-controls-Attribut, das auf das zugehörige usa-accordion__content verweist. Die native Komponente von JavaScript aktualisiert aria-expanded und die Sichtbarkeit. Der Modifier für Rahmen ändert die Umrandung; mit data-allow-multiple können mehrere Abschnitte gleichzeitig geöffnet bleiben.

Eine Überschrift enthält die Schaltfläche, damit die Gliederung des Inhalts verständlich bleibt. Anforderungen, die bei der Entscheidung über die Relevanz eines Programms helfen, sollten oberhalb des Offenlegungsbereichs sichtbar bleiben. Die Panels enthalten hier zusätzliche Vorbereitungshinweise und eine Erläuterung zum fiktiven Datensatz.

- Die Überschrift beschreibt das Thema des Panels.

- Die Schaltfläche enthält den Status des Offenlegungsbereichs und die ID des Zielbereichs.

- Das Panel behält dieselbe ID, wenn sich seine Sichtbarkeit ändert.

Unterstützende Spezifikation lesen

## Den gesamten Asset-Baum des USWDS-Designsystems installieren

### Pfade beibehalten, die vom kompilierten CSS verwendet werden

Installieren Sie @uswds/uswds@3.14.0 und kopieren Sie das Verzeichnis dist, ohne css, js, img und fonts in einem einzigen Ordner zusammenzuführen. Das Stylesheet verwendet relative Pfade zu Symbolen und Schriftarten. Andernfalls kann eine Seite teilweise korrekt aussehen, während Symbole für Offenlegungsbereiche oder Schriftarten fehlen.

Laden Sie uswds-init.min.js im head, anschließend das Stylesheet und uswds.min.js nach dem Markup des body. Die gebündelte Bibliothek erweitert das Akkordeon um Interaktivität. Das Suchfeld und der Themenfilter weiter unten verwenden benutzerdefinierte Anwendungslogik; sie greifen nicht auf einen entfernten Suchdienst zu.

Unterstützende Spezifikation lesen

## Filtern und Leeren im USWDS-Designsystem

### Eine Suche muss ihr Ergebnis anzeigen

Die nativen Stile für label, input, select und button stellen die Bedienelemente bereit; die Anwendung vergleicht die Suchanfrage und das ausgewählte Thema mit den drei fiktiven Datensätzen. Die Ergebnisanzahl wird in einer höflichen Live-Region angezeigt. Gibt es keine Treffer, erscheinen eine Erklärung und eine Schaltfläche zum Zurücksetzen; die eingegebene Suchanfrage bleibt dabei erhalten.

Die Demonstration unterscheidet bewusst zwischen dem Entdecken einer Fördermöglichkeit und dem Stellen eines Antrags. Das Öffnen von Vorbereitungsinhalten legt keinen Entwurf an und markiert keine Anforderung als erfüllt. Für einen echten Förderantrag wären eigene Programmrichtlinien, Authentifizierung und ein dauerhaft gespeicherter Transaktionsstatus erforderlich.

1. Nach „Umwelt“ filtern und die verbleibende Fördermöglichkeit prüfen.

2. Nach einem Begriff ohne Treffer suchen und „Filter löschen“ verwenden.

3. Beide Vorbereitungsbereiche öffnen und prüfen, ob ihr erweiterter Status unabhängig voneinander ist.

Unterstützende Spezifikation lesen

## Komponentenbeispiele im USWDS-Designsystem

### Zusätzlicher Akkordeonbereich zur Vorbereitung

Ein nativer Offenlegungsbereich von USWDS mit expliziter Verknüpfung zwischen Schaltfläche und Panel.

```
<div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
  <h3 class="usa-accordion__heading">
    <button type="button" class="usa-accordion__button"
      aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
  </h3>
  <div id="preparation" class="usa-accordion__content usa-prose" hidden>
    <p>This fictional opportunity asks for a project summary and a named contact.</p>
  </div>
</div>
```

Code-Referenz

### Vergleichstabelle für Fördermöglichkeiten

Tabellenbeschriftung sowie Zeilen- und Spaltenüberschriften erhalten die Beziehungen des Vergleichs.

```
<div class="usa-table-container--scrollable" tabindex="0">
  <table class="usa-table usa-table--borderless">
    <caption>Illustrative research opportunities</caption>
    <thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead>
    <tbody><tr><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr></tbody>
  </table>
</div>
```

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.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research opportunities — OpenDesign study</title><script src="vendor/uswds-3.14.0/uswds-init.min.js"></script><link rel="stylesheet" href="vendor/uswds-3.14.0/css/uswds.min.css"><style>body,body *,body *:before,body *:after{font-family:Helvetica,Arial,sans-serif!important}h1,h2{font-family:Georgia,serif!important}body{color:#1b1b1b;margin:0}[hidden]{display:none!important}.study-head{background:#d9e8f6;padding:16px 0;border-bottom:4px solid #005ea2}.study-head p{margin:0}.study-form{display:flex;gap:24px;align-items:end;flex-wrap:wrap}.study-form>div{flex:1;min-width:200px}.study-form .usa-input,.study-form .usa-select{max-width:none}.usa-table{width:100%}.study-main{padding-top:32px;padding-bottom:48px}.usa-table th{min-width:120px}#count{margin-top:24px}.study-note{border-top:1px solid #a9aeb1;margin-top:32px;padding-top:16px;line-height:1.5}</style></head><body><header class="study-head"><div class="grid-container"><p><strong>OpenDesign · USWDS component study</strong><br>Fictional research records. No application is submitted.</p></div></header><main class="grid-container study-main"><h1>Research opportunities</h1><p class="usa-intro">Compare topics and read the preparation notes.</p><form class="study-form" id="filters"><div><label class="usa-label" for="query">Search opportunity names</label><input class="usa-input" id="query" type="search"></div><div><label class="usa-label" for="topic">Topic</label><select class="usa-select" id="topic"><option value="">All topics</option><option>Environment</option><option>Transport</option><option>Education</option></select></div><button type="submit" class="usa-button">Apply filters</button><button type="button" class="usa-button usa-button--outline" id="clear">Clear filters</button></form><p id="count" aria-live="polite">3 opportunities</p><div class="usa-table-container--scrollable" tabindex="0"><table class="usa-table usa-table--borderless"><caption>Illustrative research opportunities</caption><thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead><tbody><tr data-topic="Environment"><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr><tr data-topic="Transport"><th scope="row">Accessible transport research</th><td>Transport</td><td>Example review</td></tr><tr data-topic="Education"><th scope="row">Local skills survey</th><td>Education</td><td>Example draft</td></tr></tbody></table></div><p id="empty" hidden>No matching opportunities. Broaden the topic or clear the filters.</p><h2>Preparation notes</h2><div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
  <h3 class="usa-accordion__heading">
    <button type="button" class="usa-accordion__button"
      aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
  </h3>
  <div id="preparation" class="usa-accordion__content usa-prose" hidden>
    <p>This fictional opportunity asks for a project summary and a named contact.</p>
  </div>
<h3 class="usa-accordion__heading"><button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="scope">What the example data means</button></h3><div id="scope" class="usa-accordion__content usa-prose" hidden><p>Draft and review are demonstration stages. They do not indicate an actual funding programme or eligibility decision.</p></div>
</div><p class="study-note">USWDS 3.14.0 native accordion and styles, with local Helvetica/Georgia font overrides. Filters are original application code. <a href="vendor/uswds-3.14.0/LICENSE.md">Distribution licence</a>.</p></main><script src="vendor/uswds-3.14.0/uswds.min.js"></script><script>const rows=[...document.querySelectorAll('tbody tr')],q=document.getElementById('query'),t=document.getElementById('topic');function filter(){let n=0;for(const row of rows){const show=(!t.value||row.dataset.topic===t.value)&&row.firstElementChild.textContent.toLowerCase().includes(q.value.trim().toLowerCase());row.hidden=!show;if(show)n++}document.getElementById('count').textContent=n+' '+(n===1?'opportunity':'opportunities');document.getElementById('empty').hidden=n!==0;}document.getElementById('filters').addEventListener('submit',e=>{e.preventDefault();filter()});document.getElementById('clear').addEventListener('click',()=>{q.value='';t.value='';filter();q.focus()});</script></body></html>
```

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.

## Agenteneinrichtung für das USWDS-Designsystem

### Ausgangspunkt für die Implementierung

Behalten Sie die Verzeichnisstruktur von dist bei, damit CSS Schriftarten und Symbole auflösen kann. Dies ist die Installationsvariante mit vorkompilierten Dateien; für die Anpassung des Themes ist ein Sass-Build erforderlich. Die vollständige ZIP-Datei mit dem funktionierenden Beispiel unter „Quellen“ enthält außerdem die exakten Abhängigkeiten der Vorschau und das vollständige Dokument. Entpacken Sie sie, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie anschließend http://localhost:8080/uswds.html. Öffnen Sie Beispiele mit Modulen nicht über file://.

```
npm install @uswds/uswds@3.14.0
mkdir -p public/assets/uswds
cp -R node_modules/@uswds/uswds/dist public/assets/uswds/

<!-- HTML head -->
<script src="/assets/uswds/dist/js/uswds-init.min.js"></script>
<link rel="stylesheet" href="/assets/uswds/dist/css/uswds.min.css">
<!-- After the component markup, before closing body -->
<script src="/assets/uswds/dist/js/uswds.min.js"></script>
```

### Ein Prompt für dein Projekt

```
Erstellen Sie mit USWDS 3.14.0 einen fiktiven Vergleich von Forschungsmöglichkeiten. Laden Sie den vollständigen dist-Asset-Baum, das Initialisierungsskript, das Komponenten-Stylesheet und JavaScript. Stellen Sie vergleichbare Datensätze in einer semantischen Tabelle mit Beschriftung und Spaltenüberschriften dar. Ergänzen Sie eine beschriftete Suche und einen Kategorienfilter, die Trefferanzahl, einen hilfreichen Zustand ohne Treffer sowie eine Zurücksetzen-Funktion. Verwenden Sie native Akkordeons für zusätzliche Anforderungen, während die wesentlichen Vergleichsinformationen sichtbar bleiben. Behalten Sie die dokumentierten Abstände und Zuordnungen der Theme-Rollen bei und kennzeichnen Sie die Überschreibung der Systemschrift. Machen Sie aus diesem Verzeichnis keinen Einreichungsprozess und erwecken Sie nicht den Eindruck, es handle sich um echte Förderfähigkeit oder Förderzusagen.
```

## USWDS Designsystem: Quellen und Umfang

Unabhängige Komponentenstudie mit USWDS 3.14.0. Fiktive Fördermöglichkeiten, kein Anspruch auf eine staatliche Identität und kein Anwendungsendpunkt. Helvetica/Arial und Georgia sind lokale Ersatzschriften, nicht die standardmäßigen USWDS-Schriftdateien.

- Abstandseinheiten Numerische Einheiten und benannte Breiten.

- Rollen der Schriftfamilien Auflösung von Typografie- und Rollentokens.

- Theme-Farben Standard-Aliasse und Einstellungen.

- Tabelle Semantischer Vergleich und Scrollen.

- Accordion Panelzustände und Markup.

- Einrichtung für Entwickler Distribution und Asset-Pfade.

- 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.

## Zugehörige Ressourcen zum USWDS-Designsystem

### VA Designsystem

Gestalte klare Serviceabläufe mit den semantischen Tokens von VA und der nativen Process List: sichtbare Erläuterungen zu den einzelnen Schritten, aussagekräftige Statusbezeichnungen und ergänzende Details, die den Hauptablauf übersichtlich halten.

### 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.


- [Implementierungsreferenz](https://designsystem.digital.gov/components/accordion/)
- [Quelle](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Quelle](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Quelle](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)
- [Quelle](https://designsystem.digital.gov/components/accordion/)
- [Unterstützende Spezifikation lesen](https://designsystem.digital.gov/documentation/developers/)
- [Code-Referenz](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Unterstützende Spezifikation lesen](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Code-Referenz](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Unterstützende Spezifikation lesen](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Unterstützende Spezifikation lesen](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)
- [Unterstützende Spezifikation lesen](https://designsystem.digital.gov/components/table/)
- [Unterstützende Spezifikation lesen](https://designsystem.digital.gov/components/accordion/)
- [Code-Referenz](https://designsystem.digital.gov/components/accordion/)
- [Code-Referenz](https://designsystem.digital.gov/components/table/)
- [Abstandseinheiten Numerische Einheiten und benannte Breiten.](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Rollen der Schriftfamilien Auflösung von Typografie- und Rollentokens.](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Theme-Farben Standard-Aliasse und Einstellungen.](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)
- [Tabelle Semantischer Vergleich und Scrollen.](https://designsystem.digital.gov/components/table/)
- [Accordion Panelzustände und Markup.](https://designsystem.digital.gov/components/accordion/)
- [Einrichtung für Entwickler Distribution und Asset-Pfade.](https://designsystem.digital.gov/documentation/developers/)