# Sistema de diseño CFPB ## Sistema de diseño CFPB Vista previa de la interfaz Abra las explicaciones nativas, mantenga una lista de comprobación aparte y restablezca el estado local. Cambie el tamaño para ver cómo se reorganiza la composición de doce columnas. ## Sistema de diseño CFPB Referencia de diseño Paquete CFPB 5.10.2 compilado CSS y módulo ES; orientación pública actual sobre la base. La demostración usa las clases nativas de Expandable y JavaScript. La hoja de estilos base global CSS se copia literalmente de la cadena de estilos base del módulo publicado, con una alternativa de fuentes del sistema. Los ajustes de tamaño de fuente y el interlineado de los encabezados que aparecen a continuación siguen el código versionado cuando difiere de la tabla de documentación. No se da a entender ninguna afiliación con CFPB ni se incluye su logotipo. ### Colores y propiedades personalizadas reales | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --black | #101820 | Texto predeterminado; use el verde como acento de marca, no como color predeterminado del texto del cuerpo. | | --green | #20aa3f | Acento del encabezado slug y referencia a la paleta institucional. | | --pacific | #0072ce | Familia de señales para enlaces e interacciones. | | --gray-5 / --gray-40 | #f7f8f9 / #b4b5b6 | Fondo y borde de Expandable en la versión 5.10.2. | | --red / --gold | #d14124 / #ff9e1b | Paleta complementaria; no represente el estado solo con el color. | ### Tipografía de los estilos base versionados | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Current brand font | Source Sans 3 | Sustituyó a Avenir Next en julio de 2025; la demostración usa la alternativa system-ui del paquete. | | Body | 16px / 1.375 | Caja de línea de 22px con el tamaño raíz predeterminado del navegador. | | H1 | 34px / 1.25; weight 600 | 26px en <=600px; el interlineado del código es de 42.5px en escritorio. | | H2 | 26px / 1.25; weight 600 | 22px en <=600px. | | H3 / H4 | 22px weight 400 / 18px weight 500 | 18px / 16px en pantallas pequeñas; ambos usan un interlineado de 1.25. | | H5 | 14px / 1.25; weight 600 | Mayúsculas, espaciado entre letras de 1px. | | Normalization | base .517; step .0054 | Las propiedades personalizadas versionadas aplican ajustes progresivamente mayores a los encabezados; esto difiere de la tabla simplificada de la base. | ### Cuadrícula, ritmo y rangos adaptables | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Grid | 12 columns; 30px gutters | Modelo de diseño de documentación; la demostración combina una división editorial de 8/4. | | Maximum width | 1230px | Use márgenes exteriores adaptables en lugar de contenido de ancho fijo. | | Edge spacing | 15px mobile; 30px tablet/desktop | Mantenga un espacio legible en pantallas estrechas. | | Breakpoints | 0–600, 601–900, 901–1020, 1021–1200, 1201+ | varsBreakpoints exportadas y verificadas en el módulo 5.10.2. | | Text rhythm | 15px paragraph gap; 30px stacked headings | Espaciado editorial, no una afirmación de que exista una escala universal de tokens de 4px. | | Measure | 66 characters ideal; 45–90 range | Recomendaciones tipográficas para lectura continua; la vista previa usa un máximo de 66ch. | ### Anatomía de Expandable y comportamiento en tiempo de ejecución | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Root | o-expandable | Los modificadores de fondo y borde son opciones independientes y opcionales. | | Required descendants | __header, __label, __content | El encabezado es un botón nativo. El tiempo de ejecución añade los hooks de comportamiento y el estado ARIA. | | Initialization | Expandable.init(container) | Devuelve las instancias inicializadas correspondientes a las raíces coincidentes. | | Instance API | expand(), collapse(), isExpanded(), getLabelText() | Verificado con la versión publicada 5.10.2, en lugar de basarse en una entrada de documentación antigua de toggleTargetState. | | Initial expanded state | o-expandable--onload-open | Establézcalo antes de la inicialización; no intente contrarrestar manualmente las clases de visibilidad del tiempo de ejecución. | | Group choice | o-expandable-group--accordion | Comportamiento mutuamente excluyente y opcional. La vista previa permite deliberadamente comparar varios paneles abiertos. | ## Sistema de diseño CFPB Guía completa Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Sistema de diseño CFPB Alcance de implementación de CFPB ### Información para el consumidor antes que decoración > CFPB combina una arquitectura de información editorial con componentes de formularios y divulgación. Su cuadrícula, jerarquía tipográfica y pequeños encabezados slug en mayúsculas son tan importantes como su característico verde. El ejemplo es una hoja de trabajo de lectura original: la orientación esencial permanece visible, mientras que las explicaciones opcionales usan Expandables nativos. No es una recomendación financiera, una presentación de queja ni un servicio gubernamental. El paquete es público, pero el sello gubernamental y la identidad de CFPB están sujetos a restricciones independientes. Reutilizar el código no convierte un servicio en oficial. Por eso, este ejemplo no incluye sello, logotipo, banner de sitio oficial ni una imitación de encabezado gubernamental. Consulta la especificación complementaria ## Sistema de diseño CFPB Tipografía y ritmo de lectura ### Source Sans 3 y diferencias entre versiones Las recomendaciones tipográficas actuales indican Source Sans 3, tras el cambio de Avenir Next en julio de 2025. El ejemplo local no depende de fuentes alojadas externamente y usa intencionadamente la alternativa de fuentes del sistema compilada. Una implementación real de marca debe proporcionar los archivos de fuente autorizados mediante el mixin de fuentes con licencia documentado. La tabla pública de encabezados y la cadena actual de estilos base no son idénticas. En el paquete 5.10.2, H1 tiene 2.125em y un interlineado de 1.25, lo que produce 34/42.5 con una raíz de 16px, en lugar de los 60px de altura de línea de la tabla. La referencia anterior sigue esa fuente ejecutable. La normalización de encabezados también usa ajustes por nivel; no conviertas la tabla simplificada en una anulación global. Procura que los párrafos tengan cerca de 66 caracteres y deja espacios de 15px entre ellos. Los encabezados usan mayúsculas de oración, excepto el tratamiento compacto de H5/slug. Así, un artículo de orientación se puede recorrer fácilmente sin obligar a convertir cada párrafo en una tarjeta. Consulta la especificación complementaria ## Sistema de diseño CFPB Color y enfoque editorial ### Usa el color según su función, no solo por ser verde El CSS compilado expone --black, --green, --pacific y las familias complementarias graduadas. El texto usa negro; Pacific aporta una señal de interacción más reconocible. El fondo gris claro de Expandable marca un límite de lectura, no un estado deshabilitado. Los encabezados slug nativos combinan una línea gris fina que ocupa todo el ancho con un segmento verde corto y más grueso. La hoja de trabajo deja intencionadamente en blanco su superficie de lectura principal. El verde aparece en el separador de sección, mientras que el recuento del progreso es texto normal y legible. Se puede entender que un elemento está terminado o marcado sin tener que distinguir el verde del rojo. La página no atribuye por defecto un significado de éxito o error a cada muestra de la paleta. - Usa --gray-5 para una superficie discreta en Expandable y --gray-40 para su contorno. - Haz que los enlaces se distingan por el subrayado o el tratamiento de interacción, además del tono. - Reserva las marcas de identidad para usos autorizados; una licencia de paleta no da permiso para insinuar afiliación. Consulta la especificación complementaria ## Sistema de diseño CFPB Doce columnas y una densidad práctica ### Un artículo con espacio para trabajar La cuadrícula documentada tiene doce columnas, medianiles fijos de 30px y un ancho máximo de 1230px. El espaciado exterior en móviles es de 15px; en diseños más amplios, de 30px. La vista previa traduce esto en un área de lectura de ocho columnas y una lista de verificación de trabajo de cuatro columnas a partir de 901px; por debajo de ese ancho, la lista se coloca debajo del artículo. Esta distribución es una composición de aplicación que utiliza la cuadrícula publicada, no una plantilla universal oficial para páginas. El texto largo mantiene su propio ancho máximo de 66ch aunque la página pueda ampliarse. Los botones se ajustan en varias líneas, y la barra lateral no tiene una altura fija ni un área de desplazamiento anidada. Al expandir una explicación, aumenta la altura normal del documento, por lo que la misma composición funciona en la vista previa integrada de la página de recursos. Consulta la especificación complementaria ## Sistema de diseño CFPB Estructura nativa de Expandable ### Mantén separados el activador y el contenido opcional Una raíz Expandable heredada contiene un botón __header, una etiqueta __label y una región __content. El botón es el destino del foco. En este ejemplo, un span proporciona su etiqueta, mientras que las señales decorativas de más/menos se ocultan del nombre accesible. La biblioteca asigna el estado expandido y los hooks de comportamiento durante la inicialización; la aplicación no duplica esos cambios. Los modificadores --background y --border proporcionan el tratamiento enmarcado. El modificador --padded ofrece una presentación más amplia, con una etiqueta proporcionalmente más grande; no es un requisito para cada elemento desplegable. Las instrucciones esenciales de la hoja de trabajo permanecen fuera del panel oculto, porque los lectores deben entender la tarea antes de abrir las explicaciones opcionales. ```

