# Sistema di design CFPB ## Sistema di design CFPB Anteprima dell'interfaccia Apri le spiegazioni native, gestisci una checklist separata e ripristina lo stato locale. Ridimensiona la finestra per vedere la composizione a dodici colonne adattarsi al layout verticale. ## Sistema di design CFPB Riferimento di progettazione Risorse compilate e modulo ES del pacchetto CFPB 5.10.2; linee guida pubbliche aggiornate sulle basi. La demo usa le classi Expandable native e JavaScript. Gli stili di base globali CSS sono copiati alla lettera dalla stringa degli stili di base del modulo pubblicato, con fallback ai font di sistema. Il valore font-size-adjust e l'interlinea dei titoli riportati sotto seguono il codice della versione, che differisce dalla tabella semplificata delle basi. Non si intende suggerire alcuna affiliazione né l'uso del logo CFPB. ### Colori e proprietà personalizzate effettive | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --black | #101820 | Testo predefinito; usa il verde come accento del marchio, non come colore predefinito del testo del corpo. | | --green | #20aa3f | Accento dell'intestazione slug e riferimento alla palette istituzionale. | | --pacific | #0072ce | Famiglia di colori per link e indicatori interattivi. | | --gray-5 / --gray-40 | #f7f8f9 / #b4b5b6 | Sfondo e bordo di Expandable in 5.10.2. | | --red / --gold | #d14124 / #ff9e1b | Palette di supporto; non sostituire con il solo colore le indicazioni di stato testuali. | ### Tipografia degli stili di base della versione | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Current brand font | Source Sans 3 | Avenir Next è stato sostituito nel luglio 2025; la demo usa il fallback system-ui del pacchetto. | | Body | 16px / 1.375 | Riquadro di riga da 22px con la dimensione predefinita del carattere root del browser. | | H1 | 34px / 1.25; weight 600 | 26px a <=600px; l'interlinea del codice è 42.5px su desktop. | | H2 | 26px / 1.25; weight 600 | 22px a <=600px. | | H3 / H4 | 22px weight 400 / 18px weight 500 | 18px / 16px sugli schermi piccoli; entrambi usano un'interlinea di 1.25. | | H5 | 14px / 1.25; weight 600 | Maiuscolo, spaziatura tra lettere di 1px. | | Normalization | base .517; step .0054 | Le proprietà personalizzate della versione applicano ai titoli aumenti progressivi della dimensione, diversamente da quanto indicato nella tabella semplificata delle basi. | ### Griglia, ritmo e intervalli reattivi | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Grid | 12 columns; 30px gutters | Modello di layout della documentazione; la demo compone una suddivisione editoriale 8/4. | | Maximum width | 1230px | Usa margini esterni reattivi invece di un'area dei contenuti a larghezza fissa. | | Edge spacing | 15px mobile; 30px tablet/desktop | Mantieni spazi leggibili sugli schermi stretti. | | Breakpoints | 0–600, 601–900, 901–1020, 1021–1200, 1201+ | varsBreakpoints esportate e verificate nel modulo 5.10.2. | | Text rhythm | 15px paragraph gap; 30px stacked headings | Spaziatura editoriale, non una dichiarazione dell'esistenza di una scala universale di token da 4px. | | Measure | 66 characters ideal; 45–90 range | Indicazioni tipografiche per la lettura continuativa; l'anteprima usa una larghezza massima di 66ch. | ### Struttura espandibile e comportamento in fase di esecuzione | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Root | o-expandable | Le modifiche allo sfondo e al bordo sono opzioni indipendenti e facoltative. | | Required descendants | __header, __label, __content | L’intestazione è un pulsante nativo. Il runtime aggiunge gli hook di comportamento e lo stato ARIA. | | Initialization | Expandable.init(container) | Restituisce le istanze inizializzate per gli elementi radice corrispondenti. | | Instance API | expand(), collapse(), isExpanded(), getLabelText() | Verificato sulla versione pubblicata 5.10.2, anziché su una voce di documentazione più datata relativa a toggleTargetState. | | Initial expanded state | o-expandable--onload-open | Impostare prima dell’inizializzazione; non contrastare manualmente le classi di visibilità del runtime. | | Group choice | o-expandable-group--accordion | Comportamento facoltativo con esclusione reciproca. L’anteprima consente intenzionalmente di confrontare i pannelli aperti. | ## Sistema di design CFPB Guida completa Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## 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. ```

Describe the document and the words you want explained.

``` 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 ### Un elemento Expandable nativo Struttura legacy obbligatoria, elementi decorativi e contenuto esplicativo facoltativo. ```

Describe the document and the words you want explained.

``` Riferimento del codice ### Inizializzare e controllare gli elementi a comparsa Usa il modulo 5.10.2 e le istanze restituite; gli stili globali di base sono una scelta separata. ``` npm install --save-exact @cfpb/cfpb-design-system@5.10.2 # 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: ``` Riferimento del codice - La versione pubblicata 5.10.2 è ESM. Non caricarla come script classico. - L’esempio usa gli stili di base del pacchetto estratti alla lettera e documentati nel file vendor SOURCE.md. ### Esempio autonomo completo Il documento completo include layout, controlli e inizializzazione. Estrai l’archivio di esempio collegato per ottenere gli esatti asset vendor relativi, quindi avvialo tramite HTTP. ``` CFPB reading worksheet specimen

Independent educational specimen · CFPB components

Make your question easier to answer

