Exemplo de comparação
Um território concentra o maior resultado do período
Valores ilustrativos para demonstrar ordem, proporção e destaque.
Base C203 aprovada em 2026-09-19 · revisões C205 e C206 aprovadas no gate em 2026-09-19.
O aceite C203 permanece intacto. A C205 revisa no lugar a CENA 02D — linha temporal de três séries — e supera a C204, que nunca foi certificada. A C206 revisa somente o rodapé compartilhado para ampliar a marca oficial. As duas são a fonte de verdade do port desde o gate humano de 2026-09-19.
A superfície desenhada é a imagem exportada — não uma tela de app. Os exemplos-base são deliberadamente genéricos; a variante de duas séries usa o caso fornecido de Vitória da Conquista. As peças fixam hierarquia, grid, tratamento de marca e limites do gerador.
REVISÃO VISÍVEL · C203
O débito NEEDS ASSET · LOGO OFICIAL foi resolvido: todo rodapé usa o arquivo oficial jorge-solla-positivo.png, sem lockup tipográfico recriado. A paleta provisória saiu; grid, headline-manchete, um único destaque, formatos e guardrails permanecem. Revisão aprovada no gate em 2026-09-19.
Variante certificada pelo designer de referência em 2026-09-19 e pronta para avaliação na tela renderizada. Ela não altera as cenas já aprovadas: só acrescenta a comparação vertical positiva, sem semântica de vencedor e perdedor. Sob a revisão C203, a paleta foi re-decidida: as duas colunas usam o vermelho oficial #e4102f. O dono do produto aprovou a peça final renderizada em 2026-09-19.
REVISÃO VISÍVEL · C205 · APROVADA NO GATE 2026-09-19
A CENA 02D troca bom/médio/neutro por bom/neutro/neutro escuro, usando apenas neutros oficiais além do vermelho do melhor resultado. A gutter passa de quatro para três linhas por bloco, com valor + variação na mesma linha e faixas mais arejadas. O último ponto segue jul/2026 observado, sem qualquer artefato de projeção. A CENA 02B preserva integralmente o par bom/ruim aprovado.
REVISÃO VISÍVEL · C206 · APROVADA NO GATE 2026-09-19
O ativo oficial 1037×595 permanece inteiro. A antiga moldura 286×90 era larga demais para a razão do PNG e fazia a imagem ocupar só cerca de 157×90 px. A C206 troca a moldura por caixas na mesma razão do ativo: 251×144 no feed, 192×110 no quadrado e 279×160 no story. O PNG passa a ocupar 100% dessas caixas com object-fit: contain; só a transparência nativa do arquivo permanece.
Feed · 1080×1350
brand-logo-frame 251×144; rodapé mínimo 171 px, padding-top 25 px, gap 30 px. Fonte/nota 27 px; nas linhas densas 02B/02D, 25 px.
Quadrado · 1080×1080
brand-logo-frame 192×110; rodapé mínimo 128 px, padding-top 16 px, gap 30 px. Fonte/nota 25 px. O porte menor protege a altura útil do canvas mais curto sem voltar à marca miúda da C203.
Story · 1080×1920
brand-logo-frame 279×160; rodapé mínimo 190 px, padding-top 28 px, gap 28 px. Fonte/nota 27 px; tudo termina acima da safe zone.
Compatibilidade: o crescimento é absorvido pelo espaço flexível antes do rodapé; não se altera headline, subtítulo, plot, escala, eixo ou gutter das CENAS 01, 02, 02B e 02D. O rodapé segue off-white, com filete #e7e5e4 e texto #57534e; o contraste e as margens laterais de 84 px permanecem.
CENA 01 · PADRÃO
Exemplo de comparação
Valores ilustrativos para demonstrar ordem, proporção e destaque.
CENA 02 · SISTEMA
Grid, tipografia, rodapé e uso de cor permanecem. Só o corpo do gráfico muda conforme a relação entre os dados.
Ranking com valores ilustrativos.
Barra · ranking
Categorias longas, leitura direta.
Quatro momentos ilustrativos.
Coluna · tempo curto
Poucos períodos, base comum em zero.
Até sete pontos, com rótulo no fim.
Linha · série temporal
Tendência contínua, ponto final destacado.
Sem gráfico quando há uma única medida.
unidades no período de exemplo
Número-âncora
Um valor grande + frase que explica.
Internações em Vitória da Conquista, 2017–2026.
Linha · duas séries
Tendências, valência redundante e projeção explícita.
CENA 02A · SÉTIMA VARIAÇÃO · SIGN-OFF HUMANO 2026-09-19
Comparação
Percentual das internações de 2025 de moradores da cidade
REGRAS DA COLUNA DUPLA POSITIVA
Entrada e semântica
Exatamente 2 categorias, um valor não negativo por categoria e confirmação explícita de que ambos são resultados positivos. Kicker fixo: “Comparação”. Se houver vencedor/perdedor, bom/ruim ou valência incerta, esta variante não se aplica: perguntar, nunca inferir.
Vermelho compartilhado · C203
Quando duas categorias forem igualmente positivas e sem hierarquia, ambas usam #e4102f: o vermelho codifica a valência boa compartilhada, não um vencedor; posição e rótulos diretos distinguem as categorias, sem criar um segundo vermelho. A posição preserva a ordem de entrada, nunca o maior valor. Sem classe highlight, sem cinza no plot e sem opacidade. O vermelho oficial contrasta com o papel acima de 3:1 (≈4,8:1).
Texto, contraste e redundância
column-value usa tinta #1c1917 sobre papel #faf9f7 (16,62:1). column-label usa #57534e sobre papel (7,25:1). Se algum formato futuro puser texto sobre as colunas, usar branco #fff: ≈4,8:1 sobre ambas.
Geometria e base zero
columns: 2 × minmax(0, 280 px), gap 26 px, altura 100%, padding-bottom 46 px e borda-base 3 px #a8a29e. Alturas proporcionais ao mesmo máximo e sempre partindo da base zero. Um valor por coluna; sem 3D, recorte ou eixo truncado.
Rótulos de categoria
Uma linha obrigatória, 30 px/650, white-space: nowrap, bottom −40 px. Para hospitais, remover apenas o substantivo comum já dito na manchete: “Hospital municipal/estadual” vira “Municipal/Estadual”. Se o qualificador ainda não couber em 280 px, pedir forma curta; nunca quebrar em duas linhas nem abreviar sozinho.
Mapa de classes
Reusar columns, column-cell, column-value, column e column-label. No estado positivo duplo, o container recebe dual-positive e as barras recebem positive-a / positive-b; não emitir highlight. Plot: 500 px de altura e margin-top 34 px no feed.
CENA 02B · VARIAÇÃO PRESERVADA
Comparação no tempo
AIH aprovadas por ano · Vitória da Conquista (BA) · 2017–2026
REGRAS DA LINHA DE 2 SÉRIES
Entrada e teto
Exatamente 2 séries e os mesmos rótulos temporais, na mesma ordem. Teto: 12 pontos por série no feed, quadrado e story (24 marcas no total). Barra/coluna continuam em 7 pontos no feed/quadrado e 5 no story. Contagem ou tempo desalinhado → perguntar; nunca interpolar, completar, repetir nem remover ponto. O domínio y é compartilhado e parte do zero real.
Bom × ruim · tons presentes
Tons entram sempre em par. Bom = #e4102f + círculo + ↑ “amplia”. Ruim = #78716c + quadrado + ↓ “recua”. No caso: Estadual é bom; Municipal é ruim. Vermelho é a cor oficial de destaque e aponta o caminho desejável; nunca significa perda. O ruim permanece neutro. Palavra, seta, forma e cor tornam a leitura redundante, não decorativa.
Sem tons · comparação neutra
Se nenhum tom vier informado, não inferir juízo: série A = #1c1917 + círculo; série B = #78716c + quadrado. Rótulos finais têm nome + valor e podem trazer a variação observada com sinal matemático, sem palavra valorativa. Sem setas ou “amplia/recua”; nenhum vermelho no plot — ele fica apenas na régua superior e na marca do template.
Kicker, rótulos e colisão
Kicker fixo: “Comparação no tempo”; não há legenda separada. Cada linha termina em bloco nome + valor + glifo/palavra + variação observada, tudo ≥30 px. O gutter começa 42 px após o ponto e tem 238 px. Cada bloco usa 4 linhas: nome, valor, valência e “±N% até AAAA” em uma linha. Leading interno ≥38 px; entre blocos, ≥40 px livres. Leaders de 3 px voltam ao ponto. Nunca esconder série. Nome quebra em até 2 linhas; se não couber, pedir forma curta, nunca abreviar sozinho.
Projeção
Só quando o último período for projetado: faixa neutra #a8a29e a 16% do meio do penúltimo→último passo até 33 px depois do ponto final; apenas esse segmento usa tracejado (feed/story 18 12; quadrado 15 11). Os dois marcadores finais preservam a forma e ficam vazados, com stroke 5 px. O rótulo projetado tem de ser o último ponto das duas séries. “projeção” fica no topo direito da faixa, não junto ao eixo nem misturada aos rótulos finais; a nota traz o método. Sem projeção: remover faixa, tracejado, palavra e ressalva automática.
Eixo X · 10 pontos anuais
Fonte 30 px, centralizada. Para 9–12 pontos, mostrar rótulos alternados, sempre o primeiro e o último; omitir o penúltimo se colidir com o último. Neste caso, exibir 2017, 2019, 2021, 2023 e 2026 — o rótulo final substitui 2025. A palavra “projeção” fica acima do período, nunca espremida no eixo.
Variação e cruzamento
Se o último ponto é projeção, a variação compara o primeiro valor ao último observado, nunca à projeção: aqui, +121% até 2025 no estadual e −23% até 2025 no municipal. O cruzamento confirmado recebe dual-crossing-*: anel no ponto estadual de 2024, guia tracejada até uma caixa de 3 linhas: “2024” / “Estadual” / “ultrapassa”. A copy permanece em 28 px; nunca comprimir em uma linha nem deixá-la tocar a borda. Sem confirmação textual do cruzamento, não gerar a anotação automaticamente.
Feed · 1080×1350
Canvas padding 76/84/58 px; headline 60 px; plot 880×620, margin-top 28. Plot L52, R280, T56, B76; dados x=52…600; baseline y=544; grid em y=56/300/544. Os 10 pontos ficam em x=52/113/174/235/296/356/417/478/539/600; a largura útil cai de 598 para 548 px, com passo anual de ~61 px, e o eixo alternado usa 52/174/296/417/600 (≥121 px entre rótulos). Linhas 8 px; círculos r=8; quadrados 16×16; finais r=11 / 20×20; dash 18 12. Gutter x=642…880; nomes/valência/variação 30 px, valores 36 px. Baselines finais: Estadual 54/96/136/176; Municipal 248/290/330/370. Cruzamento: guia x=478, y=160…398; caixa x=351, y=398, 254×118, rx=8; textos em y=431/465/497.
Quadrado · 1080×1080
Canvas padding 56/84/48 px; headline 54 px; encurtar subtítulo antes de reduzir texto. Plot 880×440, margin-top 20, L52, R280, T40, B70; dados x=52…600; baseline y=370; grid em y=40/205/370. Linhas 7 px; círculos r=7; quadrados 14×14; finais r=10 / 18×18; dash 15 11. Gutter x=642…880; textos 30 px, valores 32 px. Baselines finais: Estadual 32/70/108/146; Municipal 186/224/262/300. Cruzamento: guia x=478, y=115…252; caixa x=351, y=252, 254×108, rx=8; textos em y=282/311/340.
Story · 1080×1920
Faixas seguras de 250 px no topo e na base; conteúdo padding 306/84/310 px; headline 64 px. Plot 880×700, margin-top 28, L52, R280, T64, B78; dados x=52…600; baseline y=622; grid em y=64/343/622. Linhas 8 px; círculos r=8; quadrados 16×16; finais r=11 / 20×20; dash 18 12. Gutter x=642…880; nomes, valência e variação 32 px, valores 36 px. Baselines finais: Estadual 68/112/154/196; Municipal 280/324/366/408. Plot, caixa, rótulos e “projeção” ficam integralmente entre y=250 e y=1670 do canvas. Cruzamento: guia x=478, y=181…478; caixa x=351, y=478, 254×118, rx=8; textos em y=511/545/577.
Mapa de classes do SVG
Chassi: dual-line-plot, dual-axis-label, dual-projection-band e dual-projection-label. Com tons: dual-series-good / dual-markers-good e dual-series-bad / dual-markers-bad. Sem tons, trocar apenas os modificadores por dual-series-a / dual-markers-a e dual-series-b / dual-markers-b. Projeção acrescenta dual-series-projection e dual-marker-projected-*. Saída direta: dual-end-leader, dual-end-name, dual-end-value e, só com tons, dual-end-valence; variação observada em dual-end-change. Cruzamento, quando confirmado: dual-crossing-guide, dual-crossing-ring, dual-crossing-box, dual-crossing-year e dual-crossing-copy.
CENA 02D · REVISÃO C205 · C204 SUPERADA · APROVADA NO GATE 2026-09-19
Comparação no tempo
Vitória da Conquista (BA) · leitos existentes · 2015–2026
REGRAS DA LINHA DE 3 SÉRIES · C205
Extensão, entrada e teto
Esta variante estende a CENA 02B; não a substitui. Exatamente 3 séries, mesmos períodos e mesma ordem. Teto aprovado: 12 pontos por série no feed (36 marcas). É o limite exibido nesta cena: linha 7 px + passo mínimo 46 px deixam ≥26 px livres entre marcadores de 20 px. Acima de 12, período desalinhado ou valor ausente → perguntar; nunca apertar, interpolar ou omitir. Esta extensão não certifica quadrado nem story.
Mapa de tons · sem depender de cor
Bom/melhor = #e4102f + círculo r=8 + ↑ “amplia”. Neutro = #78716c + losango 14×14 rotado 45° + ↗ “cresce”. Neutro escuro = #1c1917 + triângulo ▼ 20×18 + ↘ “diminui”. Marcadores são preenchidos porque os 36 pontos são observados. Azul #184e92 fica só na marca/kicker/régua, nunca em dado.
Convivência com a CENA 02B
O contrato de 2 séries não muda: bom = vermelho/círculo/“↑ amplia”; ruim = #78716c + quadrado + ↓ “recua”; comparação sem tons também permanece. Na variante de 3 séries, losango + ↗ “cresce” distinguem o neutro municipal, e triângulo + ↘ “diminui” distinguem o neutro escuro privado. Não converter direção em juízo nem reaproveitar “recua” fora do tom ruim da CENA 02B.
Plot e escala · feed 1080×1350
Canvas padding 76 / 84 / 58; headline 56 px; subtítulo 27 px; plot margin-top 16. SVG viewBox 0 0 880 650. Dados: x=52…560, y=56…544; topo y=56; baseline y=544; grid y=56/300/544; domínio compartilhado 0…1.000. Gutter de texto x=600…880 (280 px), começando 40 px após o último ponto. Linhas 7 px. O corredor x=560…600 pertence só aos leaders; texto nunca invade o plot.
Gutter, leading e colisão
Cada bloco cai de quatro para três linhas: nome; valor + variação; seta + palavra. Fontes/line-box: nome 30/36 px; métrica 34/40 px; valência 30/36 px. Baselines: Privada 62/108/150, Estadual 258/304/346, Municipal 454/500/542. O pitch é 196 px; descontados os line-boxes, sobram 70+ px entre blocos. Ordenar pelo y do ponto final e alocar, nessa ordem, as três lanes fixas; nunca aproximar blocos para seguir o ponto.
Leaders e rótulos finais
Texto começa em x=600. Leader 3 px sai de x=570 no y do ponto, passa pelo trilho x=580, dobra em x=590 até o baseline da métrica e termina em x=594; sobra um respiro de 6 px antes do texto. Alvos: y=108/304/500. Como finais e blocos têm a mesma ordem, leaders não se cruzam. Nome em uma linha; se exceder 280 px, pedir forma curta — nunca reduzir abaixo de 30 px, quebrar ou abreviar sozinho. A métrica usa tabular-nums no formato literal “valor · ±N%”.
Eixo X · 12 pontos observados
Pontos em x= 52/98/144/191/237/283/329/375/421/468/514/560 (passo ≈46 px). Fonte 30 px. Para 9–12 pontos, manter a regra da 02B: alternar desde o primeiro; se o último não cair na alternância, remover o penúltimo exibido e fixar o último. Aqui: 2015, 2017, 2019, 2021, 2023, 2026. “2026” continua simples no eixo; “último ponto: jul/2026” fica na nota. Nunca anexar “projeção”.
Variação observada e ausência de projeção
A variação compara 2015 ao último ponto observado, jul/2026: Estadual 235→369 · +57%; Municipal 93→113 · +22%; Privada 832→510 · −39%. A gutter funde valor e variação e remove a palavra “observado”; a nota carrega a precisão mensal. Proibidos nesta cena: projection-band, tracejado, marcador vazado e label “projeção”.
Copy e fonte · literais desta cena
Manchete: “Hospital estadual puxa a ampliação de leitos de internação”. Subtítulo: “Vitória da Conquista (BA) · leitos existentes · 2015–2026”. Fonte: “Ministério da Saúde — CNES · leitos de internação por esfera jurídica”. Nota: “Último ponto: jul/2026. Rede privada = leitos empresariais + sem fins lucrativos.”
Mapa de classes da extensão
Chassi: triple-line-plot, triple-axis-label. Séries/marcadores: triple-series-good / triple-markers-good, triple-series-neutral / triple-markers-neutral e triple-series-neutral-dark / triple-markers-neutral-dark. Saída: triple-end-leader, triple-end-name, triple-end-metric e triple-end-valence. Reusar sem alteração no corpo: top-rule, chart-context, chart-headline, chart-subtitle, chart-footer. No rodapé, aplicar a C206: source-line ≥25 px e brand-logo-frame 251×144 no feed.
CENA 02C · SEXTA VARIAÇÃO · SIGN-OFF HUMANO 2026-09-19
Variação no período
Vitória da Conquista — número de equipes por tipo (2020 → jul/2026)
ADAPTAÇÃO STORIES · MESMA REGRA, SEM CORTAR CATEGORIA
O ranking certificado reduz para 5 pontos no story. Esta variante não reduz: um top-N apagaria a manchete “quatro dos sete”. O story recomprime a barra e o gap, mantém os dois números na gutter e exige a nota das categorias sem variação.
Variação no período
Vitória da Conquista — número de equipes por tipo (2020 → jul/2026)
REGRAS DA VARIANTE DE VARIAÇÃO (PROPOSTA DEGRADED)
Entrada, teto e ordem
N categorias com initial e final, 0 ≤ initial ≤ final. Máximo 7. Ordem: final desc (regra do ranking; empate por initial, depois rótulo). Nada de top-N, “Outros” ou corte silencioso: acima de 7 ou desalinhado, perguntar.
Tons e regra do vermelho
Par fixo: base = #a8a29e (0 → inicial), extensão = #d6d3d1 (inicial → final). O vermelho #c51414 não entra no plot; `highlight` não é aceito nesta variante. Sem `↑`/`↓`, sem “amplia/recua”, sem valência bom/ruim. O único vermelho é a régua superior e a marca.
Valores e zero
Gutter à direita com duas colunas alinhadas (“2020” e “jul/2026”), tabular-nums. Inicial em #57534e, final em #1c1917. Zero = borda esquerda de 2 px #78716c do track; sem eixo truncado. A extensão é exatamente proporcional (sem min-width): o número carrega o que a barra não alcança.
Feed · 1080×1350
Padding 76/84/58; headline 60 px; subtítulo 28 px; plot margin-top 30. Linha: label 292 / gap 20 / track / gutter 88 + 110; barra 53 px; gap 20; valores 31 px; cabeçalho 30 px. 7 categorias (2 linhas de rótulo, se preciso).
Quadrado · 1080×1080
Padding 56/84/48; headline 54 px; subtítulo 28 px; plot margin-top 24. Barra 42 px; gap 12; label 292; gutter 84 + 104; valores 30 px. Mantém as 7 categorias: se as duas linhas de rótulo não couberem, encurtar descriptor/headline ou sugerir feed — nunca top-N.
Story · 1080×1920
Faixas de 250 px; conteúdo padding 306/84/310; headline 64 px; plot margin-top 40. Barra 52 px; gap 22; label 292; gutter 88 + 110; valores 31 px. Mantém as 7 categorias (não reduz para 5); tudo entre y=250 e y=1670. Nota com as sem-variação obrigatória.
Fail-closed (proposto)
final < initial (retração) → recusar: uma barra de base zero não representa queda sem eixo negativo; sugerir a linha de 2 séries ou uma variante de retração a definir. initial ausente → perguntar. final ≤ 0 → recusar. Mais de 7 categorias → perguntar/agrupar. Sem source → recusar. Nada de interpolar, completar ou abreviar sozinho.
Mapa de classes proposto
Container: delta-grade; cabeçalho delta-head + delta-period; linha delta-row; rótulo delta-label (+ <b> para a sigla); trilho delta-track; base delta-base; extensão delta-ext (ausente quando inicial = final); valores delta-value initial / delta-value final. Modificador de linha sem extensão: is-flat (estado/aria; sem mudança visual — a ausência do delta-ext é a pista). Reaproveitados: top-rule, chart-context, chart-headline, chart-subtitle, chart-footer, source-line, brand-logo-frame e o PNG oficial inteiro.
CENA 03 · ADAPTAÇÃO
Exemplo de comparação
Valores ilustrativos para demonstrar hierarquia e proporção.
TOPO · 250 PX
Faixa reservada para chrome do Instagram, avatar e contexto. Nenhuma manchete, valor ou fonte entra aqui.
BASE · 250 PX
Faixa reservada para resposta, CTA e controles. O rodapé da peça termina acima dela.
MESMO SISTEMA, MAIS RESPIRO
A adaptação não estica o feed. Ela recompõe a hierarquia vertical, reduz um ponto do ranking e mantém título, rótulos, fonte e marca integralmente legíveis na zona central.
CENAS 04–05 · FAIL-CLOSED
Estados visíveis de recusa: o template não preenche lacunas nem força um tipo de gráfico inadequado.
A tabela recebida não deixa claro o período nem o que o valor representa. Nenhum número será completado por suposição.
Dado faltando ou ambíguo
Este conjunto tem mais de cinco categorias. O formato solicitado é recusado para não esconder diferenças pequenas.
As categorias ficam ordenadas, com rótulo direto e uma única ênfase. Se “parte de um todo” for essencial, reduza para até cinco grupos verificáveis.
Pizza com mais de 5 fatias
ANOTAÇÃO DE DESIGN · NÃO EXPORTAR
Título, plot, fonte e marca dentro desta largura segura.
Canvas
1080 px de largura. Feed 1080×1350; Stories 1080×1920.
Tipografia mínima
Headline ≥48 px; rótulos e valores ≥30 px no arquivo final.
Contraste
Texto ≥4.5:1; marcas de dado ≥3:1. Cor nunca é a única pista.
Escala honesta
Barras e colunas começam em zero. Sem 3D, perspectiva ou eixo truncado.
Densidade
Barra, coluna e linha simples: até 7 pontos. Exceção aprovada: linha de 2 séries, até 12 pontos alinhados por série. Revisão C205 aprovada: linha de 3 séries no feed, até 12 pontos alinhados por série (36 marcas). Story mantém 5 apenas para barra/coluna; C205 não certifica quadrado nem story.
Fundo e sinal
Off-white #faf9f7. Vermelho oficial #e4102f ocupa no máximo ~10% da peça; a régua de marca usa azul #184e92. Exceção estrita, ainda em gate: a cena 02A usa duas colunas vermelhas quando as duas categorias forem explicitamente positivas.
Rodapé e marca · C206 aprovada
Fonte/nota: 27 px no feed/story; 25 px no quadrado e nas cenas densas 02B/02D. Marca oficial inteira: 251×144 (feed), 192×110 (quadrado), 279×160 (story). Rodapé mínimo: 171/128/190 px, respectivamente. Sem recorte, distorção, recoloração ou lockup recriado.