Describe the document and the words you want explained.

``` Referencia de código Consulta la especificación complementaria ## Sistema de diseño CFPB Comportamiento de los elementos desplegables y la lista de verificación ### Dos tipos de estado independientes La biblioteca nativa controla el estado de los elementos desplegables. La hoja de trabajo controla los valores normales de sus tres casillas de verificación y el recuento resultante. Abrir un panel no marca una tarea como completada, y marcar una tarea no contrae la información. Son modelos deliberadamente independientes: la visibilidad no demuestra que se haya comprendido el contenido. La instancia 5.10.2 expone expand, collapse e isExpanded. La página pública de Expandables incluye una referencia anterior a toggleTargetState, así que esta guía usa el API real de la versión indicada. Abrir todo y Cerrar todo recorren las instancias inicializadas. En este caso, es preferible que los paneles sean independientes, porque el lector puede querer comparar las dos explicaciones. La acción de restablecer borra los valores de todas las casillas de verificación y contrae los paneles mediante el API de la biblioteca. No genera una confirmación de envío. El progreso se anuncia mediante un elemento de estado cortés, sin desplazar el foco del teclado después de cada cambio en una casilla. Consulta la especificación complementaria ## Sistema de diseño CFPB Recursos compilados y estilos base ### Un módulo ES, no un script clásico Instala el paquete fijado en una versión, copia los dos recursos compilados en tu directorio estático e importa Expandable con un script de módulo. El index.js publicado de 5.10.2 contiene exportaciones ES, por lo que copiar una etiqueta de script clásico del ejemplo de integración anterior provocaría un error de sintaxis. Tampoco inicializa automáticamente las raíces Expandable heredadas. La hoja de estilos del componente, por sí sola, no contiene las reglas globales para encabezados y texto del cuerpo. Los proyectos de producción pueden compilar el SCSS base del paquete como se indica en la guía oficial de integración. Este ejemplo aislado, en cambio, conserva la cadena exacta de CSS base incrustada en el mismo módulo publicado, como archivo local documentado por separado. Esa extracción es una decisión local de empaquetado, no un nuevo punto de entrada publicado por CFPB. Si compilas SCSS de origen que contiene referencias a iconos, incluye el reemplazo SVG de PostCSS documentado por el proyecto. La instantánea compilada ya resuelve esas referencias. Evita inventar una configuración exclusiva de Sass que deje sin resolver --cfpb-background-icon-svg. 1. Instala la versión 5.10.2 y conserva su TERMS.md junto con los recursos servidos localmente. 2. Carga el CSS del componente junto con los estilos base globales elegidos; configura las fuentes explícitamente. 3. Usa una importación de módulo, inicializa el contenedor cuando exista su marcado y, después, asocia las acciones de la aplicación a las instancias devueltas. Consulta la especificación complementaria ## Sistema de diseño CFPB Verifica el flujo de lectura ### Un elemento desplegable no basta para evaluar la accesibilidad En pantallas estrechas, el título principal se reduce mediante los estilos base nativos y la lista de verificación aparece después del artículo. En pantallas de escritorio, la disposición en dos columnas muestra a la vez las notas de lectura opcionales y las de trabajo. Prueba ambas vistas con todos los paneles abiertos, no solo en estado contraído. Usa Tab para llegar a cada botón nativo y Enter o Espacio para alternar su estado. Confirma que la biblioteca actualice aria-expanded y que el contenido oculto ya no aparezca en el orden de tabulación. Después, marca dos tareas, abre y cierra todas las explicaciones y confirma que el recuento siga siendo dos hasta que lo reinicies. Estas pruebas detectan conflictos entre el estado de la aplicación y el de la biblioteca que no se aprecian en una captura de pantalla. Este ejemplo local no utiliza almacenamiento, analíticas, envío de datos por red ni datos personales reales. El uso de un componente nativo por sí solo no certifica el sitio resultante; el contraste, el contenido, la compatibilidad con navegadores y el comportamiento con tecnologías de asistencia todavía deben revisarse en el servicio que lo incorpore. Consulta la especificación complementaria ## Sistema de diseño CFPB Ejemplos de componentes del sistema de diseño ### Un componente Expandable nativo Estructura heredada obligatoria, indicadores decorativos y contenido explicativo opcional. ```