Use this reading worksheet to organize a question about an unfamiliar document. No information is submitted or saved.

Before a conversation

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.

Describe the document and the words you want explained.

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

Original practice content. This example does not provide financial advice or represent a CFPB service.

``` Riferimento del codice - Scarica l’esempio completo dalla sezione Fonti. Il README indica il comando esatto per avviarlo in locale. - Mantieni i percorsi vendor relativi a questo documento; l’archivio include tutti gli asset usati da questa anteprima. ## Sistema di design CFPB Configurazione dell’agente ### Punto di partenza per l’implementazione La demo locale esegue il modulo compilato nativo 5.10.2 e CSS. La procedura npm per copiare i file è fornita a chi sviluppa un progetto; le build da SCSS sorgente richiedono inoltre l’elaborazione delle icone documentata. L’archivio ZIP dell’esempio completo funzionante, disponibile in Sources, include anche le dipendenze esatte dell’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory, quindi apri http://localhost:8080/cfpb.html. Non aprire gli esempi basati su moduli tramite file://. ``` npm install --save-exact @cfpb/cfpb-design-system@5.10.2 # 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: ``` ### Un prompt per il tuo progetto ``` Crea una scheda editoriale didattica indipendente, ispirata al CFPB, usando il modulo Expandable effettivo della versione 5.10.2. Includi la struttura richiesta per intestazione, etichetta e contenuto, le azioni indipendenti per aprire e chiudere tutto e una normale lista di controllo con caselle di spunta i cui valori persistono quando si aprono o chiudono le sezioni. Usa una composizione a dodici colonne con rapporto 8/4, che si dispone in colonna sotto i 901px, margini laterali mobile di 15px e una larghezza di lettura di 66ch. Fornisci separatamente la tipografia di base dal componente CSS. Non aggiungere marchi identificativi del CFPB, consulenza finanziaria, invii fittizi o importazioni degli script classici per il bundle ESM. ``` ## Sistema di design CFPB Fonti e ambito Riferimento per un’implementazione indipendente. I componenti del pacchetto nativo non attestano alcuna affiliazione al CFPB. Contenuti didattici originali, senza consulenza finanziaria né invio; consulta TERMS.md prima del riutilizzo. - Caratteri Carattere corrente, normalizzazione e ritmo di lettura. - Intestazioni Gerarchia responsive delle intestazioni; confrontala con il codice versionato. - Colore Palette CFPB e indicazioni d’uso. - Griglia Dodici colonne, spazi tra colonne e larghezza massima. - Espansione Struttura del componente e varianti. - Installazione Integrazione del pacchetto e della build sorgente. - Token Ambito della pipeline di token più recente. - Scarica l’esempio completo e funzionante ZIP con HTML completo, dipendenze locali CSS/JavaScript, licenze fornite e istruzioni esatte per l’avvio. Non è necessario alcun passaggio di compilazione. ## Sistema di design CFPB Risorse correlate ### CMS sistema di design Implementa CMS Core con variabili del tema versionate, API reali del componente Review e un flusso funzionante di modifica e revisione che conserva le risposte dell’utente e il focus. ### Det Fælles Designsystem Esplora il tema DKFDS della Danimarca, le scale Sass effettive e i pattern accessibili per le tabelle con un confronto completo delle risorse, che include ordinamento numerico, ricerca inviata e recupero dallo stato vuoto. ### sistema di design .italia Implementa una sequenza di servizio leggibile con la tipografia reale di Bootstrap Italia, la struttura responsive di Stepper e uno stato locale del modulo ripristinabile. - [Riferimento per l’implementazione](https://cfpb.github.io/design-system/components/expandables) - [Fonte](https://cfpb.github.io/design-system/foundation/color) - [Fonte](https://cdn.jsdelivr.net/npm/@cfpb/cfpb-design-system@5.10.2/dist/index.js) - [Fonte](https://cfpb.github.io/design-system/foundation/grid) - [Leggi la specifica di supporto](https://cfpb.github.io/design-system/) - [Leggi la specifica di supporto](https://cfpb.github.io/design-system/foundation/fonts) - [Leggi la specifica di supporto](https://cfpb.github.io/design-system/foundation/color) - [Leggi la specifica di supporto](https://cfpb.github.io/design-system/foundation/grid) - [Riferimento del codice](https://cfpb.github.io/design-system/components/expandables) - [Leggi la specifica di supporto](https://cfpb.github.io/design-system/components/expandables) - [Leggi la specifica di supporto](https://cdn.jsdelivr.net/npm/@cfpb/cfpb-design-system@5.10.2/dist/index.js) - [Leggi la specifica di supporto](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project) - [Riferimento del codice](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project) - [Caratteri Carattere corrente, normalizzazione e ritmo di lettura.](https://cfpb.github.io/design-system/foundation/fonts) - [Intestazioni Gerarchia responsive delle intestazioni; confrontala con il codice versionato.](https://cfpb.github.io/design-system/foundation/headings) - [Colore Palette CFPB e indicazioni d’uso.](https://cfpb.github.io/design-system/foundation/color) - [Griglia Dodici colonne, spazi tra colonne e larghezza massima.](https://cfpb.github.io/design-system/foundation/grid) - [Espansione Struttura del componente e varianti.](https://cfpb.github.io/design-system/components/expandables) - [Installazione Integrazione del pacchetto e della build sorgente.](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project) - [Token Ambito della pipeline di token più recente.](https://cfpb.github.io/design-system/development/design-tokens)