# Sistema de design CFPB ## Sistema de design CFPB Prévia da interface Abra as explicações nativas, mantenha uma lista de verificação separada e redefina o estado local. Redimensione a janela para ver a composição de doze colunas se reorganizar. ## Sistema de design CFPB Referência de design Pacote CFPB 5.10.2 compilado CSS e módulo ES; orientações públicas atuais sobre a base. A demonstração usa classes nativas do Expandable e JavaScript. O CSS global base foi copiado literalmente da string de estilos base do módulo publicado, com uma alternativa de fonte do sistema. Os valores de font-size-adjust e entrelinha dos títulos abaixo seguem o código versionado quando há divergências em relação à tabela da documentação. Não há indicação de logotipo ou afiliação ao CFPB. ### Cores e propriedades personalizadas reais | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --black | #101820 | Texto padrão; use o verde como cor de destaque da marca, não como cor padrão do texto corrido. | | --green | #20aa3f | Destaque do cabeçalho slug e referência à paleta institucional. | | --pacific | #0072ce | Família de cores para links e elementos interativos. | | --gray-5 / --gray-40 | #f7f8f9 / #b4b5b6 | Plano de fundo e borda do Expandable na versão 5.10.2. | | --red / --gold | #d14124 / #ff9e1b | Paleta complementar; não substitua indicações de status textuais apenas por cores. | ### Tipografia dos estilos base versionados | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Current brand font | Source Sans 3 | Substituiu Avenir Next em julho de 2025; a demonstração usa a alternativa system-ui do pacote. | | Body | 16px / 1.375 | Entrelinha de 22px no tamanho padrão da raiz do navegador. | | H1 | 34px / 1.25; weight 600 | 26px em telas de até 600px; o código usa entrelinha de 42.5px em computadores. | | H2 | 26px / 1.25; weight 600 | 22px em telas de até 600px. | | H3 / H4 | 22px weight 400 / 18px weight 500 | 18px / 16px em telas pequenas; ambos usam entrelinha de 1.25. | | H5 | 14px / 1.25; weight 600 | Maiúsculas, espaçamento entre letras de 1px. | | Normalization | base .517; step .0054 | As propriedades personalizadas versionadas aplicam ajustes progressivamente maiores aos títulos; isso difere da tabela simplificada da base. | ### Grade, ritmo e intervalos responsivos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Grid | 12 columns; 30px gutters | Modelo de layout da documentação; a demonstração combina uma divisão editorial 8/4. | | Maximum width | 1230px | Use margens externas responsivas em vez de conteúdo com largura fixa. | | Edge spacing | 15px mobile; 30px tablet/desktop | Mantenha um espaço confortável para leitura em telas estreitas. | | Breakpoints | 0–600, 601–900, 901–1020, 1021–1200, 1201+ | varsBreakpoints exportado, verificado no módulo 5.10.2. | | Text rhythm | 15px paragraph gap; 30px stacked headings | Espaçamento editorial, não uma afirmação de que existe uma escala universal de tokens de 4px. | | Measure | 66 characters ideal; 45–90 range | Orientações tipográficas para leitura contínua; a prévia usa um limite máximo de 66ch. | ### Anatomia e comportamento em tempo de execução do Expandable | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Root | o-expandable | Modificadores de plano de fundo e borda são opções independentes e opcionais. | | Required descendants | __header, __label, __content | O cabeçalho é um botão nativo. O comportamento em tempo de execução adiciona ganchos e estados ARIA. | | Initialization | Expandable.init(container) | Retorna instâncias inicializadas para as raízes correspondentes. | | Instance API | expand(), collapse(), isExpanded(), getLabelText() | Verificado na versão publicada 5.10.2, não em uma entrada antiga da documentação de toggleTargetState. | | Initial expanded state | o-expandable--onload-open | Defina antes da inicialização; não tente substituir manualmente as classes de visibilidade em tempo de execução. | | Group choice | o-expandable-group--accordion | Comportamento mutuamente exclusivo, ativado por opção. A prévia permite deliberadamente comparar vários painéis abertos. | ## Sistema de design CFPB Guia completo Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Sistema de design CFPB Escopo da implementação do CFPB ### Informações para consumidores antes da decoração > O CFPB combina uma arquitetura de informação editorial com componentes de formulário e divulgação. Sua grade, hierarquia tipográfica e títulos de seção pequenos em letras maiúsculas são tão importantes quanto o verde característico. O exemplo é uma folha de leitura original: as informações essenciais permanecem visíveis, enquanto explicações opcionais usam Expandables nativos. Não se trata de uma recomendação financeira, do envio de uma reclamação nem de um serviço governamental. O pacote é público, mas o selo do governo e a identidade do CFPB têm restrições próprias. Reutilizar o código não torna um serviço oficial. Por isso, este exemplo não tem selo, logotipo, aviso de site oficial nem cabeçalho que imite o governo. Consulte a especificação de apoio ## Sistema de design CFPB Tipografia e ritmo de leitura ### Source Sans 3 e diferenças entre versões As orientações tipográficas atuais especificam Source Sans 3, após a mudança de Avenir Next em julho de 2025. O exemplo local não depende de fontes hospedadas externamente e usa deliberadamente a alternativa de fonte do sistema compilada. Uma implementação real da marca deve disponibilizar os arquivos de fontes autorizados por meio do mixin de fontes licenciadas documentado. A tabela pública de títulos e o texto atual do estilo-base não são idênticos. No pacote 5.10.2, H1 tem 2.125em e entrelinha de 1.25, resultando em 34/42.5 com uma raiz de 16px, em vez da altura de linha de 60px da tabela. A referência acima segue essa implementação executável. A normalização dos títulos também usa ajustes por nível; não transforme a tabela simplificada em uma substituição global. Mantenha os parágrafos próximos de 66 caracteres, com espaçamento de 15px. Os títulos usam caixa de frase, exceto o tratamento compacto de H5/slug. Assim, um artigo de orientação fica fácil de percorrer sem forçar cada parágrafo a caber em um cartão. Consulte a especificação de apoio ## Sistema de design CFPB Cor e composição editorial ### Use a função, não apenas o verde O CSS compilado expõe --black, --green, --pacific e as famílias de apoio graduadas. O texto usa preto; Pacific oferece uma indicação de interação mais reconhecível. O fundo cinza-claro de Expandable delimita a área de leitura, não indica um estado desativado. Os títulos slug nativos combinam uma linha cinza fina que ocupa toda a largura com um segmento verde curto e mais espesso. A atividade mantém intencionalmente sua principal superfície de leitura branca. O verde aparece no divisor de seção, enquanto a contagem de progresso é exibida como texto comum e legível. Um item concluído ou marcado continua compreensível sem depender da distinção entre verde e vermelho. A página não atribui arbitrariamente significados de sucesso ou erro a cada amostra da paleta. - Use --gray-5 para uma superfície expansível discreta e --gray-40 para seu contorno. - Diferencie os links por meio do sublinhado ou do tratamento de interação, além da cor. - Reserve as marcas de identidade para usos autorizados; a licença da paleta não é uma permissão para sugerir afiliação. Consulte a especificação de apoio ## Sistema de design CFPB Doze colunas e densidade funcional ### Um artigo com espaço de trabalho A grade documentada tem doze colunas, calhas fixas de 30px e largura máxima de 1230px. O espaçamento externo em dispositivos móveis é de 15px; em layouts maiores, é de 30px. A prévia traduz isso em uma área de leitura de oito colunas e uma lista de verificação de trabalho de quatro colunas a partir de 901px; abaixo dessa largura, a lista fica sob o artigo. Essa divisão é uma composição de aplicação que usa a grade publicada, não um modelo de página universal oficial. O texto longo mantém seu próprio limite máximo de 66ch, mesmo quando a página pode ficar mais larga. Os botões quebram linha, e a barra lateral não tem altura fixa nem região de rolagem aninhada. Ao expandir uma explicação, a altura normal do documento aumenta, de modo que a mesma composição funciona na prévia incorporada da página de recursos. Consulte a especificação de apoio ## Sistema de design CFPB Estrutura nativa de Expandable ### Mantenha o acionador e o conteúdo opcional separados Uma raiz Expandable legada contém um botão __header, um __label e uma região __content. O botão é o alvo de foco. Neste exemplo, um elemento span fornece seu rótulo, enquanto os sinais decorativos de mais e menos ficam ocultos do nome acessível. A biblioteca define o estado expandido e os ganchos de comportamento durante a inicialização; a aplicação não duplica essas alterações. Os modificadores --background e --border fornecem o tratamento com moldura. O modificador --padded oferece uma apresentação maior, com um rótulo correspondentemente maior; não é obrigatório para todas as divulgações. As instruções essenciais da atividade ficam fora do painel oculto, pois os leitores precisam entender a tarefa antes de abrir explicações opcionais. ```

