Setzen Sie das redaktionelle Raster, die aktuelle Typografie und die nativen Expandables von CFPB um – mit einem funktionierenden Arbeitsblatt zum Lesen, überprüften Paket-APIs und klaren Grenzen für die Markenidentität.
Öffnen Sie die nativen Erläuterungen, führen Sie eine separate Checkliste und setzen Sie den lokalen Status zurück. Ändern Sie die Fenstergröße, um zu sehen, wie das zwölfspaltige Layout umbricht.
Native CFPB 5.10.2 CSS und aufklappbare JavaScript; unveränderte Extraktion der Paketbasis CSS, Systemschriften als Fallback und originäre Anwendungsinhalte. · Implementierungsreferenz
02
CFPB Designsystem-Designreferenz
Kompiliertes CSS-Paket CFPB 5.10.2 und ES-Modul; aktuelle öffentliche Empfehlungen zur Grundlage. Die Demo verwendet native Klassen für aufklappbare Elemente und JavaScript. Das globale Basis-CSS wurde unverändert aus der Zeichenfolge mit den Basisstilen des veröffentlichten Moduls übernommen und nutzt Systemschriften als Fallback. Die Werte für font-size-adjust und den Zeilenabstand der Überschriften orientieren sich weiter unten an der versionierten Codebasis, da sie von der vereinfachten Tabelle der Grundlagen abweichen. Es wird weder ein CFPB-Logo noch eine Zugehörigkeit zum CFPB suggeriert.
Farben und tatsächliche benutzerdefinierte Eigenschaften
Im Juli 2025 durch Avenir Next ersetzt; die Demo verwendet den system-ui-Fallback des Pakets.
Body
16px / 1.375
Zeilenhöhe von 22px bei der standardmäßigen Stammgröße des Browsers.
H1
34px / 1.25; weight 600
26px bei <=600px; die Code-Zeilenhöhe beträgt auf Desktop 42.5px.
H2
26px / 1.25; weight 600
22px bei <=600px.
H3 / H4
22px weight 400 / 18px weight 500
18px / 16px auf kleinen Bildschirmen; für beide gilt ein Zeilenabstand von 1.25.
H5
14px / 1.25; weight 600
VERSALIEN, Zeichenabstand 1px.
Normalization
base .517; step .0054
Versionierte benutzerdefinierte Eigenschaften sorgen bei Überschriften für schrittweise größere Anpassungen; das weicht von der vereinfachten Grundlagen-Tabelle ab.
Verbraucherinformationen vor dekorativen Elementen
Das CFPB verbindet eine redaktionelle Informationsarchitektur mit Formular- und Offenlegungskomponenten. Sein Raster, die typografische Hierarchie und die kleinen Überschriften in Versalien sind ebenso prägend wie das vertraute Grün. Das Beispiel ist ein eigens entwickeltes Arbeitsblatt zum Lesen: Die wesentliche Orientierung bleibt sichtbar, während optionale Erläuterungen native Expandables verwenden. Es handelt sich weder um eine Finanzempfehlung noch um eine Beschwerdeeinreichung oder eine staatliche Dienstleistung.
Das Paket ist öffentlich zugänglich, doch für das Staatssiegel und die CFPB-Identität gelten gesonderte Einschränkungen. Die Wiederverwendung des Codes macht einen Dienst nicht zu einem offiziellen Angebot. Dieses Beispiel enthält daher weder Siegel noch Logo, Banner für offizielle Websites oder einen nachgeahmten Behörden-Header.
Die aktuellen Richtlinien zur Schriftart nennen Source Sans 3. Damit wurde im Juli 2025 Avenir Next abgelöst. Das lokale Beispiel hat keine Abhängigkeit von extern gehosteten Schriftarten und verwendet bewusst den kompilierten Fallback mit Systemschriften. Eine echte Markenimplementierung sollte die autorisierten Schriftdateien über das dokumentierte Mix-in für lizenzierte Schriftarten bereitstellen.
Die veröffentlichte Überschriften-Tabelle und der aktuelle Base-Style-String stimmen nicht vollständig überein. In Paket 5.10.2 hat H1 eine Größe von 2.125em und einen Zeilenabstand von 1.25. Bei einer Root-Schriftgröße von 16px ergibt das 34/42.5 statt der in der Tabelle angegebenen Zeilenhöhe von 60px. Die obige Referenz folgt diesem ausführbaren Quellcode. Auch die Normalisierung von Überschriften verwendet Anpassungen je Ebene; leite aus der vereinfachten Tabelle keine globale Überschreibung ab.
Absätze sollten etwa 66 Zeichen breit sein und einen Abstand von 15px haben. Überschriften stehen in Satzschreibung, mit Ausnahme der kompakten Darstellung von H5 und Slugs. So lässt sich ein Ratgeberartikel schnell überfliegen, ohne jeden Absatz in eine Karte zu packen.
CFPB Designsystem Farben und redaktionelle Gestaltung
Die Rolle ist wichtiger als das Grün allein
Das kompilierte CSS stellt --black, --green, --pacific und die abgestuften ergänzenden Farbpaletten bereit. Für Text wird Schwarz verwendet; Pacific sorgt für einen besser erkennbaren Interaktionshinweis. Der hellgraue Hintergrund von Expandable markiert eine Lesegrenze und keinen deaktivierten Zustand. Native Slug-Überschriften kombinieren eine dünne graue Linie über die ganze Breite mit einem kurzen, stärkeren grünen Abschnitt.
Das Arbeitsblatt lässt seine zentrale Lesefläche bewusst weiß. Grün kommt am Abschnittstrenner zum Einsatz, während der Fortschrittszähler als gewöhnlicher, gut lesbarer Text dargestellt wird. Ein erledigter oder markierter Punkt bleibt verständlich, ohne dass man Grün von Rot unterscheiden muss. Die Seite weist nicht jedem Farbfeld der Palette eigenmächtig eine Erfolgs- oder Fehlerbedeutung zu.
Verwenden Sie --gray-5 für eine zurückhaltende Hintergrundfläche des Expandable und --gray-40 für dessen Umrandung.
Links sollten nicht nur durch ihre Farbe, sondern auch durch Unterstreichung oder Interaktionsgestaltung erkennbar sein.
Verwenden Sie die Identitätsmerkmale nur mit entsprechender Berechtigung. Eine Lizenz für die Farbpalette ist keine Erlaubnis, eine Zugehörigkeit vorzutäuschen.
CFPB Designsystem Zwölf Spalten und eine zweckmäßige Informationsdichte
Ein Artikel mit ausreichend Rand
Das dokumentierte Raster umfasst zwölf Spalten, feste Zwischenräume von 30px und eine maximale Breite von 1230px. Auf Mobilgeräten beträgt der Außenabstand 15px, bei größeren Layouts 30px. Die Vorschau setzt dieses Raster ab 901px Breite mit einem acht Spalten breiten Lesebereich und einer vier Spalten breiten Arbeits-Checkliste um. Darunter wird die Checkliste unter dem Artikel angeordnet. Diese Aufteilung ist eine Anwendungskomposition auf Grundlage des veröffentlichten Rasters und keine offizielle universelle Seitenvorlage.
Längere Texte behalten eine eigene maximale Breite von 66ch, selbst wenn die Seite breiter werden kann. Schaltflächen werden bei Bedarf umgebrochen; die Seitenleiste hat weder eine fixierte Höhe noch einen verschachtelten Scrollbereich. Wird eine Erläuterung aufgeklappt, wächst die normale Dokumenthöhe. So eignet sich dieselbe Komposition auch für die eingebettete Vorschau auf der Ressourcenseite.
Ein Expandable-Wurzelelement der älteren Version enthält einen __header-Button, einen __label und einen __content-Bereich. Der Button erhält den Tastaturfokus. In diesem Beispiel liefert ein span die Beschriftung; dekorative Plus-/Minuszeichen sind im zugänglichen Namen verborgen. Die Bibliothek weist bei der Initialisierung den Status und die Verhaltens-Hooks zu. Die Anwendung bildet diese Änderungen nicht nach.
Die Modifikatoren --background und --border sorgen für die umrandete Darstellung. Der Modifikator --padded bietet eine größere Variante mit entsprechend größerer Beschriftung und ist nicht für jedes aufklappbare Element erforderlich. Wichtige Anweisungen zum Arbeitsblatt stehen außerhalb des ausgeblendeten Bereichs, damit Leser die Aufgabe verstehen, bevor sie optionale Erläuterungen öffnen.
html
<div class="o-expandable o-expandable--background o-expandable--border">
<button class="o-expandable__header" type="button">
<span class="o-expandable__label">Keep the question specific</span>
<span class="o-expandable__cues" aria-hidden="true">
<span class="o-expandable__cue-open">+</span>
<span class="o-expandable__cue-close">−</span>
</span>
</button>
<div class="o-expandable__content">
<p>Describe the document and the words you want explained.</p>
</div>
</div>
CFPB Designsystem Verhalten von Offenlegungen und Checkliste
Zwei voneinander unabhängige Arten von Status
Die native Bibliothek verwaltet den Offenlegungsstatus. Das Arbeitsblatt verwaltet seine drei gewöhnlichen Checkbox-Werte und den daraus ermittelten Zählerstand. Das Öffnen eines Bereichs markiert keine Aufgabe als erledigt, und das Markieren einer Aufgabe klappt keine Informationen ein. Diese Modelle sind bewusst getrennt: Sichtbarkeit ist kein Beleg für Verständnis.
Die Instanz in Version 5.10.2 stellt expand, collapse und isExpanded bereit. Auf der öffentlichen Expandables-Seite findet sich ein älterer Verweis auf toggleTargetState. Daher verwendet diese Anleitung die tatsächlich versionierte API. „Alle öffnen“ und „Alle schließen“ durchlaufen die initialisierten Instanzen. Unabhängige Bereiche sind hier vorzuziehen, da Leser die beiden Erläuterungen möglicherweise miteinander vergleichen möchten.
Beim Zurücksetzen werden alle Checkbox-Werte gelöscht und die Bereiche über die API der Bibliothek eingeklappt. Dabei wird keine Bestätigung für eine Einreichung vorgetäuscht. Der Fortschritt wird über ein höfliches Status-Element angekündigt, ohne bei jeder Änderung einer Checkbox den Tastaturfokus zu verschieben.
CFPB Designsystem Kompilierte Assets und Basisstile
Ein ES-Modul, kein klassisches Skript
Installieren Sie das festgelegte Paket, kopieren Sie die beiden kompilierten Assets in Ihr statisches Verzeichnis und importieren Sie Expandable mit einem Modulskript. Die veröffentlichte Datei index.js in Version 5.10.2 enthält ES-Modulexporte. Ein klassisches Skript-Tag aus dem älteren Integrationsbeispiel würde daher einen Syntaxfehler verursachen. Außerdem initialisiert die Datei die älteren Expandable-Elemente nicht automatisch.
Das Stylesheet der Komponente allein enthält nicht die seitenweiten Regeln für Überschriften und Fließtext. Produktionsprojekte können das Basis-SCSS des Pakets wie in der offiziellen Integrationsanleitung beschrieben kompilieren. Dieses isolierte Beispiel verwendet stattdessen weiterhin exakt die Basis-CSS-Zeichenfolge, die in dasselbe veröffentlichte Modul eingebettet ist, und stellt sie als separat dokumentierte lokale Datei bereit. Diese Extraktion ist eine lokale Entscheidung zur Paketierung und kein neu veröffentlichter CFPB-Einstiegspunkt.
Wenn Sie SCSS-Quelldateien mit Symbolverweisen kompilieren, binden Sie die dokumentierte PostCSS-SVG-Ersetzung des Projekts ein. Im kompilierten Snapshot sind diese Verweise bereits aufgelöst. Vermeiden Sie eine nur auf Sass basierende Konfiguration, bei der --cfpb-background-icon-svg nicht aufgelöst wird.
Installieren Sie Version 5.10.2 und legen Sie TERMS.md zusammen mit den lokal bereitgestellten Assets ab.
Laden Sie die Komponenten-CSS und zusätzlich die gewählten globalen Basisstile; konfigurieren Sie die Schriftarten ausdrücklich.
Verwenden Sie einen Modulimport, initialisieren Sie den Container, sobald sein Markup vorhanden ist, und weisen Sie anschließend den zurückgegebenen Instanzen die Anwendungsaktionen zu.
Ein Aufklappbereich ist nicht der ganze Barrierefreiheitstest
Bei schmaler Ansichtsbreite wird der Haupttitel durch die nativen Basisstile verkleinert, und die Checkliste folgt auf den Artikel. Auf Desktop-Bildschirmen zeigt die zweispaltige Anordnung optionale Lese- und Arbeitsnotizen nebeneinander. Testen Sie beide Ansichten mit geöffneten Bereichen, nicht nur im eingeklappten Zustand.
Navigieren Sie mit der Tab-Taste zu jeder nativen Schaltfläche und schalten Sie den Bereich mit Enter oder der Leertaste um. Prüfen Sie, ob die Bibliothek aria-expanded aktualisiert und ausgeblendete Inhalte nicht mehr in der Tab-Reihenfolge erscheinen. Markieren Sie dann zwei Aufgaben, öffnen und schließen Sie alle Erläuterungen und vergewissern Sie sich, dass die Anzahl bis zum Zurücksetzen bei zwei bleibt. Mit diesen Tests lassen sich Konflikte zwischen Anwendungs- und Bibliotheksstatus erkennen, die auf einem Screenshot nicht sichtbar wären.
Dieses lokale Beispiel verwendet weder Speicher noch Analysen, Netzwerkübermittlung oder echte personenbezogene Daten. Die native Verwendung der Komponente allein gewährleistet nicht die Barrierefreiheit der fertigen Website. Kontrast, Inhalt, Browserunterstützung und Verhalten mit assistiven Technologien müssen im Dienst, der die Komponente einbindet, weiterhin geprüft werden.
Die veröffentlichte Version 5.10.2 ist ein ESM-Modul. Laden Sie sie nicht als klassisches Skript.
Das Beispiel verwendet wortgetreu extrahierte Basisstile des Pakets, die in der zugehörigen SOURCE.md dokumentiert sind.
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.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>CFPB reading worksheet specimen</title><link rel="stylesheet" href="vendor/cfpb-5.10.2/index.css"><link rel="stylesheet" href="vendor/cfpb-5.10.2/base-extracted.css"><style>*{box-sizing:border-box}body{margin:0;background:#fff}main{max-width:1230px;margin:auto;padding:30px}header{max-width:66ch;margin-bottom:30px}.layout{display:grid;grid-template-columns:2fr 1fr;gap:30px}.article{min-width:0}.o-expandable{margin:15px 0}.toolbar{display:flex;gap:15px;flex-wrap:wrap;margin:15px 0}.notes{border-top:5px solid var(--gray-40);padding-top:15px}.notes label{display:flex;gap:10px;margin:20px 0;align-items:flex-start}.notes input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--pacific)}.o-expandable__content p{max-width:66ch}.eyebrow{color:var(--gray);font-size:14px}.note{font-size:14px;margin-top:30px;color:var(--gray)}button{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--pacific);outline-offset:3px}@media(max-width:900px){.layout{grid-template-columns:1fr}}@media(max-width:600px){main{padding:20px 15px}}</style><main><header><p class="eyebrow">Independent educational specimen · CFPB components</p><h1>Make your question easier to answer</h1><p>Use this reading worksheet to organize a question about an unfamiliar document. No information is submitted or saved.</p></header><div class="layout"><section class="article" id="guide"><div class="m-slug-header"><h2 class="m-slug-header__heading">Before a conversation</h2></div><p>A useful question identifies the document, quotes the unclear wording, and says what you want explained. Keep account numbers and other private details out of this practice worksheet.</p><div class="toolbar"><button id="open-all" class="a-btn a-btn--secondary">Open all explanations</button><button id="close-all" class="a-btn a-btn--secondary">Close all</button></div><div class="o-expandable o-expandable--background o-expandable--border">
<button class="o-expandable__header" type="button">
<span class="o-expandable__label">Keep the question specific</span>
<span class="o-expandable__cues" aria-hidden="true">
<span class="o-expandable__cue-open">+</span>
<span class="o-expandable__cue-close">−</span>
</span>
</button>
<div class="o-expandable__content">
<p>Describe the document and the words you want explained.</p>
</div>
</div><div class="o-expandable o-expandable--background o-expandable--border">
<button class="o-expandable__header" type="button">
<span class="o-expandable__label">Separate a question from a request</span>
<span class="o-expandable__cues" aria-hidden="true">
<span class="o-expandable__cue-open">+</span>
<span class="o-expandable__cue-close">−</span>
</span>
</button>
<div class="o-expandable__content">
<p>“What does this label mean?” asks for an explanation. “Please send a copy” asks for an action. Writing them separately makes the desired response easier to identify.</p>
</div>
</div><p class="note">Original practice content. This example does not provide financial advice or represent a CFPB service.</p></section><aside class="notes"><h2>Your working notes</h2><p>Use the checklist as a local memory aid.</p><label><input type="checkbox">I can name the document I am asking about.</label><label><input type="checkbox">I have identified the wording I want explained.</label><label><input type="checkbox">I know whether I need an explanation or an action.</label><p id="count" role="status" aria-live="polite">0 of 3 notes checked</p><button id="reset" class="a-btn">Reset worksheet</button></aside></div></main><script type="module">import {Expandable} from './vendor/cfpb-5.10.2/index.js';const panels=Expandable.init(document.querySelector('#guide'));document.querySelector('#open-all').onclick=()=>panels.forEach(x=>x.expand());document.querySelector('#close-all').onclick=()=>panels.forEach(x=>x.collapse());const checks=[...document.querySelectorAll('input[type=checkbox]')];const update=()=>document.querySelector('#count').textContent=checks.filter(x=>x.checked).length+' of 3 notes checked';checks.forEach(x=>x.onchange=update);document.querySelector('#reset').onclick=()=>{checks.forEach(x=>x.checked=false);update();panels.forEach(x=>x.collapse())};window.demoReady=true;</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
CFPB Designsystem Einrichtung des KI-Agenten
Ausgangspunkt für die Implementierung
Die lokale Demo führt das kompilierte native Modul in Version 5.10.2 und CSS aus. Die npm-Kopieranleitung ist für Projekte gedacht. Für Builds aus SCSS-Quelldateien ist zusätzlich die dokumentierte Symbolverarbeitung erforderlich. Das vollständige ZIP-Archiv mit dem funktionsfähigen Beispiel finden Sie unter „Sources“. Es enthält auch 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/cfpb.html. Öffnen Sie Beispiele mit Modulen nicht über file://.
bash / HTML
npm install --save-exact @cfpb/[email protected]
# Copy the published compiled files as static assets:
mkdir -p public/vendor/cfpb
cp node_modules/@cfpb/cfpb-design-system/dist/index.css public/vendor/cfpb/
cp node_modules/@cfpb/cfpb-design-system/dist/index.js public/vendor/cfpb/
# In the HTML document:
<link rel="stylesheet" href="/vendor/cfpb/index.css">
<!-- Supply project global/base typography separately. -->
<script type="module">
import { Expandable } from '/vendor/cfpb/index.js';
const panels = Expandable.init(document.querySelector('#guide'));
document.querySelector('#open-all').addEventListener('click', () => {
panels.forEach(panel => panel.expand());
});
document.querySelector('#close-all').addEventListener('click', () => {
panels.forEach(panel => panel.collapse());
});
</script>
Ein Prompt für dein Projekt
Agenten-Prompt
Erstellen Sie ein eigenständiges redaktionelles Arbeitsblatt, das sich an CFPB orientiert und das tatsächliche Expandable-Modul in Version 5.10.2 verwendet. Fügen Sie die erforderliche Struktur aus Kopfzeile, Bezeichnung und Inhalt, separate Aktionen zum Öffnen und Schließen aller Bereiche sowie eine gewöhnliche Checkliste mit Kontrollkästchen ein, deren Werte bei Änderungen an den Aufklappbereichen erhalten bleiben. Verwenden Sie eine Aufteilung im Verhältnis 8/4 über zwölf Spalten, die unter 901px untereinander angeordnet wird, mobile Seitenränder von 15px und eine Lesebreite von 66ch. Stellen Sie die typografischen Basisstile getrennt von der Komponenten-CSS bereit. Fügen Sie weder CFPB-Kennzeichen noch Finanzberatung oder eine vorgetäuschte Übermittlung hinzu und importieren Sie das ESM-Bundle nicht über klassische Skripte.
05
CFPB Designsystem Quellen und Geltungsbereich
Referenz für eine unabhängige Implementierung. Die nativen Paketkomponenten begründen keine Zugehörigkeit zum CFPB. Eigene Lerninhalte, keine Finanzberatung und keine Übermittlung; prüfen Sie TERMS.md, bevor Sie die Inhalte wiederverwenden.
