Queremos Benedita senadora

Condensada, caixa alta, manchete. É o título padrão de página e de cartão.

SERÁ?!

Peso de cartaz. Use só em pedaço curto: selo, número, interjeição. Nunca em frase longa.

Texto corrido, descrição de cartão, legenda e tabela. É o que o body já usa por padrão — não precisa declarar.

.bnv-kicker — linha de apoio em caixa alta

Ementa de projeto de lei, fala de roteiro, markdown de guia. É o texto que a equipe LÊ por quarenta minutos, não o que ela bate o olho: um degrau acima do metadado, com a entrelinha folgada de parágrafo.

Prosa é 15px; metadado continua text-sm (14px). Rótulo, legenda, número e linha de tabela NÃO são prosa — não ponha esta classe neles. Os números não são novos: era text-[15px] copiado à mão nove vezes, em seis arquivos — oito delas com leading-relaxed ao lado, e uma sem —, e 1.625 é o valor exato do leading-relaxed do Tailwind, então a classe tem delta ZERO de pixel para as oito. Migrou components/md.tsx em 24/08/2026 e, em 26/08/2026, /pautas, /producao, /projetos e /timeline. Sobra UMA à mão, em /roteiros: lá o text-[15px] vem SEM leading-relaxed, então a troca GANHA entrelinha e muda a altura do texto na tela — decisão de olho, não troca de nome.

Tons

• vermelho — a ação principal da tela. Uma por tela: salvar, criar, baixar tudo.
• ouro — acréscimo. É o + Alguma coisa do cabeçalho.
• papel — ação secundária de igual peso: cancelar, copiar, fechar (padrão).
• fantasma — ação de lista ou navegação. Sem peso em repouso, ganha borda e sombra quando o mouse encosta. É o tom da barra de cima e das listas laterais, onde dez botões sólidos viram ruído.

Tamanhos

sm é para ação secundária DENTRO de um cartão (“editar”, “copiar”): sombra de 2px em vez de 3px, para não competir com o cartão que a contém. Não existe tamanho “xs” — se não coube, o botão não devia estar ali.

Botão que é link

Com href vira <Link> do Next em rota interna e <a> em URL externa (nova aba, rel=noreferrer) ou com download — asset estático não passa pelo router. Nos dois casos continua focável por teclado, com o mesmo foco vermelho do Cartao.

• rotulo põe o texto em .bnv-kicker e embrulha o campo num <label> — sem htmlFor, sem id inventado e sem rótulo órfão.
• Largura é sempre 100% do container. Para um campo estreito, aperte o container (<div className="w-24">) — um w-24 no className seria ignorado, pela mesma regra de cascade do Botao.
• Altura de textarea (min-h-20) e margem (mb-5) passam normalmente pelo className: .bnv-campo não define nenhuma das duas.
• 16px de fonte, e o número é de celular, não de gosto: o Safari do iPhone dá zoom sozinho em campo com fonte menor que 16px. Eram 14px, e o layout saltava a cada toque para escrever.
• 44px de altura mínima em input e select — o mesmo piso de toque do .bnv-botao. Medidos em 375×812, os input davam 36px e os select, 32px, e select de 32px no dedo erra muito. O textarea fica de fora: ele cresce por rows e min-h-*, e um piso ali brigaria com o className — foi assim que a caixa de “copie com Ctrl+C” do briefing encolheu de 160px para 63px, calada, na primeira tentativa desta regra.
• Foco: a borda vira vermelha. Nunca tire isso — é o único sinal de foco.
• required escreve obrigatório no rótulo (por extenso, não um asterisco) e min/max limitam o campo numérico. Fora da faixa, a borda acende em :user-invalid — depois que a pessoa mexeu, nunca no formulário em branco. É aviso, não trava: quem barra de verdade é a server action, que relê a mesma faixa. Sai do schema de lib/editavel.ts, então não se redigita campo por campo.

Neutro — sem cor de tema

O padrão. Pílula vazada com borda de tinta em repouso; marcada, ela vira preenchimento sólido com texto claro. O primeiro item é sempre o “tudo” do grupo — filtro sem escape não é filtro, é armadilha.

Cor por item

Quando a categoria tem cor (os temas da linha do tempo), passe cor no item — qualquer cor CSS, inclusive var(--ceu-600). Ela vira a borda em repouso, o preenchimento quando marcada, e acende o pontinho marcador. Item sem cor não ganha ponto: o ponto é legenda de cor, não sinal de estado.

Sem rótulo visível

rotulo é obrigatório e vira o kicker acima do grupo. Com ocultarRotulo ele some da tela mas continua sendo o aria-label do grupo — nunca existe grupo anônimo.

Como se escreve

<Filtro
  rotulo="Tema"            // obrigatório: kicker + aria-label do grupo
  ocultarRotulo            // opcional: só o aria-label
  className="mb-6"         // opcional: posição e largura do bloco
  valor={solo}             // o item marcado agora
  onChange={(v) => setSolo(v)}
  itens={[
    { valor: null, rotulo: "Todos os temas" },
    { valor: "leis", rotulo: "Leis & conquistas", cor: "var(--verde-600)" },
  ]}
/>

• valor pode ser null — é como se escreve o item “todos” sem inventar uma string sentinela.
• onChange dispara com o valor clicado mesmo se ele já estiver marcado. Quem quiser “clicar de novo para desmarcar” resolve no próprio handler ((v) => setSolo(v === solo ? null : v)) — o componente não adivinha.
• É role="radiogroup" com aria-checked, e não um punhado de aria-pressed: a seleção é única e sempre há um marcado, então o leitor de tela tem que ouvir “1 de 6”, não seis interruptores soltos. Vem junto o que o papel de rádio exige — o grupo é uma parada de tabulação e as setas (mais Home/End) andam por ele.
• O estado marcado não depende de matiz: ele inverte a luminância (sólido + texto claro contra vazado + texto escuro). Continua legível em escala de cinza.

