diff --git a/docs/plans/graficos-dados-instagram-ui-design.html b/docs/plans/graficos-dados-instagram-ui-design.html index 93564a6b..11ddd6a3 100644 --- a/docs/plans/graficos-dados-instagram-ui-design.html +++ b/docs/plans/graficos-dados-instagram-ui-design.html @@ -9,10 +9,14 @@ @theme inline { --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - --color-solla: #c51414; - --color-brand-dark: #ae1603; - --color-pt-red: #a21c1c; - --color-pt-yellow: #ffe607; + /* Paleta oficial do kit 1313, mapeada por semântica (ver card "Mapeamento semântico"). */ + --color-solla: #e4102f; /* destaque único + valência boa */ + --color-brand-dark: #184e92; /* sinal/régua de marca, kicker, texto de marca auxiliar */ + --color-brand-blue: #184e92; + --color-pt-red: #e4102f; + --color-brand-yellow: #ffeb00; /* só dentro do ativo oficial; nunca texto/eixo/dado */ + --color-pt-yellow: #ffeb00; + --color-brand-green: #009647; /* só dentro dos ativos oficiais */ --color-ink: #1c1917; --color-quiet: #6b7280; --color-hairline: #e7e5e4; @@ -20,10 +24,13 @@ } :root { - --solla: #c51414; - --brand-dark: #ae1603; - --pt-red: #a21c1c; - --pt-yellow: #ffe607; + --solla: #e4102f; /* #e4102f — destaque único e valência boa */ + --brand-dark: #184e92; /* #184e92 — sinal/régua, kicker, texto de marca auxiliar */ + --brand-blue: #184e92; + --pt-red: #e4102f; + --brand-yellow: #ffeb00; /* #ffeb00 — só dentro do ativo oficial */ + --pt-yellow: #ffeb00; + --brand-green: #009647; /* #009647 — só dentro dos ativos oficiais */ --ink: #1c1917; --quiet: #6b7280; --hairline: #e7e5e4; @@ -123,7 +130,7 @@ width: 64px; height: 10px; margin-bottom: 34px; - background: var(--solla); + background: var(--brand-blue); } .chart-context { margin: 0 0 18px; @@ -205,46 +212,23 @@ color: var(--ink); font-weight: 750; } - .brand-lockup { + /* Ativo oficial do kit (jorge-solla-positivo.png): exibido inteiro, sem recorte e sem + distorção. O arquivo é o lockup do nome; nunca recriar o lockup com tipografia. */ + .brand-logo-frame { + width: 286px; + height: 90px; + flex: 0 0 286px; display: flex; align-items: center; - gap: 13px; - min-width: 286px; justify-content: flex-end; } - .brand-signal { - width: 12px; - height: 48px; - background: var(--pt-yellow); - } - .brand-name { - color: var(--brand-dark); - font-size: 29px; - line-height: 0.88; - font-weight: 900; - letter-spacing: -0.045em; - } - .brand-office { - margin-top: 7px; - color: #57534e; - font-size: 17px; - line-height: 1; - font-weight: 750; - letter-spacing: 0.04em; - } - .asset-flag { - position: absolute; - right: 18px; - bottom: 12px; - padding: 5px 7px; - border: 2px dashed #78716c; - border-radius: 5px; - color: #44403c; - background: rgb(250 249 247 / 94%); - font-size: 13px; - line-height: 1; - font-weight: 800; - letter-spacing: 0.04em; + .brand-logo-frame img { + display: block; + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; + object-fit: contain; } .mini-canvas { @@ -263,7 +247,7 @@ width: 22px; height: 4px; margin-bottom: 11px; - background: var(--solla); + background: var(--brand-blue); } .mini-kicker { color: var(--brand-dark); @@ -300,11 +284,21 @@ font-size: 6.7px; line-height: 1.2; } - .mini-mark { - color: var(--brand-dark); - font-size: 8px; - font-weight: 900; - white-space: nowrap; + .mini-logo-frame { + width: 70px; + height: 23px; + flex: 0 0 70px; + display: flex; + align-items: center; + justify-content: flex-end; + } + .mini-logo-frame img { + display: block; + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; + object-fit: contain; } .mini-bars { display: grid; @@ -491,24 +485,24 @@ height: 250px; background: repeating-linear-gradient( 135deg, - rgb(174 22 3 / 7%) 0 12px, + rgb(24 78 146 / 7%) 0 12px, transparent 12px 24px ); pointer-events: none; } .story-canvas::before { top: 0; - border-bottom: 3px dashed rgb(174 22 3 / 48%); + border-bottom: 3px dashed rgb(24 78 146 / 48%); } .story-canvas::after { bottom: 0; - border-top: 3px dashed rgb(174 22 3 / 48%); + border-top: 3px dashed rgb(24 78 146 / 48%); } .safe-label { position: absolute; z-index: 3; left: 44px; - color: #7f1d1d; + color: var(--brand-blue); font-size: 25px; line-height: 1; font-weight: 800; @@ -674,10 +668,21 @@ color: #57534e; font-size: 11px; } - .state-mark { - color: var(--brand-dark); - font-size: 14px; - font-weight: 900; + .state-logo-frame { + width: 116px; + height: 36px; + flex: 0 0 116px; + display: flex; + align-items: center; + justify-content: flex-end; + } + .state-logo-frame img { + display: block; + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; + object-fit: contain; } .ruler { @@ -724,9 +729,35 @@
+
+
+ APROVADO +
+

+ 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. +

+
+
+
+
- Design certificado · C191 + Revisão C203 · marca oficial do kit 1313 + Aprovado no gate · 2026-09-19 Instagram feed + Stories

@@ -739,6 +770,32 @@

+
+
+
+

+ REVISÃO VISÍVEL · C203 +

+

+ Marca e paleta oficiais do kit 1313 +

+

+ 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. +

+
+ APROVADA · GATE 2026-09-19 +
+
+
@@ -805,16 +862,14 @@ Fonte: fonte informada pela pessoa · período de exemplo
Nota: valores ilustrativos, sem unidade real.

-
- -
-
JORGE SOLLA
-
MANDATO DEPUTADO FEDERAL
-
+
+ Jorge Solla — Deputado Federal
- NEEDS ASSET · LOGO OFICIAL
@@ -851,11 +906,86 @@ -
-

NEEDS ASSET

-

- Substituir o lockup tipográfico provisório pelo arquivo oficial aprovado do mandato, - preservando esta área e contraste. +

+

MAPEAMENTO SEMÂNTICO · FIXO (C203)

+

+ Regra visual fixa que o port deve seguir. As cores oficiais viram papéis, + não decoração. +

+
    +
  • + + #e4102f · vermelho de destaque: o único destaque da + peça (barra/ponto/âncora) e a valência boa. Vem sempre com círculo + ↑ + palavra + ("amplia"). +
    • +
  • + + #78716c · cinza de valência ruim: quadrado + ↓ + palavra + ("recua"). Nunca usar o vermelho de marca para perda. +
    • +
  • + + #184e92 · azul do sinal/barra de marca: régua superior, kicker + e texto de marca auxiliar. Não é cor de dado nem de destaque. +
    • +
  • + + #1c1917 · tinta: texto principal. Neutros funcionais (papel + #faf9f7, barras cinza #d6d3d1/#a8a29e, eixos) permanecem como estão. +
    • +
  • + + #ffeb00 · amarelo: só existe dentro do ativo oficial ou em + área grande não textual. Nunca em texto, eixo ou dado. +
    • +
  • + + #009647 · verde: exclusivamente dentro dos ativos oficiais + (detalhe da estrela). Não vira cor de gráfico. +
    • +
+

+ Contraste conferido no kit: tinta #1c1917 sobre papel #faf9f7 ≥ 14:1; vermelho + #e4102f sobre papel ≈ 4,8:1 (≥4,5:1 para texto; ≥3:1 como marca/barra de dado). Azul + #184e92 sobre papel ≈ 8:1. Amarelo e verde nunca carregam texto (contraste + insuficiente). +

+
+
+

MARCA OFICIAL · ATIVO RESOLVIDO

+

+ Fundo off-white exige a marca positiva: + jorge-solla-positivo.png (lockup do nome, vermelho/azul). Usar o + PNG oficial sem redesenhar, recolorir, distorcer ou separar seus elementos + — nunca recriar o lockup com tipografia. Se a peça pedir a marca completa, aí é que + o slogan "Mais Saúde, Mais Futuro" aparece: ele vive dentro de + marca-positiva-completa.png, jamais como headline ou 4ª mensagem. +

+
+
+

ESTRELA · REGRA DO 100%

+

+ A estrela (estrela.png, roundel amarelo/verde com estrela vermelha) + só entra a 100% sobre disco branco do mesmo diâmetro. Nunca com + opacidade reduzida — opacidade mistura as cores com o fundo e suja o ativo. Nesta + peça ela é opcional; o template aprovado fecha no lockup do nome.

@@ -902,7 +1032,12 @@
- Fonte: exemploJORGE SOLLA + Fonte: exemplo + Jorge Solla — Deputado Federal

Barra · ranking

@@ -922,7 +1057,12 @@
P4
- Fonte: exemploJORGE SOLLA + Fonte: exemplo + Jorge Solla — Deputado Federal

Coluna · tempo curto

@@ -961,7 +1101,7 @@ - +
- Fonte: exemploJORGE SOLLA + Fonte: exemplo + Jorge Solla — Deputado Federal

Linha · série temporal

@@ -995,7 +1140,12 @@

unidades no período de exemplo

- Fonte: exemploJORGE SOLLA + Fonte: exemplo + Jorge Solla — Deputado Federal

Número-âncora

@@ -1022,7 +1172,7 @@ @@ -1053,7 +1203,7 @@ stroke-width="3" stroke-dasharray="6 4" /> - + @@ -1080,7 +1230,7 @@ cy="16" r="4" fill="#faf9f7" - stroke="#c51414" + stroke="#e4102f" stroke-width="2.5" /> Estadual - + 23.294 · ↑ amplia Municipal @@ -1113,7 +1263,12 @@
- Fonte: SIH/SUSJORGE SOLLA + Fonte: SIH/SUS + Jorge Solla — Deputado Federal

Linha · duas séries

@@ -1127,7 +1282,7 @@
-

CENA 02B · VARIAÇÃO CERTIFICADA

+

CENA 02B · VARIAÇÃO PRESERVADA

Feed 4:5 · linha temporal de duas séries

@@ -1211,7 +1366,7 @@ class="dual-series dual-series-good" points="52,352 113,336 174,314 235,331 296,288 356,256 417,261 478,144 539,122" fill="none" - stroke="#c51414" + stroke="#e4102f" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" @@ -1222,7 +1377,7 @@ y1="122" x2="600" y2="89" - stroke="#c51414" + stroke="#e4102f" stroke-width="8" stroke-linecap="round" stroke-dasharray="18 12" @@ -1248,7 +1403,7 @@ stroke-dasharray="18 12" /> - + @@ -1276,7 +1431,7 @@ cy="89" r="11" fill="#faf9f7" - stroke="#c51414" + stroke="#e4102f" stroke-width="5" /> - + Estadual 23.294 - ↑ amplia + ↑ amplia +121% até 2025 Nota: 2026 é projeção pela média de janeiro a junho × 2.

-
- -
-
JORGE SOLLA
-
MANDATO DEPUTADO FEDERAL
-
+
+ Jorge Solla — Deputado Federal
- NEEDS ASSET · LOGO OFICIAL
@@ -1371,8 +1524,8 @@

VALÊNCIA SEM DEPENDER DA COR

- Estadual (bom) usa o vermelho do mandato, círculo e “↑ amplia”. Municipal (ruim) - recua em cinza de eixo, quadrado e “↓ recua”: a cor do PT nunca carrega o caminho + Estadual (bom) usa o vermelho oficial do kit, círculo e “↑ amplia”. Municipal (ruim) + recua em cinza de eixo, quadrado e “↓ recua”: o vermelho nunca carrega o caminho ruim. Nome, valor, seta, palavra e forma mantêm a leitura redundante.

@@ -1423,11 +1576,11 @@

Bom × ruim · tons presentes

Tons entram sempre em par. Bom = - #c51414 + círculo + ↑ “amplia”. Ruim = + #e4102f + círculo + ↑ “amplia”. Ruim = #78716c + quadrado + ↓ “recua”. No caso: Estadual é - bom; Municipal é ruim. Vermelho é marca do mandato/PT 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. + 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.

@@ -1620,10 +1773,14 @@
Fonte: fonte informada · valores ilustrativos.
-
JORGE SOLLA
+
+ Jorge Solla — Deputado Federal +
- NEEDS ASSET · LOGO OFICIAL @@ -1691,7 +1848,11 @@
Geração pausada · aguardando esclarecimentoJORGE SOLLA + >Jorge Solla — Deputado Federal

Dado faltando ou ambíguo

@@ -1721,7 +1882,11 @@
Formato não gerado · alternativa indicadaJORGE SOLLA + >Jorge Solla — Deputado Federal

Pizza com mais de 5 fatias

@@ -1748,7 +1913,7 @@
@@ -1802,7 +1967,8 @@

Fundo e sinal

- Off-white #faf9f7. Vermelho #c51414 ocupa no máximo ~10% da peça. + Off-white #faf9f7. Vermelho oficial #e4102f ocupa no máximo ~10% da peça; a régua de + marca usa azul #184e92.

@@ -1812,10 +1978,8 @@
diff --git a/docs/plans/graficos-dados-marca-kit-1313.md b/docs/plans/graficos-dados-marca-kit-1313.md new file mode 100644 index 00000000..72084275 --- /dev/null +++ b/docs/plans/graficos-dados-marca-kit-1313.md @@ -0,0 +1,99 @@ +# Gráficos de dados do Instagram na marca oficial do kit 1313 + +Status: rascunho +Atualizado em: 2026-09-19 +Issue: #1192 +Priority: P2 +Impeccable: C — superfície gráfica (o produto é o gráfico; não é tela de app) com design hi-fi existente a atualizar +Design UI: docs/plans/graficos-dados-instagram-ui-design.html (revisão C203 aprovada no gate em 2026-09-19) +Appetite: ~1 dia eng (design + port + testes) +Responsável: — + +## Intenção + +A C196 mesclou a identidade oficial "kit 1313" em `public/campaign-kit/` (7 PNGs de marca + README com a paleta oficial + manual), mas a skill `graficos-dados` (C191) segue com a paleta provisória de mandato e recriando um lockup tipográfico no rodapé. O hi-fi aprovado já registra o débito: `NEEDS ASSET · LOGO OFICIAL` com a nota "Substituir o lockup tipográfico provisório pelo arquivo oficial aprovado do mandato, preservando esta área e contraste" — o ativo oficial agora existe. A intenção é que os gráficos de Instagram saiam na marca e na paleta oficiais do kit 1313, mantendo o template aprovado (grid, headline-manchete, um destaque, guardrails de correção, render local, saída gitignored). Mesmo racional do C196 nos reels: cena gráfica usa o kit; aqui não há cena de captura de site — a peça inteira é gráfica. + +## Persona e fluxo + +- **Persona / contexto:** comunicação do mandato/campanha, na mesa, transformando números que chegaram (xlsx/csv/md/texto colado) em peça de Instagram; precisa publicar rápido e sem errar a marca. +- **Job principal:** gerar um gráfico PNG com o dado de campanha na identidade oficial 1313, sem editar nada à mão. +- **Fluxo desejado:** recebe os números → escolhe o formato (feed 1080×1350, quadrado 1080×1080, stories 1080×1920) → a skill aplica o template aprovado com a marca oficial → confere o PNG renderizado localmente → publica. +- **Anti-goals de produto:** não virar editor gráfico; não ser um segundo renderer nem dependência de nuvem; não tocar o site público; não redesenhar o template. + +### Esboço de fluxo (C) + +```text +[recebe números] → [escolhe formato] → [skill aplica template + marca oficial] +→ [PNG local na marca do kit] → [confere] → [publica] +``` + +### Design UI (C) + +- Design UI (gate): `docs/plans/graficos-dados-instagram-ui-design.html` — **revisão C203 aprovada no gate em 2026-09-19**: `NEEDS ASSET · LOGO OFICIAL` resolvido com `jorge-solla-positivo.png` (10 placements, `object-fit: contain`), paleta de marca oficial e mapeamento semântico fixados (destaque/valência boa `#e4102f`; ruim cinza; sinal de marca `#184e92`; amarelo/verde só dentro dos ativos). Tier de produção da revisão: `opencode-go/deepseek-v4.1-flash` (o frontier `openai/gpt-5.6-sol` bateu quota) — `Design tier:` a registrar no PR, com o sign-off humano do gate. Assets do artefato em `docs/plans/graficos-dados-instagram-ui-design-assets/`. + +## Objetivo e aceite + +- Os gráficos gerados exibem a marca oficial (kit 1313) no rodapé no lugar do lockup tipográfico provisório, preservando área e contraste do template aprovado. +- A paleta de marca do gráfico passa a ser a oficial do kit; neutros e mapeamento semântico ficam como o `designer` fixar no hi-fi. +- Formatos e dimensões preservados: 1080×1350 / 1080×1080 / 1080×1920, PNG. +- Guardrails de correção intactos: 100% local (dado de campanha nunca sai da máquina), saída gitignored, sem fonte sem peça, barras no zero, ≤7 pontos, valência por palavra+forma+cor, projeção/cruzamento só com confirmação, texto real, um único destaque. +- O slogan "Mais Saúde, Mais Futuro" permanece apenas dentro das marcas completas — nunca headline nem quarta mensagem. + +## Dados (intenção) + +- **Vou apresentar dados?** Sim, superfície neste item — o produto entregue é o próprio gráfico. +- **Decisões desbloqueadas:** comunicação decide publicar a peça com o dado recebido sabendo que marca e paleta estão corretas para o ciclo 1313; `designer` decide o mapeamento semântico de destaque/valência/sinal no hi-fi. +- **Forma:** _adiada ao plano de implementação_ — restrições de produto: leitura relativa/local (sem % estadual absoluto), um único destaque por peça, texto real. + +## Dados da decisão (literais) + +- Paleta oficial do kit: `#e4102f` (vermelho), `#184e92` (azul), `#ffeb00` (amarelo), `#009647` (verde — só dentro dos ativos); o laranja `#f89c0e` existe só nas variações de paleta e **não é usado**. +- Marca: positiva (nome vermelho/azul) em fundo claro; negativa (branco/amarelo) em fundo vermelho/escuro. O gráfico tem fundo off-white → **marca positiva / `jorge-solla-positivo`**. +- Ativos disponíveis em `public/campaign-kit/`: `marca-positiva-completa.png`, `marca-negativa-completa.png`, `jorge-solla-positivo.png`, `jorge-solla-negativo.png`, `numero-positivo.png`, `numero-negativo.png`, `estrela.png`. +- Manual oficial: `docs/campaign-kit/manual-campanha-jorge-solla-1313.pdf`; README com a paleta em `public/campaign-kit/README.md`. +- Estrela: usada a 100% sobre disco branco do mesmo diâmetro — nunca com opacidade. +- Slogan "Mais Saúde, Mais Futuro" vive **dentro** das marcas completas. +- Não recriar lockups tipográficos quando o ativo oficial existe. +- Formato provisório a substituir: `brandLockup` "JORGE SOLLA" / "MANDATO DEPUTADO FEDERAL" (`scripts/lib/graficosInstagramRender.mjs:139-145`) e `SOLLA_PALETTE` `#c51414`, `#ae1603`, `#a21c1c`, `#ffe607` (`:17-29`). +- Área segura do hi-fi: 1012×1350; vermelho de destaque ≤ ~10% da peça (`docs/plans/graficos-dados-instagram-ui-design.html:1748-1806`). + +## Direção no codebase (hipótese) + +- **Áreas prováveis:** `scripts/lib/graficosInstagramRender.mjs` (paleta/lockup/footer), `scripts/lib/chartPrimitives.mjs` (`CHART_COLORS`, defaults de `lineChart`), `scripts/build-chart-from-data.mjs` (entry), testes que pinam os literais, `.agents/skills/graficos-dados/SKILL.md` (`:114-121`, `:134-139`) e `.opencode/commands/graficos-dados.md`. +- **Precedente a olhar:** consumo do kit como data URI em `scripts/lib/reelRender.mjs:121-138` (`KIT_ASSETS`/`readKitAssets`) e a seção "Marca oficial (kit 1313)" em `.agents/skills/reels-tutoriais/SKILL.md:118-135`. +- **Risco de acoplamento:** `screenshotHtmlPng` (`scripts/lib/buildPdf.mjs:39-63`) roda `setContent` sem rede/base — o ativo precisa ser embutido (data URI ou `file://`); `chartPrimitives` é compartilhado com os dossiês/relatórios — não vazar a paleta 1313 para lá; testes unit/e2e pinam `#c51414` e o lockup verbatim e precisam acompanhar. + +## Dependências + +- **Hard:** C196 — ativos do kit já mesclados em `public/campaign-kit/` (entregue; nada a esperar). +- **Soft:** Nenhuma. + +## Fora de escopo + +- Site público e tokens de tema — a UI pública segue com a identidade legada; adotar o kit lá é mudança de UI pública, item próprio com gatilho. +- Documentos institucionais (dossiês, boletins, relatório de cidade) — mantêm a identidade própria e a regra de "nunca marca de campanha" (`scripts/lib/dossieRender.mjs:141`). +- Reels tutoriais — já resolvidos no C196. + +## Rabbit holes de produto + +- **Editor gráfico.** Se alguém “só completar”: UI de edição, drag-and-drop, WYSIWYG. **Corte neste item:** template fixo + dados de entrada; nada de edição manual. +- **Render na nuvem/MCP remoto.** Se alguém “só completar”: serviço, fila, deploy. **Corte neste item:** 100% local como hoje. +- **Segundo renderer/biblioteca.** Se alguém “só completar”: duas fontes de verdade visual. **Corte neste item:** estender o renderer atual. +- **Redesenhar o template inteiro** (grid, headline-manchete). **Corte neste item:** o template aprovado é preservado; mudam marca e paleta. + +## Questões em aberto (produto) + +- **Adotar a paleta oficial completa + marca oficial, ou só trocar o lockup mantendo a paleta provisória?** **Opções:** A) adoção completa (paleta + marca) | B) só lockup. **Recomendação:** A — consistência com o C196 e a nota do próprio hi-fi mandam substituir o lockup; manter a paleta provisória deixaria a peça híbrida. _(decidido no gate 2026-09-19: A)_ +- **O destaque/valência continua no vermelho do kit (`#e4102f`)?** **Opções:** sim (kit) | manter `#c51414` só no destaque. **Recomendação:** sim, `#e4102f`, com o `designer` definindo o mapeamento semântico no hi-fi. _(decidido no gate 2026-09-19: sim)_ +- **A peça é gráfica de campanha → kit, sem cena de captura de site?** **Opções:** confirmar leitura TSE/assessoria se necessário | manter como está. **Recomendação:** seguir o kit (não há cena de captura). _(assumido — validar com assessoria/TSE se couber)_ + +## Referências + +- GitHub Issue: a registrar (C203) — follow-up de C191, mesma família do C196. +- Design UI (gate): `docs/plans/graficos-dados-instagram-ui-design.html` + assets em `docs/plans/graficos-dados-instagram-ui-design-assets/`. +- Kit: `public/campaign-kit/README.md`; `docs/campaign-kit/manual-campanha-jorge-solla-1313.pdf`. +- Render/paleta atuais: `scripts/lib/graficosInstagramRender.mjs:17-29,93-102,129-150`; `scripts/lib/chartPrimitives.mjs:17-31,498-508`; `scripts/build-chart-from-data.mjs:33,189,205-213`; `scripts/lib/buildPdf.mjs:39-63`. +- Precedente kit: `scripts/lib/reelRender.mjs:121-138`; `.agents/skills/reels-tutoriais/SKILL.md:118-135`. +- Skill/command a atualizar: `.agents/skills/graficos-dados/SKILL.md:114-121,134-139`; `.opencode/commands/graficos-dados.md`. +- Testes que pinam literais: `tests/unit/graficosInstagramRender.unit.spec.ts:45-50,53-57,74,98-107`; `tests/unit/chartPrimitives.unit.spec.ts:140-142,160-188,279`; `tests/e2e/campaignChartPng.e2e.spec.ts:78-87,91-104`; `tests/unit/buildChartFromData.unit.spec.ts:165-168,211-216`. +- Hi-fi (literais): `docs/plans/graficos-dados-instagram-ui-design.html:817,1365,854-859,1407-1441,1748-1806`. diff --git a/docs/plans/kit-1313-fonte-de-marca.md b/docs/plans/kit-1313-fonte-de-marca.md new file mode 100644 index 00000000..9d356abf --- /dev/null +++ b/docs/plans/kit-1313-fonte-de-marca.md @@ -0,0 +1,83 @@ +# Kit 1313 como fonte de marca única (doutrina + ativos oficiais) + +Status: rascunho +Atualizado em: 2026-09-19 +Issue: #1193 +Priority: P2 +Impeccable: A — N/A sem UI (doutrina, skills e assets de referência; nenhuma superfície nova) +Design UI: N/A — sem UI +Appetite: ~0,5 dia eng — ponteiro na doutrina + 7 ativos + README +Responsável: — + +## Intenção + +A C196 mesclou o kit oficial 1313 (`public/campaign-kit/` com 7 PNGs + README de paleta e uso; manual em `docs/campaign-kit/manual-campanha-jorge-solla-1313.pdf`), mas só a skill `reels-tutoriais` e o agente `designer-campanha-solla` sabem que ele existe. Quem mais produz peça visual — e a doutrina compartilhada de design, que hoje diz "logo quando aprovado" sem apontar a fonte — continua podendo inventar identidade. O kit original ainda tem 7 ícones/pattern oficiais fora do repo. Esta entrega faz do kit a fonte de marca única e verificável, sem geminar regra e sem arrastar o site público ou os documentos institucionais para a identidade de campanha. + +## Persona e fluxo + +- **Persona / contexto:** agentes e pessoas que produzem peças da campanha — `designer`/`designer-campanha-solla` (design), `reels-tutoriais` (vídeo), `solla-comunicacao` (texto) — e quem revisa marca no gate. +- **Job principal:** achar o ativo e a regra oficiais sem adivinhar e sem recriar lockup. +- **Fluxo desejado:** quem desenha abre a doutrina → encontra o ponteiro para o kit → abre o README → usa o ativo certo (positiva/negativa/estrela). Quem escreve texto carrega `solla-comunicacao` → vê o ponteiro curto → não inventa identidade; se a peça pede visual, o caminho é o kit. +- **Anti-goals de produto:** manual paralelo no repo; segunda paleta de campanha; regra de marca copiada por agente; kit virar desculpa para redesenhar o site. + +## Objetivo e aceite + +- A doutrina de design (`.agents/skills/plan-issue/ui-design-html.md` §Tokens, brand e shadcn) aponta `public/campaign-kit/README.md` + manual como fonte de marca das superfícies da campanha — valendo para `designer`, `designer-degraded` e `designer-campanha-solla` **sem** regra duplicada em cada agente. +- `public/campaign-kit/` guarda os 14 ativos (7 já mesclados + 7 ícones/pattern), com os nomes de arquivo preservados; o README cobre "Ativos e quando usar" para os 14 e registra a origem externa do kit. +- `solla-comunicacao` ganha ponteiro curto: identidade visual oficial = kit; não inventar nem copiar a paleta (a dona é o README do kit). +- Nada de regra geminada; dossiês/boletins/relatório de cidade e site público ficam intocados (fail-closed institucional; UI pública é outro item). +- Verificação por inspeção: ponteiro presente na doutrina; `public/campaign-kit/` com 14 PNGs; README com 14 entradas de uso. + +## Dados (intenção) + +- **Vou apresentar dados?** Não — entrega de doutrina e assets; nenhuma métrica ou decisão analítica. +- **Decisões desbloqueadas:** quem cria peça visual escolhe o ativo oficial certo (positiva/negativa/estrela) em vez de recriar; quem escreve texto não inventa identidade visual. +- **Forma:** _adiada ao plano de implementação_ — aqui só a restrição de que o README não vire recópia do manual. + +## Dados da decisão (literais) + +- 7 ativos a mesclar, nomes preservados: `bahia.png`, `coração.png`, `estrela-2.png`, `pattern-shapes.png`, `punho.png`, `saude.png`, `saude-2.png` (ícones/pattern, RGBA transparentes, ~400 KB somados). +- Origem externa verbatim: `/home/fsolla/Downloads/OneDrive_2026-09-19/kit solla 1313/PNGs/`. +- Paleta oficial (extraída dos ativos): `#e4102f` (vermelho), `#184e92` (azul), `#ffeb00` (amarelo), `#009647` (verde, só dentro dos ativos); laranja do manual `#f89c0e` só nas variações de paleta — não usar. +- Ponteiro canônico: `public/campaign-kit/README.md` + `docs/campaign-kit/manual-campanha-jorge-solla-1313.pdf`. +- Não versionar: `FOTO SOLLA CAMISA BRANCA.png` (34 MB) e `MANUAL CAMPANHA JORGE SOLLA 1313.ai` (3,3 MB). +- Site segue legado (fora de escopo): `public/LOGO_SOLLA_BRANCO.svg` e paleta `#a21c1c`/`#ffe607`/creme. + +## Direção no codebase (hipótese) + +- **Áreas prováveis:** `.agents/skills/plan-issue/ui-design-html.md:66-71` (o bullet `:69` "logo quando aprovado" é o encaixe natural do ponteiro); `.opencode/skills/solla-comunicacao/SKILL.md` (regras rápidas); `public/campaign-kit/README.md` (mapa de uso). +- **Precedente a olhar:** C196 (`docs/changelog/2026-09-18-c196.md:3`) e as citações já existentes em `.agents/skills/reels-tutoriais/SKILL.md:118-135` e `.opencode/agent/designer-campanha-solla.md:25`. +- **Risco de acoplamento:** `designer` e `designer-degraded` herdam a doutrina — ponteiro na doutrina, nunca regra copiada; não encostar nos builders de dossiê (`scripts/lib/dossieRender.mjs`, `dossieBulletinRender.mjs`, `cityReportRender.mjs`) nem na UI pública (`src/components/campaign/shell/campaign-logo.tsx`, `src/app/(frontend)/styles.css`). + +## Dependências + +- Dura: nenhuma. +- Soft: C196 (kit original e manual — sem ela não haveria o que apontar). + +## Fora de escopo + +- Site público/admin: trocar logo legado/paleta é mudança de UI pública — item próprio (gatilho: entrega de identidade visual do site). +- Dossiês, boletins e relatório de cidade: fail-closed institucional, nunca marca de campanha (`scripts/lib/dossieRender.mjs:141`). +- `FOTO SOLLA CAMISA BRANCA.png` e o `.ai`: a foto, quando usada em página, entra otimizada via Media/Garage (item próprio); o PDF do manual já cobre o versionamento. +- Redesenhar ou regerar qualquer ativo do kit. + +## Rabbit holes de produto + +- **Duplicar a regra em cada agente.** Se alguém "só completar" colando a paleta nos três agentes de design: drift entre eles e a doutrina. **Corte neste item:** ponteiro único na doutrina. +- **README virar manual paralelo.** Se alguém recopiar as regras do PDF no README: duas verdades divergindo. **Corte neste item:** README só mapa de uso + paleta extraída; o manual é o PDF. +- **Versionar os arquivos pesados.** Se alguém "só completar" com a foto (34 MB) e o `.ai` (3,3 MB): repo inchado. **Corte neste item:** fora; foto via Media quando houver uso. + +## Questões em aberto (produto) + +- **Os 7 novos ativos não têm legenda de uso no kit; o que escrever no mapa?** **Opções:** A) ler o manual PDF e extrair o uso; B) pedir legenda ao humano; C) descrever literalmente a forma (ex.: "ícone de saúde — variação 2"). **Recomendação:** A e, se o manual não distinguir (ex.: `saude` vs `saude-2`), C com nota "uso a confirmar" — não travar a entrega nem inventar significado. _(decidido no gate 2026-09-19: A, com o fallback C se o manual não distinguir)_ + +## Referências + +- GitHub Issue: a registrar (C204) +- Design UI (gate): N/A — sem UI +- `public/campaign-kit/README.md:19-43` (ativos e regras atuais); `docs/changelog/2026-09-18-c196.md` +- `.agents/skills/plan-issue/ui-design-html.md:66-71`; `.opencode/skills/solla-comunicacao/SKILL.md:8-11` +- `.agents/skills/reels-tutoriais/SKILL.md:118-135`; `.opencode/agent/designer-campanha-solla.md:25` +- `scripts/lib/reelRender.mjs:121-138`; `scripts/build-reel.mjs:48,116` (consumo atual do kit) +- `scripts/lib/dossieRender.mjs:110-114,141`; `scripts/lib/dossieBulletinRender.mjs:11-14,125-141,197`; `scripts/lib/cityReportRender.mjs:370-392` +- `src/components/campaign/shell/campaign-logo.tsx:7-18`; `src/app/(frontend)/styles.css:976-982`; `DESIGN.md:5-20,150-151`