Sistema di design CFPB.

Sistema di design CFPB Ambito di implementazione CFPB

Informazioni per i consumatori prima degli elementi decorativi

CFPB combina un’architettura editoriale delle informazioni con componenti per moduli e contenuti a comparsa. La griglia, la gerarchia tipografica e i titoletti in maiuscolo sono importanti quanto il caratteristico verde. L’esempio è una scheda di lettura originale: le indicazioni essenziali restano visibili, mentre le spiegazioni facoltative usano il componente nativo Expandables. Non si tratta di una raccomandazione finanziaria, dell’invio di un reclamo o di un servizio governativo.

Il pacchetto è pubblico, ma il sigillo governativo e l’identità CFPB sono soggetti a restrizioni specifiche. Riutilizzare il codice non rende ufficiale un servizio. Per questo l’esempio non contiene sigilli, loghi, banner di siti ufficiali né intestazioni che imitano quelle governative.

Leggi la specifica di supporto

Sistema di design CFPB Tipografia e ritmo di lettura

Source Sans 3 e differenze tra versioni

Le indicazioni tipografiche attuali riportano Source Sans 3, a seguito del passaggio da Avenir Next avvenuto a luglio 2025. L’esempio locale non dipende da font ospitati esternamente e usa intenzionalmente il fallback compilato dei font di sistema. Un’implementazione reale con il marchio dovrebbe fornire i file dei font autorizzati tramite il mixin documentato per i font con licenza.

La tabella pubblica delle intestazioni e la stringa attuale degli stili di base non coincidono. Nel pacchetto 5.10.2 H1 è 2.125em con interlinea 1.25, che con una radice da 16px produce 34/42.5, anziché un’altezza della riga di 60px come indicato nella tabella. Il riferimento qui sopra segue il codice effettivamente eseguito. Anche la normalizzazione delle intestazioni usa regolazioni specifiche per livello: non trasformare la tabella semplificata in un override globale.

Mantieni i paragrafi intorno ai 66 caratteri per riga e lascia 15px di spazio tra loro. Le intestazioni sono in stile frase, tranne il trattamento compatto di H5/titolo breve. In questo modo un articolo di approfondimento è facile da consultare senza costringere ogni paragrafo in una scheda.

Leggi la specifica di supporto

Sistema di design CFPB Colore e impostazione editoriale

Usa il ruolo, non solo il verde

Il CSS compilato espone --black, --green, --pacific e le famiglie cromatiche complementari graduate. Il testo usa il nero; Pacific offre un’indicazione di interazione più riconoscibile. Lo sfondo grigio chiaro di Expandable delimita il contenuto di lettura, non indica uno stato disabilitato. I titoletti nativi combinano una sottile linea grigia a tutta larghezza con un segmento verde più spesso e corto.

La scheda lascia intenzionalmente bianca la superficie di lettura principale. Il verde compare nel divisore di sezione, mentre il conteggio dei progressi è un normale testo leggibile. Un elemento completato o selezionato resta comprensibile anche senza distinguere il verde dal rosso. La pagina non attribuisce arbitrariamente un significato di successo o errore a ogni campione della palette.

• Usa --gray-5 per una superficie a comparsa discreta e --gray-40 per il relativo contorno.
• Rendi i link riconoscibili anche tramite la sottolineatura o il trattamento interattivo, non solo attraverso il colore.
• Riserva gli elementi identificativi agli usi autorizzati; una licenza della palette non autorizza a suggerire un’affiliazione.

Leggi la specifica di supporto

Sistema di design CFPB Dodici colonne e una densità funzionale

Un articolo con margini funzionali

La griglia documentata ha dodici colonne, gutter fissi da 30px e una larghezza massima di 1230px. Su dispositivi mobili i margini esterni sono di 15px; nei layout più ampi sono di 30px. A partire da 901px, l’anteprima traduce queste misure in un’area di lettura di otto colonne e una lista di controllo operativa di quattro colonne; al di sotto, la lista viene collocata sotto l’articolo. Questa suddivisione è una composizione applicativa che usa la griglia pubblicata, non un modello universale ufficiale di pagina.

Il testo lungo mantiene un limite massimo di 66ch anche quando la pagina potrebbe essere più larga. I pulsanti vanno a capo e la barra laterale non ha altezza fissa né scorrimento annidato. Aprire una spiegazione aumenta la normale altezza del documento, quindi la stessa composizione funziona nell’anteprima incorporata della pagina delle risorse.

Leggi la specifica di supporto

Sistema di design CFPB Struttura nativa di Expandable

Tieni separati il controllo e il contenuto facoltativo

Un elemento radice Expandable legacy contiene un pulsante __header, un __label e una regione __content. Il pulsante è l’elemento che riceve il focus. In questo esempio, un elemento span fornisce l’etichetta, mentre i segni decorativi più/meno sono esclusi dal nome accessibile. Durante l’inizializzazione, la libreria assegna lo stato di espansione e gli hook di comportamento; l’applicazione non duplica queste modifiche.

