Exemplo de comparação
Um território concentra o maior resultado do período
Valores ilustrativos para demonstrar ordem, proporção e destaque.
Aprovado no gate em 2026-09-19 — revisão C203 (marca e paleta oficiais do kit 1313).
O humano validou a substituição do lockup tipográfico pelo ativo oficial e o mapeamento de cor fixado aqui; este artefato é o registro do aceite visual e a fonte de verdade do port.
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.
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 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 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-lockup e asset-flag.
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; story mantém 5 apenas para barra/coluna.
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.