Só o título

Com marcador e contagem

Como se escreve

<section className="mt-10">
  <CabecalhoSecao
    marcador="✕"                   // número, ✕ ou letra — sai em Bungee vermelho
    emoji="🎬"                     // marcador que é emoji: maior, aria-hidden
    titulo="Fora do acervo"
    grande                         // text-2xl em vez de text-xl
    direita={<Etiqueta>12</Etiqueta>}
  />
  …
</section>

• Ele não envolve a <section>: cada tela decide id e espaçamento de topo — e esses variam de verdade entre elas. O scroll-mt saiu desta lista em 24/08/2026: a folga da barra grudenta virou html { scroll-padding-top: 6rem } e vale para toda âncora do site. Não reescreva a classe na tela — scroll-padding e scroll-margin SOMAM.
• flex-wrap é padrão e não é opção: sem ele a contagem empurra o título para fora da tela no celular.
• direita quase sempre é uma Etiqueta com a contagem — e a contagem é derivada, nunca digitada.

Quatro colunas, com link

Três colunas, sem link

Dentro do <dl> que fecha o cartão

Fonte

Agência Senado · Flickr, 2018

Checagem

Crédito conferido no metadado do arquivo, não deduzido do nome.

Arquivo

public/acervo/alta/bene-constituinte.jpg · 2400×1600 px

Como se escreve

<dl className="bnv-filete mt-3 space-y-1.5 pt-3">
  <LinhaDl rotulo="No disco">
    <Caminho>{item.caminho}</Caminho>
  </LinhaDl>
</dl>

• Ela não traz o <dl>: quem decide o filete, o espaçamento e o [overflow-wrap:anywhere] é o cartão em volta. Mesmo princípio da CabecalhoSecao, que não envolve a <section>.
• O rótulo não quebra (shrink-0) e o valor quebra em qualquer lugar (break-words + min-w-0) — é isso que impede um caminho de disco longo de estourar a largura do cartão.
• O pt-[1px] do rótulo é deliberado: o kicker tem 10px e o valor 12px, e sem o pixel a caixa alta flutua acima da linha de base do texto ao lado.

Abrindo a página — sem margem de topo

Depois de uma fileira de etiquetas — com className

Como se escreve

<BlocoDestaque titulo="Onde o trabalho está">   // abre a página
<BlocoDestaque className="mt-6" titulo="…">      // vem depois de algo

• p-4 e bnv-card-destaque são congelados — eram 9 de 9, byte a byte. O className serve só para a margem externa: ela é da página, não da caixa.
• O título sai sempre como <h2> em text-xl — era 8 de 9.
• O nono caso, o “Cânone — não contrarie” de /universo, ficou de fora de propósito: ali o título é <h3>/text-lg e a caixa vive dentro de uma grade de duas colunas. É caixa de destaque de COLUNA, não de abertura de página.
• Não confunda com a CabecalhoSecao: aquela é a régua que separa blocos da PÁGINA; esta é um cartão. A regra de triagem entre as duas está escrita em components/bnv/cabecalho-secao.tsx e virou máquina na seção 34 do npm test.

Partição — as fatias fecham em 100%

É a forma da tira do /equipe: os três estados de noSite particionam o catálogo, então o trilho nunca aparece. Os números abaixo são de exemplo — os de verdade estão no painel, e saem de contagemNoSite(). Copiá-los para cá só trocaria um número congelado por outro, e obrigaria a reeditar esta página a cada item novo do catálogo.

Progresso — o trilho é o que falta

É a forma da barra de aprovação de /roteiros/<slug>: as duas fatias somam MENOS que o total de propósito, e o pedaço de bg-papel-inset que fica sem pintura é o pendente. Os números também são de exemplo — cada roteiro tem os seus, e eles vêm de contarAprovados().

Os cinco tons

Como se escreve

<Barra
  className="mt-2"                       // margem externa, e SÓ ela
  total={ITENS.length}                   // o denominador, declarado
  rotulo={/* a frase do aria-label */}
  fatias={ESTADOS.map((e) => ({
    chave: e,
    valor: catalogo[e],
    tom: SELO_SITE[e].tom,               // o tom vem de lib/rotulos.ts
  }))}
/>

• O tom nunca é escrito à mão. Ele vem de lib/rotulos.ts — SELO_SITE[e].tom no painel, ESTADO_APROVACAO.aprovado.tom no roteiro. A tradução tom → classe de fundo mora dentro da primitiva, literal, porque o JIT do Tailwind não enxerga bg-${tom} montado em runtime.
• total é prop, e não fatias.reduce(…): derivar o total da soma encheria a barra do roteiro até 100% e apagaria justamente o dado que aquela tela mostra — o quanto ainda falta.
• Ela é role="img", então rotulo é obrigatório: sem ele a barra é uma imagem muda. Cada tela escreve a sua frase porque as duas contam coisas diferentes.
• A geometria (h-2, rounded-bnv-sm, overflow-hidden, o trilho) é congelada — era byte a byte igual nos dois usos. O className serve só para a margem externa, mesma regra do BlocoDestaque.
• Não foi a CONTAGEM de cópias que justificou a primitiva — não existe “regra da terceira cópia” nesta casa, e o MAPA.md diz isso com todas as letras. Foi a DIVERGÊNCIA: em 27/08/2026 o wrapper ainda era idêntico, mas o roteiro pintava bg-verde/bg-vermelho à mão enquanto ESTADO_APROVACAO já declarava esses dois tons ao lado. Uma das cópias tinha começado a mentir.