Describe the document and the words you want explained.

``` Referencia de código ### Inicializar y controlar los elementos desplegables Usa el módulo 5.10.2 y las instancias que devuelve; los estilos base globales se deciden por separado. ``` 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: ``` Referencia de código - La versión publicada 5.10.2 es ESM. No la cargues como un script clásico. - El ejemplo usa los estilos base del paquete extraídos sin modificaciones, documentados en el SOURCE.md del proveedor. ### Ejemplo independiente completo El documento completo incluye su estructura, controles e inicialización. Extrae el archivo de ejemplo enlazado para obtener los recursos del proveedor con sus rutas relativas exactas y luego sírvelo mediante 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.

``` Referencia de código - Descarga el ejemplo completo desde Fuentes. El README contiene el comando exacto para ejecutarlo en local. - Mantén las rutas de los recursos del proveedor relativas a este documento; el archivo incluye todos los recursos que utiliza esta vista previa. ## Sistema de diseño CFPB Configuración del agente de IA ### Punto de partida para la implementación La demostración local ejecuta el módulo compilado nativo 5.10.2 y CSS. La receta para copiar desde npm está pensada para un proyecto; las compilaciones desde SCSS de origen también requieren el procesamiento de iconos documentado. El ZIP completo del ejemplo funcional incluido en Sources también proporciona las dependencias exactas de la vista previa y el documento íntegro. Extráelo, ejecuta python3 -m http.server 8080 en ese directorio y, después, abre http://localhost:8080/cfpb.html. No abras ejemplos basados en módulos mediante 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: ``` ### Una instrucción para tu proyecto ``` Crea una hoja de trabajo editorial independiente inspirada en el CFPB, usando el módulo Expandable 5.10.2 real. Incluye la estructura obligatoria de encabezado, etiqueta y contenido, acciones independientes para abrir y cerrar todo, y una lista de tareas con casillas de verificación normales cuyos valores se mantengan al cambiar el estado de los elementos desplegables. Usa una composición de doce columnas en proporción 8/4 que se apile por debajo de 901px, márgenes móviles de 15px y un ancho de lectura de 66ch. Proporciona la tipografía base por separado del componente CSS. No añadas marcas de identidad del CFPB, asesoramiento financiero, envíos ficticios ni importaciones de scripts clásicos para el paquete ESM. ``` ## Sistema de diseño CFPB Fuentes y alcance Referencia de implementación independiente. Los componentes nativos del paquete no establecen afiliación con el CFPB. Contenido educativo original, sin asesoramiento financiero ni envío de datos; consulta TERMS.md antes de reutilizarlo. - Fuentes tipográficas Fuente actual, normalización y ritmo de lectura. - Encabezados Jerarquía de encabezados adaptable; compárala con el código versionado. - Color Paleta del CFPB y pautas de uso. - Cuadrícula Doce columnas, medianiles y ancho máximo. - Expandir Estructura y variantes del componente. - Instalación Integración del paquete y de la compilación desde el código fuente. - Tokens Alcance del flujo más reciente de tokens. - Descargar el ejemplo funcional completo Archivo ZIP con HTML completo, dependencias locales CSS/JavaScript, licencias incluidas e instrucciones exactas para ejecutarlo. No se requiere un paso de compilación. ## Sistema de diseño CFPB Recursos relacionados ### CMS sistema de diseño Implementa CMS Core con variables de tema versionadas, API reales del componente Review y un flujo funcional de edición y revisión que conserva las respuestas del usuario y el foco. ### Det Fælles Designsystem Explora el tema DKFDS de Dinamarca, las escalas Sass reales y los patrones accesibles para tablas mediante una comparación completa de recursos con ordenación numérica, búsqueda enviada y recuperación del estado vacío. ### sistema de diseño .italia Implementa una secuencia de servicios fácil de leer con la tipografía real, la estructura adaptable de Stepper y el estado de formulario local recuperable de Bootstrap Italia. - [Referencia de implementación](https://cfpb.github.io/design-system/components/expandables) - [Fuente](https://cfpb.github.io/design-system/foundation/color) - [Fuente](https://cdn.jsdelivr.net/npm/@cfpb/cfpb-design-system@5.10.2/dist/index.js) - [Fuente](https://cfpb.github.io/design-system/foundation/grid) - [Consulta la especificación complementaria](https://cfpb.github.io/design-system/) - [Consulta la especificación complementaria](https://cfpb.github.io/design-system/foundation/fonts) - [Consulta la especificación complementaria](https://cfpb.github.io/design-system/foundation/color) - [Consulta la especificación complementaria](https://cfpb.github.io/design-system/foundation/grid) - [Referencia de código](https://cfpb.github.io/design-system/components/expandables) - [Consulta la especificación complementaria](https://cfpb.github.io/design-system/components/expandables) - [Consulta la especificación complementaria](https://cdn.jsdelivr.net/npm/@cfpb/cfpb-design-system@5.10.2/dist/index.js) - [Consulta la especificación complementaria](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project) - [Referencia de código](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project) - [Fuentes tipográficas Fuente actual, normalización y ritmo de lectura.](https://cfpb.github.io/design-system/foundation/fonts) - [Encabezados Jerarquía de encabezados adaptable; compárala con el código versionado.](https://cfpb.github.io/design-system/foundation/headings) - [Color Paleta del CFPB y pautas de uso.](https://cfpb.github.io/design-system/foundation/color) - [Cuadrícula Doce columnas, medianiles y ancho máximo.](https://cfpb.github.io/design-system/foundation/grid) - [Expandir Estructura y variantes del componente.](https://cfpb.github.io/design-system/components/expandables) - [Instalación Integración del paquete y de la compilación desde el código fuente.](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project) - [Tokens Alcance del flujo más reciente de tokens.](https://cfpb.github.io/design-system/development/design-tokens)