Système de design CFPB.

Système de design CFPB Portée de l’implémentation de CFPB

Informer les consommateurs avant de décorer

Le CFPB associe une architecture de l’information éditoriale à des composants de formulaire et de divulgation. Sa grille, sa hiérarchie typographique et ses petits intertitres en majuscules sont aussi importants que son vert familier. L’exemple est une fiche de lecture originale : les repères essentiels restent visibles, tandis que les explications facultatives utilisent les composants Expandables natifs. Il ne s’agit ni d’un conseil financier, ni du dépôt d’une plainte, ni d’un service gouvernemental.

Le package est public, mais le sceau du gouvernement et l’identité du CFPB font l’objet de restrictions distinctes. Réutiliser le code ne rend pas un service officiel. Cet exemple ne comporte donc ni sceau, ni logo, ni bannière de site officiel, ni en-tête imitant ceux du gouvernement.

Consultez la spécification associée

Système de design CFPB Typographie et rythme de lecture

Source Sans 3 et différences entre les versions

Les recommandations typographiques actuelles préconisent Source Sans 3, depuis le remplacement d’Avenir Next en juillet 2025. L’exemple local ne dépend d’aucune police hébergée à l’extérieur et utilise délibérément la police système de repli intégrée. Une implémentation réellement conforme à l’identité de marque doit fournir les fichiers de police autorisés au moyen du mixin de polices sous licence documenté.

Le tableau des titres publié et la chaîne de styles de base actuelle ne sont pas identiques. Dans le package 5.10.2, H1 mesure 2.125em avec une interligne de 1.25, soit 34/42.5 avec une racine de 16px, au lieu des 60px d’interligne indiqués dans le tableau. La référence ci-dessus suit cette source exécutable. La normalisation des titres applique aussi des ajustements propres à chaque niveau ; ne transformez pas le tableau simplifié en surcharge globale.

Limitez les paragraphes à environ 66 caractères et espacez-les de 15px. Les titres sont en casse de phrase, à l’exception du traitement compact des H5/intertitres slug. L’article de conseils est ainsi facile à parcourir, sans enfermer chaque paragraphe dans une carte.

Consultez la spécification associée

Système de design CFPB Couleurs et mise en forme éditoriale

Privilégiez le rôle, pas seulement le vert

CSS compilé expose --black, --green, --pacific et les familles complémentaires graduées. Le texte utilise le noir ; Pacific fournit un repère d’interaction plus reconnaissable. Le fond gris clair de l’Expandable délimite une zone de lecture et ne signale pas un état désactivé. Les intertitres slug natifs associent un fin trait gris sur toute la largeur à un court segment vert plus épais.

La fiche conserve délibérément en blanc sa principale surface de lecture. Le vert apparaît au séparateur de section, tandis que le décompte de progression reste un texte ordinaire, lisible. Un élément terminé ou coché reste compréhensible sans avoir à distinguer le vert du rouge. La page n’attribue pas arbitrairement une signification de réussite ou d’erreur à chaque nuance de la palette.

• Utilisez --gray-5 pour une surface discrète de contenu dépliable et --gray-40 pour son contour.
• Les liens doivent se distinguer par leur soulignement ou leur traitement interactif, et pas seulement par leur couleur.
• Réservez les marques d’identité aux usages autorisés ; une licence de palette n’autorise pas à laisser croire à une affiliation.

Consultez la spécification associée

Système de design CFPB Douze colonnes et une densité utile

Un article avec une marge fonctionnelle

La grille documentée comporte douze colonnes, des gouttières fixes de 30px et une largeur maximale de 1230px. Sur mobile, la marge extérieure est de 15px ; sur les mises en page plus larges, elle passe à 30px. À partir de 901px, l’aperçu utilise une zone de lecture de huit colonnes et une liste de vérification de quatre colonnes, puis place la liste sous l’article sur les écrans plus étroits. Cette répartition est une composition d’application fondée sur la grille publiée, et non un modèle de page universel officiel.

Les longs textes conservent leur largeur maximale de 66ch, même lorsque la page peut s’élargir. Les boutons passent à la ligne et la barre latérale n’a ni hauteur fixe ni zone de défilement imbriquée. Le dépliage d’une explication augmente la hauteur normale du document ; cette même composition convient donc à l’aperçu intégré à la page de ressources.

Consultez la spécification associée

Système de design CFPB Structure native d’Expandable

Séparez le déclencheur du contenu facultatif

La racine d’un Expandable hérité contient un bouton __header, un __label et une zone __content. Le bouton reçoit le focus. Dans cet exemple, un span sert de libellé, tandis que les signes décoratifs plus/moins sont masqués dans le nom accessible. Lors de l’initialisation, la bibliothèque attribue l’état d’expansion et les hooks de comportement ; l’application ne reproduit pas ces modifications.

