---
slug: infografico
nome: Infográfico
descricao: papel verde-menta quadriculado, discos chapados com contorno azul-marinho grosso, ícones de traço que se desenham, setas à mão e legenda manuscrita
familia: Marca e evento
versao: 1
quando:
  - "explicar um processo em 3 passos com ícones e setas"
  - "mostrar um dado ou estatística com gráfico de barras"
  - "reels educativo: como funciona, por que, quanto"
  - "resumo visual de um serviço ou método"
nao_serve:
  - "vídeo emocional, luxo ou sem dado nenhum (use luxo ou minimal)"
  - "tutorial de tela com cursor (use tutorial-tela)"
---

# Infográfico

Uma explicação desenhada em papel de prancheta. O chão é **verde-menta** (`#E9F5EE`) com **quadriculado fino**
deslizando e **marcas de esquadro nos cantos**. Tudo é **chapado, com contorno azul-marinho de 8–10 px**: discos
**coral, sol e teal**, barras grossas, ícones de traço que se **desenham sozinhos**. Os números são **Outfit 800
gigantes** (520 px) com contorno; as legendas e anotações são **à mão (Caveat)**, com rabisco sublinhado e seta
torta. Cada cena tem **um herói** (número, cadeia de passos, gráfico ou disco) e, no máximo, uma anotação de apoio.
Um passo da explicação por cena, com pausa depois do impacto.

## Como montar um vídeo com este kit

1. **Ache a história**: um número que prende, 3 passos (verbo curto, até 9 caracteres), um dado que muda no tempo (3–5 barras).
2. **Escolha as batidas** em `receita.json` (numero → processo → grafico → no → fecho). Pule as que o assunto não tem.
3. **Escreva o plano** (`plano.json`, formato de `exemplos/plano.json`). Ícones: `folha ciclo broto grafico check relogio pessoa engrenagem`.
4. **Renderize** com `<Montagem plano={...} />`.
5. **Confira** contra `regras/`: um herói por plano, margens ≥ 96 px, texto de passo fora do disco, 35–45% do quadro vazio.

## Elementos

| elemento | o que faz | batidas |
|---|---|---|
| `NumeroDestaque` | número de 520 px que conta, contorno marinho, rabisco e legenda manuscrita | numero, fecho |
| `CadeiaPassos` | 3 discos em zigue-zague ligados por setas que se desenham | processo |
| `GraficoBarras` | barras grossas que crescem com valor contando; a última é teal | grafico |
| `NoProcesso` | um passo como herói: disco de 560 px, ícone desenhado, selo de número | no |
| `Anotacao` | bilhete à mão que se escreve + setinha (o único apoio) | no, numero |
| `SetaCurva` | seta desenhada à mão entre dois pontos da tela | qualquer |
| `Icone` | 8 ícones de traço que se desenham | dentro dos outros ou solto |
| `Fundo`, `Camera`, `Cena` | prancheta quadriculada, câmera, troca por revelação | todas |
| `Efeito`, `Trilha` | sons e trilha do kit | todas |

## Proibido

- Mais de um herói por plano ou dois apoios; texto dentro de disco pequeno; margem < 96 px.
- Degradê, sombra com blur, brilho em letra, roxo-azul, fundo escuro, foto de banco.
- Dado inventado em uso real: o número do infográfico tem que ter fonte.
- Ícone sem contorno ou traço fino (< 7 px); seta que não se desenha.
- Texto fora da área segura (168–1330 px na vertical).