# Système de design CFPB ## Système de design CFPB Aperçu de l’interface Ouvrez les explications natives, utilisez une liste de vérification distincte et réinitialisez l’état local. Redimensionnez la fenêtre pour voir la composition sur douze colonnes s’empiler. ## Système de design CFPB Référence de conception Package CFPB 5.10.2 compilé CSS et module ES; directives publiques actuelles sur les fondations. La démo utilise les classes Expandable natives et JavaScript. Le style de base global CSS est repris à l’identique de la chaîne de styles de base du module publié, avec une police système de remplacement. Les valeurs de font-size-adjust et l’interlignage des titres ci-dessous suivent le code de cette version lorsque le tableau de la documentation diffère. Aucun logo ni aucune affiliation à CFPB ne sont suggérés. ### Couleurs et propriétés personnalisées réelles | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --black | #101820 | Texte par défaut; utilisez le vert comme accent de marque, et non comme couleur du texte courant. | | --green | #20aa3f | Accent de l’en-tête de slug et référence à la palette institutionnelle. | | --pacific | #0072ce | Palette des liens et des éléments interactifs. | | --gray-5 / --gray-40 | #f7f8f9 / #b4b5b6 | Arrière-plan et bordure d’Expandable dans la version 5.10.2. | | --red / --gold | #d14124 / #ff9e1b | Palette complémentaire; ne remplacez pas les indications textuelles d’état par la couleur seule. | ### Typographie des styles de base versionnés | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Current brand font | Source Sans 3 | Avenir Next a été remplacée en juillet 2025; la démo utilise la police système system-ui de remplacement du package. | | Body | 16px / 1.375 | Corps de ligne de 22 px à la taille racine par défaut du navigateur. | | H1 | 34px / 1.25; weight 600 | 26 px à <=600px; la hauteur de ligne définie dans le code est de 42.5px sur ordinateur. | | H2 | 26px / 1.25; weight 600 | 22 px à <=600px. | | H3 / H4 | 22px weight 400 / 18px weight 500 | 18 px / 16 px sur les petits écrans; les deux utilisent un interlignage de 1.25. | | H5 | 14px / 1.25; weight 600 | Majuscules, espacement des lettres de 1 px. | | Normalization | base .517; step .0054 | Les propriétés personnalisées versionnées ajoutent des ajustements de plus en plus importants aux titres; cela diffère du tableau simplifié des fondations. | ### Grille, rythme et plages adaptatives | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Grid | 12 columns; 30px gutters | Modèle de mise en page de la documentation; la démo compose une répartition éditoriale 8/4. | | Maximum width | 1230px | Utilisez des marges extérieures adaptatives plutôt qu’un contenu de largeur fixe. | | Edge spacing | 15px mobile; 30px tablet/desktop | Préservez un espace de lecture suffisant sur les écrans étroits. | | Breakpoints | 0–600, 601–900, 901–1020, 1021–1200, 1201+ | varsBreakpoints exporté et vérifié dans le module 5.10.2. | | Text rhythm | 15px paragraph gap; 30px stacked headings | Espacement éditorial; il ne s’agit pas d’affirmer l’existence d’une échelle universelle de jetons de 4 px. | | Measure | 66 characters ideal; 45–90 range | Recommandations typographiques pour la lecture continue; l’aperçu utilise une largeur maximale de 66ch. | ### Anatomie et fonctionnement d’Expandable | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Root | o-expandable | Les modificateurs d’arrière-plan et de bordure sont deux options facultatives indépendantes. | | Required descendants | __header, __label, __content | L’en-tête est un bouton natif. Le fonctionnement ajoute des hooks et un état ARIA. | | Initialization | Expandable.init(container) | Renvoie les instances initialisées correspondant aux racines. | | Instance API | expand(), collapse(), isExpanded(), getLabelText() | Vérifié par rapport à la version publiée 5.10.2, et non à une entrée plus ancienne de la documentation toggleTargetState. | | Initial expanded state | o-expandable--onload-open | Définissez-le avant l’initialisation; ne tentez pas de neutraliser manuellement les classes de visibilité du fonctionnement. | | Group choice | o-expandable-group--accordion | Comportement mutuellement exclusif activé sur demande. L’aperçu permet volontairement de comparer plusieurs panneaux ouverts. | ## Système de design CFPB Guide complet Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## 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. ```

Describe the document and the words you want explained.

``` 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 ### Un composant Expandable natif Structure historique obligatoire, repères visuels et contenu explicatif facultatif. ```

Describe the document and the words you want explained.