Les modificateurs --background et --border appliquent le traitement encadré. Le modificateur --padded propose une présentation plus ample, avec un libellé proportionnellement plus grand ; il n’est pas requis pour chaque divulgation. Les consignes essentielles de la fiche restent à l’extérieur du panneau masqué, car les lecteurs doivent comprendre la tâche avant d’ouvrir les explications facultatives.

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

Référence du code

Consultez la spécification associée

Système de design CFPB Comportement des divulgations et de la liste de vérification

Deux types d’état indépendants

La bibliothèque native gère l’état des divulgations. La fiche gère les valeurs de ses trois cases à cocher ordinaires et le décompte correspondant. Ouvrir un panneau ne marque pas une tâche comme terminée, et cocher une tâche ne replie pas les informations. Ces modèles sont volontairement distincts : la visibilité ne prouve pas la compréhension.

L’instance 5.10.2 expose expand, collapse et isExpanded. La page publique d’Expandables mentionne une référence plus ancienne à toggleTargetState ; ce guide utilise donc la version réelle de API. Les commandes Tout développer et Tout réduire parcourent les instances initialisées. Ici, des panneaux indépendants sont préférables, car le lecteur peut vouloir comparer les deux explications.

L’action de réinitialisation efface toutes les valeurs des cases à cocher et replie les panneaux au moyen de API de la bibliothèque. Elle ne génère pas de confirmation de soumission fictive. La progression est annoncée dans une région de statut polie, sans déplacer le focus clavier après chaque changement de case.

Consultez la spécification associée

Système de design CFPB Ressources compilées et styles de base

Un module ES, pas un script classique

Installez le package épinglé, copiez les deux ressources compilées dans votre répertoire statique et importez Expandable au moyen d’un script de type module. Le fichier index.js publié pour 5.10.2 contient des exports ES ; une balise de script classique copiée de l’ancien exemple d’intégration provoquerait donc une erreur de syntaxe. Elle n’initialiserait pas non plus automatiquement les racines Expandable héritées.

La feuille de style du composant ne contient pas à elle seule les règles générales de titre et de corps de page. Les projets de production peuvent compiler le SCSS de base du package, comme indiqué dans le guide d’intégration officiel. Cet exemple isolé conserve plutôt la chaîne exacte de base CSS intégrée au même module publié, dans un fichier local documenté séparément. Cette extraction relève d’un choix de packaging local et ne constitue pas un nouveau point d’entrée publié par le CFPB.

Si vous créez du SCSS source contenant des références aux icônes, incluez le remplacement SVG PostCSS documenté pour le projet. L’instantané compilé résout déjà ces références. Évitez d’inventer une configuration Sass uniquement qui laisserait --cfpb-background-icon-svg non résolu.

1. Installez la version 5.10.2 et conservez son fichier TERMS.md avec les ressources servies localement.
2. Chargez le composant CSS ainsi que les styles de base globaux choisis ; configurez explicitement les polices.
3. Utilisez un import de module, initialisez le conteneur une fois son balisage présent, puis associez les actions de l’application aux instances renvoyées.

Consultez la spécification associée

Système de design CFPB Vérifier le parcours de lecture

Un panneau de divulgation ne suffit pas à vérifier l’accessibilité

À largeur réduite, les styles de base natifs adaptent le titre principal et la liste de vérification suit l’article. Sur ordinateur, la mise en page en deux colonnes présente côte à côte les notes facultatives de lecture et de travail. Testez les deux vues avec tous les panneaux ouverts, pas seulement à l’état fermé.

Utilisez Tab pour atteindre chaque bouton natif, puis Entrée ou Espace pour l’activer ou le désactiver. Vérifiez que la bibliothèque met à jour aria-expanded et que le contenu masqué n’apparaît plus dans l’ordre de tabulation. Cochez ensuite deux tâches, ouvrez et fermez toutes les explications, puis vérifiez que le compteur reste à deux jusqu’à la réinitialisation. Ces tests révèlent des conflits d’état entre l’application et la bibliothèque qu’une capture d’écran ne peut pas montrer.

Cet exemple local n’utilise ni stockage, ni analytique, ni envoi réseau, ni données personnelles réelles. L’utilisation du composant natif ne certifie pas à elle seule le site qui en résulte ; le contraste, le contenu, la prise en charge des navigateurs et le comportement avec les technologies d’assistance doivent encore être vérifiés dans le service qui l’adopte.

Consultez la spécification associée

Système de design CFPB Exemples de composants du système de design

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