Implemente a grade editorial, a tipografia atual e os componentes Expandables nativos do CFPB com uma planilha de leitura funcional, APIs de pacotes verificadas e limites de identidade explícitos.
Guia OpenDesign8 capítulos24 entradas de referênciaGuia de aplicação original
01
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.
CFPB 5.10.2 nativo CSS e Expandable JavaScript; extração literal do pacote base CSS, alternativa de fonte do sistema e conteúdo original da aplicação. · Referência de implementação
02
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.
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.
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.
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.
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.
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.
html
<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>
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.
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.
Instale a versão 5.10.2 e mantenha seu TERMS.md junto aos ativos servidos localmente.
Carregue o CSS do componente e os estilos-base globais escolhidos; configure as fontes explicitamente.
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.
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.
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.
html
<!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>
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.
04
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://.
bash / HTML
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>
Um prompt para seu projeto
Prompt para agente de IA
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.
05
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.