I modificatori --background e --border forniscono il trattamento incorniciato. Il modificatore --padded è una presentazione più ampia, con un’etichetta proporzionalmente più grande, non un requisito per ogni contenuto a comparsa. Le istruzioni essenziali della scheda restano fuori dal pannello nascosto, perché i lettori devono capire l’attività prima di aprire le spiegazioni facoltative.

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

Riferimento del codice

Leggi la specifica di supporto

Sistema di design CFPB Comportamento dei contenuti a comparsa e della lista di controllo

Due tipi di stato indipendenti

La libreria nativa gestisce lo stato dei contenuti a comparsa. La scheda gestisce i valori delle tre normali caselle di controllo e il conteggio risultante. Aprire un pannello non segna un’attività come completata e selezionare una casella non comprime le informazioni. Sono modelli volutamente distinti: la visibilità non dimostra la comprensione.

L’istanza 5.10.2 espone expand, collapse e isExpanded. La pagina pubblica Expandables include un riferimento meno recente a toggleTargetState, perciò questa guida usa il API effettivo e versionato. Apri tutto e Chiudi tutto operano sulle istanze inizializzate. In questo caso è preferibile mantenere i pannelli indipendenti, perché i lettori potrebbero voler confrontare le due spiegazioni.

L’azione di ripristino cancella tutti i valori delle caselle di controllo e comprime i pannelli tramite il API della libreria. Non genera una conferma di invio fittizia. I progressi vengono annunciati tramite un elemento di stato con modalità polite, senza spostare il focus della tastiera dopo ogni modifica a una casella di controllo.

Leggi la specifica di supporto

Sistema di design CFPB Asset compilati e stili di base

Un modulo ES, non uno script classico

Installa il pacchetto bloccato a una versione specifica, copia i due asset compilati nella directory statica e importa Expandable con uno script di tipo modulo. index.js della versione pubblicata 5.10.2 contiene esportazioni ES, quindi uno script classico copiato dal vecchio esempio di integrazione genererebbe un errore di sintassi. Inoltre, non inizializza automaticamente gli elementi radice Expandable legacy.

Il solo foglio di stile del componente non include le regole globali per le intestazioni e il corpo della pagina. I progetti di produzione possono compilare il pacchetto SCSS di base come indicato nella guida ufficiale all’integrazione. Questo esempio isolato usa invece la stringa esatta CSS degli stili di base, incorporata nello stesso modulo pubblicato, salvandola in un file locale documentato a parte. Questa estrazione è una scelta di packaging locale, non un nuovo punto di ingresso CFPB pubblicato.

Se compili SCSS sorgente che contiene riferimenti alle icone, includi la sostituzione SVG PostCSS documentata per il progetto. Lo snapshot compilato risolve già questi riferimenti. Evita di inventare una configurazione solo Sass che lasci --cfpb-background-icon-svg senza risoluzione.

1. Installa la versione 5.10.2 e conserva il relativo TERMS.md insieme agli asset serviti localmente.
2. Carica il CSS del componente insieme agli stili globali di base scelti; configura esplicitamente i font.
3. Usa un import di modulo, inizializza il contenitore dopo che il relativo markup è disponibile, quindi associa le azioni dell’applicazione alle istanze restituite.

Leggi la specifica di supporto

Sistema di design CFPB Verifica il flusso di lettura

Un contenuto a comparsa non basta per verificare l’accessibilità

A larghezza ridotta, il titolo principale si adatta grazie agli stili di base nativi e la lista di controllo segue l’articolo. A larghezza desktop, la disposizione a due colonne mostra insieme i contenuti di lettura facoltativi e gli appunti operativi. Verifica entrambe le viste con tutti i pannelli aperti, non solo nello stato compresso.

Usa Tab per raggiungere ciascun pulsante nativo ed Enter o Spazio per attivarlo o disattivarlo. Verifica che la libreria aggiorni aria-expanded e che il contenuto nascosto non compaia più nell’ordine di tabulazione. Seleziona quindi due attività, apri e chiudi tutte le spiegazioni e verifica che il conteggio resti due fino al ripristino. Questi test rilevano i conflitti tra lo stato dell’applicazione e quello della libreria che uno screenshot non può mostrare.

Questo esempio locale non usa archiviazione, analisi, invio tramite rete o dati personali reali. L’uso di componenti nativi, da solo, non certifica il sito risultante: contrasto, contenuti, supporto dei browser e comportamento con le tecnologie assistive richiedono comunque una verifica nel servizio che li adotta.

Leggi la specifica di supporto

Sistema di design CFPB Esempi di componenti del sistema di design CFPB

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

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>

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