Design System de Imagens

Escopo: imagem estática (post, carrossel, story). Vídeo não entra aqui. Extraído por amostragem das peças já publicadas (carrossel do Crivella jul/2026 + post da Quaest 27/07/2026). Cores por análise de pixel; contrastes calculados em WCAG 2.1.

O conceito: duas camadas, sempre as duas

• Camada TABLOIDE — tarja de editoria, manchete gigante, fonte citada, número grande. Dá credibilidade: parece capa de jornal popular.
• Camada GIBI — balão de fala, onomatopeia, halftone, linhas de ação, contorno grosso, cor chapada. Dá licença para o deboche.

Teste: cubra a camada gibi → sobrou acusação seca de tabloide. Cubra a camada tabloide → sobrou meme genérico sem lastro. Se qualquer um dos testes passar sem estranheza, refaça.

Cor — os seis fundos canônicos (não existe sétimo)

Tinta #141414 · branco #FFFFFF.

Contraste (decoreba): amarelo, creme e verde → texto preto. Vermelho, preto e roxo → texto branco. Proibidos: branco sobre amarelo (1.38) · tinta sobre roxo (1.83) · amarelo sobre verde (2.55) · branco/amarelo sobre creme. Salvo-conduto: o contorno preto de 11–17px em display cria a própria borda de contraste — é por isso que "amarelo gigante sobre vermelho" funciona. Não vale para texto de corpo.

Regra da alternância (obrigatória em carrossel):

1. Nunca dois cards seguidos com o mesmo fundo.
2. Todo carrossel tem pelo menos um card claro (creme ou amarelo) no miolo.

Sequência de referência (Crivella): vermelho → preto → creme → roxo → verde → amarelo → preto → vermelho → amarelo.

Proibido: gradiente, glassmorphism, sombra suave, glow, bevel, neon, fundo liso sem textura. A sombra do sistema é dura e deslocada (20px 20px 0), nunca borrada.

Tipografia — seis vozes

Escala (base 2160×2700, exporta 1080×1350): D1 manchete de capa 280–340px · D2 manchete interna 200–260px · D3 sub/número 150–200px · D4 rótulo 100–130px · G1 onomatopeia 150–250px · T1 balão 50–60px · T2 corpo 40–48px · M1 ficha 28–34px. Piso absoluto: 28px.

O contorno é o sistema: D1/D2 → -webkit-text-stroke: 17px + sombra 20px 20px 0 rgba(0,0,0,.42); D3/D4 → 11–13px; onomatopeia → 12–16px; corpo → 0, nunca. Sempre com paint-order: stroke fill.

Máx. 3 famílias por peça. Display sempre em ALTA. Rotação −3° a +8° em tarjas, selos e onomatopeias (manchete fica reta). Números sempre em algarismo. ❌ itálico falso, texto em arco, letra espaçada, contorno em corpo.

Textura — nunca fundo liso

.dots halftone pop-art (ponto 8px em grid 46px, 15% preto) — padrão · .dots.claro (10%, para fundo claro) · .raios (linhas de ação radiais) · .listras (diagonais −45°) · .explosao. Moldura interna amarela (.moldura, 7px a 36px da borda) é assinatura do carrossel — deixou de ser obrigatória na v2.

Composição

As 4 batidas, nesta ordem: 1. CHAPÉU (tarja de editoria inclinada) → 2. MANCHETE (display gigante) → 3. PROVA (número, foto, fonte) → 4. ASSINATURA (@BENEVERSO · QUEREMOS BENEDITA SENADORA) — obrigatória em toda peça.

Densidade 20%–55% (fração de pixels que difere do fundo chapado; render.py mede e avisa). Capa e dado 40–55%; fecho e denúncia 20–30%. Exceção: painel de quadrinho (V4) 55–80%.

Foto: sempre recortada com outline preto de adesivo (raio ≈1.4% do menor lado) + sombra dura. Nunca retangular solta. A foto é nítida e real — o ar de HQ vem da diagramação, não de filtro. Nunca cobrir o rosto com colagem/tarja/onomatopeia. Nunca aplicar scrim (véu escuro) sobre a foto: se o texto não lê, mova o texto.

Componentes (todos em _kit/beneverso.css)

.tarja (editoria, −1.4°, Anton 56px) · .display.d1–d4 · .balao (borda 9px, rabicho) · .narracao (caixa amarela, +0.8°) · .onoma (Bangers, −9°) · .carimbo (preto, borda amarela dupla, +7°) · .hq-grid+.quadro (gutter branco 22px) · .hero-bar+.bar · .cutout · .assina (Anton 62px) · .fonte-rodape (Space Mono 29px, obrigatório com dado ou acusação).

Regra da barra de dado: o comprimento é sempre proporcional ao número real. O destaque vem de barra 3× mais grossa + cor amarela + nome dentro, não de esticar.