Describe the document and the words you want explained.

``` Referência de código Consulte a especificação de apoio ## Sistema de design CFPB Comportamento de divulgação e lista de verificação ### Dois tipos independentes de estado A biblioteca nativa controla o estado das divulgações. A atividade controla os valores de suas três caixas de seleção comuns e a contagem resultante. Abrir um painel não marca uma tarefa como concluída, e marcar uma tarefa não recolhe informações. Esses modelos são intencionalmente separados: visibilidade não comprova compreensão. A instância 5.10.2 expõe expand, collapse e isExpanded. A página pública Expandables inclui uma referência antiga a toggleTargetState, por isso este guia usa o API da versão efetivamente utilizada. Abrir tudo e Fechar tudo percorrem as instâncias inicializadas. Painéis independentes são preferíveis neste caso, pois o leitor pode comparar as duas explicações. A ação de redefinição limpa todos os valores das caixas de seleção e recolhe os painéis por meio do API da biblioteca. Ela não cria uma confirmação de envio. O progresso é anunciado por um elemento de status educado, sem mover o foco do teclado após cada alteração em uma caixa de seleção. Consulte a especificação de apoio ## Sistema de design CFPB Ativos compilados e estilos-base ### Um módulo ES, não um script clássico Instale o pacote fixado, copie os dois ativos compilados para o diretório estático e importe Expandable com um script de módulo. O index.js publicado na versão 5.10.2 contém exportações ES; por isso, uma tag de script clássico copiada do exemplo de integração antigo causaria um erro de sintaxe. Ela também não inicializa automaticamente as raízes Expandable legadas. A folha de estilos do componente, por si só, não contém as regras globais de títulos e corpo do texto da página. Projetos de produção podem compilar o SCSS-base do pacote conforme mostrado no guia oficial de integração. Este exemplo isolado mantém, em vez disso, o texto exato do CSS base incorporado ao mesmo módulo publicado, em um arquivo local documentado separadamente. Essa extração é uma decisão local de empacotamento, não um novo ponto de entrada publicado do CFPB. Se você compilar SCSS de origem que contenha referências a ícones, inclua a substituição documentada de SVG do PostCSS do projeto. O pacote compilado já resolve essas referências. Evite inventar uma configuração exclusiva de Sass que deixe --cfpb-background-icon-svg sem resolução. 1. Instale a versão 5.10.2 e mantenha seu TERMS.md junto aos ativos servidos localmente. 2. Carregue o CSS do componente e os estilos-base globais escolhidos; configure as fontes explicitamente. 3. Use uma importação de módulo, inicialize o contêiner depois que sua marcação existir e, em seguida, associe as ações da aplicação às instâncias retornadas. Consulte a especificação de apoio ## Sistema de design CFPB Verifique o fluxo de leitura ### Uma divulgação não é a avaliação completa de acessibilidade Em telas estreitas, o título principal diminui conforme os estilos-base nativos, e a lista de verificação fica depois do artigo. Em telas de desktop, a disposição em duas colunas mostra lado a lado as notas opcionais de leitura e de trabalho. Teste as duas visualizações com todos os painéis abertos, não apenas no estado recolhido. Use Tab para acessar cada botão nativo e Enter ou Espaço para alterná-lo. Confirme se a biblioteca atualiza aria-expanded e se o conteúdo oculto deixa de aparecer na ordem de tabulação. Em seguida, marque duas tarefas, abra e feche todas as explicações e confirme se a contagem permanece em dois até que você redefina o formulário. Esses testes identificam conflitos de estado entre o aplicativo e a biblioteca que uma captura de tela não revela. Este exemplo local não usa armazenamento, análise de dados, envio pela rede nem dados pessoais reais. O uso de componentes nativos, por si só, não certifica o site resultante; o contraste, o conteúdo, a compatibilidade com navegadores e o comportamento com tecnologias assistivas ainda precisam ser avaliados no serviço que o adotar. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design sistema de design CFPB ### Um Expandable nativo Estrutura legada obrigatória, indicadores decorativos e conteúdo explicativo opcional. ```