``` Référence du code ### Initialiser et contrôler les panneaux de divulgation Utilisez le module 5.10.2 et les instances renvoyées ; les styles de base globaux constituent un choix distinct. ``` 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: ``` Référence du code - La version publiée 5.10.2 est au format ESM. Ne la chargez pas comme un script classique. - L’exemple utilise les styles de base du package, extraits à l’identique et documentés dans son fichier SOURCE.md fournisseur. ### Exemple autonome complet Le document complet comprend sa mise en page, ses contrôles et son initialisation. Extrayez l’archive d’exemple liée pour obtenir les ressources de fournisseur avec leurs chemins relatifs exacts, puis servez le contenu via 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.

``` Référence du code - Téléchargez l’exemple complet depuis les sources. Son fichier README indique la commande exacte pour le lancer localement. - Conservez des chemins relatifs pour les ressources de fournisseur par rapport à ce document ; l’archive contient toutes les ressources utilisées par cet aperçu. ## Système de design CFPB Configuration de l’agent ### Point de départ de l’implémentation La démo locale exécute le module compilé natif 5.10.2 et CSS. La recette de copie npm est destinée à un projet ; les compilations à partir du SCSS source nécessitent également le traitement des icônes documenté. Le ZIP complet de l’exemple fonctionnel, disponible dans les Sources, fournit aussi les dépendances exactes de l’aperçu et le document complet. Extrayez-le, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/cfpb.html. N’ouvrez pas les exemples basés sur des modules avec 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 pour votre projet ``` Créez une fiche de lecture éditoriale indépendante, inspirée du CFPB, qui utilise le véritable module Expandable 5.10.2. Incluez la structure obligatoire d’en-tête, de libellé et de contenu, des actions indépendantes pour tout ouvrir et tout fermer, ainsi qu’une liste de vérification à cases à cocher classiques dont les valeurs sont conservées lorsque les panneaux changent d’état. Utilisez une composition sur douze colonnes, réparties en 8/4, qui s’empile sous 901px, des marges mobiles de 15px et une largeur de lecture de 66ch. Fournissez la typographie de base séparément du composant CSS. N’ajoutez ni marque du CFPB, ni conseil financier, ni faux envoi, ni import de script classique pour le bundle ESM. ``` ## Système de design CFPB Sources et périmètre Référence d’implémentation indépendante. L’utilisation des composants natifs du package n’établit aucune affiliation avec le CFPB. Contenu pédagogique original, sans conseil financier ni envoi ; consultez TERMS.md avant toute réutilisation. - Polices Police actuelle, normalisation et rythme de lecture. - Titres Hiérarchie des titres adaptative ; comparaison avec le code versionné. - Couleurs Palette et recommandations d’utilisation du CFPB. - Grille Douze colonnes, gouttières et largeur maximale. - Expand Structure et variantes du composant. - Installation Intégration du package et de la compilation source. - Jetons Périmètre du pipeline de jetons le plus récent. - Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire. ## Système de design CFPB Ressources associées ### CMS système de design Implémentez CMS Core avec des variables de thème versionnées, les véritables API du composant Review et un flux fonctionnel de modification et de révision qui préserve les réponses saisies et le focus. ### Det Fælles Designsystem Découvrez le thème DKFDS du Danemark, ses véritables échelles Sass et ses modèles de tableaux accessibles grâce à une comparaison complète de ressources, avec tri numérique, recherche lancée à la validation et récupération après un résultat vide. ### système de design .italia Créez un parcours de services facile à suivre avec la véritable typographie de Bootstrap Italia, une structure Stepper adaptative et un état de formulaire local récupérable. - [Référence de mise en œuvre](https://cfpb.github.io/design-system/components/expandables) - [Source](https://cfpb.github.io/design-system/foundation/color) - [Source](https://cdn.jsdelivr.net/npm/@cfpb/cfpb-design-system@5.10.2/dist/index.js) - [Source](https://cfpb.github.io/design-system/foundation/grid) - [Consultez la spécification associée](https://cfpb.github.io/design-system/) - [Consultez la spécification associée](https://cfpb.github.io/design-system/foundation/fonts) - [Consultez la spécification associée](https://cfpb.github.io/design-system/foundation/color) - [Consultez la spécification associée](https://cfpb.github.io/design-system/foundation/grid) - [Référence du code](https://cfpb.github.io/design-system/components/expandables) - [Consultez la spécification associée](https://cfpb.github.io/design-system/components/expandables) - [Consultez la spécification associée](https://cdn.jsdelivr.net/npm/@cfpb/cfpb-design-system@5.10.2/dist/index.js) - [Consultez la spécification associée](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project) - [Référence du code](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project) - [Polices Police actuelle, normalisation et rythme de lecture.](https://cfpb.github.io/design-system/foundation/fonts) - [Titres Hiérarchie des titres adaptative ; comparaison avec le code versionné.](https://cfpb.github.io/design-system/foundation/headings) - [Couleurs Palette et recommandations d’utilisation du CFPB.](https://cfpb.github.io/design-system/foundation/color) - [Grille Douze colonnes, gouttières et largeur maximale.](https://cfpb.github.io/design-system/foundation/grid) - [Expand Structure et variantes du composant.](https://cfpb.github.io/design-system/components/expandables) - [Installation Intégration du package et de la compilation source.](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project) - [Jetons Périmètre du pipeline de jetons le plus récent.](https://cfpb.github.io/design-system/development/design-tokens)