As seis variações (peças-base editáveis em variacoes/)

Sequência boa de carrossel: V1 → V3 → V5 → V3 → V4 → V6. Há ainda 6 variações v2 em variacoes_v2/ (pôster clássico, splash, quadro knockout, sangria tarja, capa offset, cinta offset).

Arquitetura de 3 camadas (não fazer design system por modelo)

1. LINGUAGEM = DESIGN_SYSTEM.md + _kit/beneverso.css. Uma só, muda raramente.
2. FORMATO = formatos/F01_sextou/, F02_boa_segunda/ (receita.json + template.html). Um por peça recorrente. Formato nunca redefine cor ou fonte.
3. EDIÇÃO = _kit/variar.py → a peça da semana. Sorteia fundo/textura/personagem/layout/frase sem repetir combinação recente; registra em edicoes.json (não repete nas 8 últimas edições).

Camada de FORMA (expansão v2, 11/08/2026)

Diagnóstico: a v1 variava conteúdo (frase, grito, personagem) e não forma — 30.720 combinações no papel, 3 caras na prática. Implementado em _kit/forma.css + motor _kit/peca.py (15 travas que corrigem sorteio ilegível):

Formatos 4:5, 1:1 e 9:16. Modo --carrossel N põe as regras de alternância em código. A v2 revoga a regra "uma cor de fundo por peça" → até 2 campos de cor.

Acervo de personagens em imagem estática

personagens/cutouts/ (recortes com outline, prontos) e personagens/hq/ (ilustrações). Foto real é primeira classe, não plano B do cartoon.

Três tratamentos que não se misturam na mesma peça: foto real + outline · HQ super-heroína · cartoon chibi.

Cada cutout tem um TOM registrado em personagens/_INDEX.md (leve / solene / épico / adversário) — é o que impede o motor de sortear bobagem (foto histórica de plenário não entra num "Sextou").

Cutouts disponíveis: bene_fofoca (mão na boca, rindo de canto — o mais "SERÁ?!" do acervo) · bene_desconfiada (mão no queixo) · bene_gargalhada · bene_sorriso · bene_corpo_inteiro (único de corpo inteiro; é o que as grades de sangria e pôster pedem) · bene_fe (mãos em prece) · bene_celular · bene_dedo_riste · bene_espanto · bene_cocar (P&B, solene) · bene_chibi · bene_sh (super-heroína) · crivella_serio. ⚠️ bene_3d_pixar.jpg é 3D → território de vídeo, evitar em estática.

Como produzir

cd "Beneverso_Vault/99_⚙️_Sistema/Design_System_Imagens/_kit"
python render.py                              # renderiza todas as variacoes/
python render.py ../variacoes/V2_dado.html    # uma peça só
python variar.py F01_sextou --n 3             # 3 opções de peça recorrente
python recorte.py --lote lote_estudio.txt     # rembg + outline de adesivo

Fontes ficam em _kit/fonts/ e carregam por @font-face relativo — o repo é autocontido. Bug conhecido, já corrigido: o Chrome headless precisa de --virtual-time-budget, senão fotografa antes das @font-face carregarem e a peça sai com as caixas e zero texto (intermitente, passa despercebido).

Checklist de aprovação (14 itens)

1. Tem as duas camadas (tabloide + gibi)? 2. Uma cor de fundo das seis, com textura?
2. Contraste conforme a tabela no corpo? 4. Display com contorno e sombra dura?
3. Máx. 3 famílias? 6. Todo texto ≥28px? 7. As 4 batidas? 8. Foto da Bené limpa (sem scrim, sem colagem no rosto)? 9. Densidade na faixa? 10. Dado ou acusação → fonte citada?
4. Assinatura em voz de fã? 12. Um só tratamento de personagem?
5. O tom do personagem combina com a peça? 14. Zero ativo do Benedita do Rio?

Linha vermelha — o que nunca entra numa peça do Beneverso

Do §7.6 do briefing. É a metade que interessa a quem faz peça daqui:

Em peça do Beneverso, NUNCA: Playfair Display · Archivo Black · Courier Prime · Shantell Sans · bege #EADDCA · vermelho #C81D16 · azul #184CD4 · fita crepe · furo de fichário · borda picotada · xerox de arquivo · estética de colagem/scrapbook · tarja em minúscula com ponto final.

(A metade espelhada — o que nunca entra numa peça do Benedita do Rio — está no design system daquele projeto, que é marca separada e não mora neste site.)

Original completo

Beneverso_Vault/99_⚙️_Sistema/Design_System_Imagens/ — DESIGN_SYSTEM.md (canônico), FORMA.md (expansão v2), FORMATOS.md (catálogo). O CSS executável está em _kit/beneverso.css e _kit/forma.css. Esta página transcreve a síntese feita em BRIEFING_COMPLETO_LADOB.md §6.