Describe the document and the words you want explained.

``` Referência de código ### Inicializar e controlar os painéis de divulgação Use o módulo 5.10.2 e as instâncias retornadas; os estilos base globais são uma decisão à parte. ``` 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: ``` Referência de código - A versão 5.10.2 publicada é ESM. Não a carregue como um script clássico. - O exemplo usa os estilos base do pacote, extraídos sem alterações e documentados em seu SOURCE.md. ### Exemplo completo independente O documento completo inclui layout, controles e inicialização. Extraia o arquivo de exemplo indicado para obter os recursos do fornecedor no caminho relativo exato e, em seguida, disponibilize-o por 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.

``` Referência de código - Baixe o exemplo completo em Fontes. O README informa o comando exato para iniciá-lo localmente. - Mantenha os caminhos do fornecedor relativos a este documento; o arquivo inclui todos os recursos usados nesta prévia. ## Configuração do agente de IA sistema de design CFPB ### Ponto de partida para implementação A demonstração local executa o módulo compilado nativo 5.10.2 e CSS. A receita de cópia do npm é fornecida para uso em um projeto; compilações a partir do SCSS de origem também exigem o processamento de ícones documentado. O ZIP completo do exemplo funcional, disponível em Sources, também inclui as dependências exatas da prévia e o documento completo. Extraia os arquivos, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/cfpb.html. Não abra exemplos baseados em módulos usando 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: ``` ### Um prompt para seu projeto ``` Crie uma folha de exercícios editoriais independente, inspirada no CFPB, usando o módulo Expandable real da versão 5.10.2. Inclua a estrutura obrigatória de cabeçalho/rótulo/conteúdo, ações independentes para abrir tudo e fechar tudo e uma lista de verificação comum com caixas de seleção, cujos valores sejam mantidos ao alternar os painéis de divulgação. Use uma composição de doze colunas, na proporção 8/4, que se empilhe abaixo de 901px, margens laterais de 15px em dispositivos móveis e uma largura de leitura de 66ch. Forneça a tipografia base separadamente de CSS do componente. Não adicione elementos de identidade do CFPB, aconselhamento financeiro, envio fictício nem importações de script clássico para o pacote ESM. ``` ## Fontes e escopo sistema de design CFPB Referência de implementação independente. O uso de componentes nativos do pacote não estabelece afiliação com o CFPB. Conteúdo educacional original, sem aconselhamento financeiro ou envio; consulte TERMS.md antes de reutilizar. - Fontes Fonte atual, normalização e ritmo de leitura. - Títulos Hierarquia responsiva de títulos; compare com o código versionado. - Cor Paleta do CFPB e orientações de uso. - Grade Doze colunas, espaços entre colunas e largura máxima. - Expandir Estrutura e variantes do componente. - Instalação Integração do pacote e da compilação da origem. - Tokens Escopo do pipeline de tokens mais recente. - Baixar o exemplo completo funcional ZIP com HTML completo, dependências locais CSS/JavaScript, licenças incluídas e instruções exatas de inicialização. Não é necessário executar uma etapa de compilação. ## Recursos relacionados sistema de design CFPB ### CMS sistema de design Implemente o CMS Core com variáveis de tema versionadas, APIs reais do componente Review e um fluxo funcional de edição e revisão que preserve as respostas do usuário e o foco. ### Det Fælles Designsystem Explore o tema DKFDS da Dinamarca, as escalas Sass reais e os padrões acessíveis de tabela por meio de uma comparação completa de recursos, com ordenação numérica, busca enviada e recuperação do estado vazio. ### sistema de design .italia Implemente uma sequência de serviços legível com a tipografia real, a estrutura responsiva Stepper e o estado local recuperável de formulário do Bootstrap Italia. - [Referência de implementação](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) - [Consulte a especificação de apoio](https://cfpb.github.io/design-system/) - [Consulte a especificação de apoio](https://cfpb.github.io/design-system/foundation/fonts) - [Consulte a especificação de apoio](https://cfpb.github.io/design-system/foundation/color) - [Consulte a especificação de apoio](https://cfpb.github.io/design-system/foundation/grid) - [Referência de código](https://cfpb.github.io/design-system/components/expandables) - [Consulte a especificação de apoio](https://cfpb.github.io/design-system/components/expandables) - [Consulte a especificação de apoio](https://cdn.jsdelivr.net/npm/@cfpb/cfpb-design-system@5.10.2/dist/index.js) - [Consulte a especificação de apoio](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project) - [Referência de código](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project) - [Fontes Fonte atual, normalização e ritmo de leitura.](https://cfpb.github.io/design-system/foundation/fonts) - [Títulos Hierarquia responsiva de títulos; compare com o código versionado.](https://cfpb.github.io/design-system/foundation/headings) - [Cor Paleta do CFPB e orientações de uso.](https://cfpb.github.io/design-system/foundation/color) - [Grade Doze colunas, espaços entre colunas e largura máxima.](https://cfpb.github.io/design-system/foundation/grid) - [Expandir Estrutura e variantes do componente.](https://cfpb.github.io/design-system/components/expandables) - [Instalação Integração do pacote e da compilação da origem.](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project) - [Tokens Escopo do pipeline de tokens mais recente.](https://cfpb.github.io/design-system/development/design-tokens)