Memória do projeto.

O que é o projeto.

O Radar de Futuros é a ferramenta de prospecção estratégica da Sicredi Pioneira — um mapa vivo de sinais sobre o futuro do ecossistema da cooperativa. A versão 2.0 reformula a visualização pública, o modelo de dados do radar e, agora, também as páginas do site institucional que apresentam o Comitê do Futuro e dão acesso ao radar. Cada sinal é classificado e posicionado de forma que a comunidade consiga decidir o que observar, o que se preparar para enfrentar e o que exige ação imediata.

A curadoria do radar e a operação interna do Comitê do Futuro ficam fora do nosso escopo de design; o público são os associados e a comunidade da cooperativa (Serra Gaúcha e Vale dos Sinos).

Escopo do trabalho de design.

Desenhamos a área pública do radar e as páginas públicas do Comitê do Futuro no site da Sicredi Pioneira.

Dentro do escopo

• A visualização pública do radar (canvas circular, filtros, legenda, painel de detalhe do sinal) — em protótipo HTML de alta fidelidade.
• A sugestão de novos sinais pela comunidade (formulário público "Enviar Sinal").
• As páginas do site do Comitê do Futuro, desenhadas no Figma:
  • Página do Comitê do Futuro (a "home" do comitê): apresenta o comitê, o radar, os membros, ferramentas, publicações, história e agenda.
  • Página "Arquivos de Futuro" (repositório de ferramentas e publicações).
  • Modais de perfil do membro e de detalhe do encontro.
  • Um protótipo navegável no Figma conectando essas telas.

Fora do escopo

• O admin do radar (CRUD de sinais, gestão de megatendências, controle de acesso, logs) e a operação interna do Comitê. Ficam com o time de backend / o cliente.
• A seção "Chamadas" (chamada de propostas/oportunidades) — adiada para uma v3, por decisão registrada na documentação do próprio comitê.

Modelo visual do Radar 2.0.

A versão 2.0 muda como o radar se organiza visualmente. Seguir este modelo, não o da documentação original.

Eixos da visualização

• Cor separa cada megatendência; forma do marcador indica o tipo de sinal; o tamanho do marcador indica a recência da atualização.
• Os anéis passaram a usar uma escala de verde (Agir mais escuro → Observar mais claro), e os indicadores de ação recomendada viraram ícones "bullseye" (mini-radar que representa qual anel a fatia é), todos em verde Sicredi, sem diferenciação por cor — decisão do cliente para reforçar a identidade.
• STEEP continua existindo como dado obrigatório de cada sinal, mas não é mais um eixo visual — aparece como filtro/metadado.
• Como o número de fatias é variável, o canvas precisa acomodar bem de poucas a muitas megatendências.

Tipos de sinal — 3 tipos

Tendência, Sinal Fraco e Evento Raro. O antigo "Cisne Negro Local" foi descontinuado e unificado em "Evento Raro" (evita a palavra "negro" e simplifica a classificação/o layout).

Obrigatoriedade da megatendência

• Design (área pública): obrigatória — todo sinal precisa de uma fatia.
• Backend: opcional — salvaguarda técnica para deleções no admin. Esse estado "sem megatendência" é transitório e nunca chega ao público.

Termos a respeitar

• "Evento Raro" (não "Cisne Negro Global"); "Sinal" (não "Achado").
• "Cenários Futuros" e "Pilares Estratégicos" estão descontinuados.
• O campo "Relevância" foi removido — não existe mais no modelo.

Campos do sinal (alinhado ao backend).

Referência completa em radar-de-futuros-campos.md. Resumo:

Obrigatórios: slug, título, descrição, tipo, aspecto STEEP, ação recomendada, megatendência, chance de ocorrência (curto e médio prazo).

Opcionais / de enriquecimento

• Justificativas (markdown) para Tipo, Ação, Chance (curto/médio) e Maturidade.
• Maturidade (TRL) 1–9 — opcional/anulável (achados não-tecnológicos podem não ter; nesse caso a interface mostra "Não se aplica").
• Textos (markdown): Análise Crítica, Análise do Comitê, Perspectivas Futuras, Oportunidades, Ameaças.
• Impactos regionais (social, econômico, ambiental, 0–5) e Inovação × Engajamento (0–5).
• Leituras adicionais (lista de título + URL).
• Relações entre sinais (a "rede 2.0"): sinais que impulsionam, sinais que tensionam e desdobramentos deste sinal.
• Imagem (upload S3) — temporariamente bloqueada por uma configuração de segurança no backend; o protótipo usa um hero em gradiente enquanto isso.

Decisões de produto e de design.

Radar e detalhe do sinal

• Terminologia: "sinal" substitui "achado" em todos os artefatos novos.
• Ordenação da lista lateral: manter simples — apenas por atualização, com opção de inverter (mais recentes ↔ mais antigos) e indicação explícita da ordenação ativa. Não adicionar outros critérios (evita confundir com filtro).
• Recência em primeiro plano: mostrar o tempo desde a última atualização já na entrada (baldes de 30/60/90 dias) e destacar os sinais recentes no radar.
• Quantidade de sinais: estável, em torno de 90–120 — não é preciso projetar para centenas.
• Impressão/exportação: versão A4 do detalhe de um sinal (incluindo relações), sem o radar — para uso em eventos.
• Princípios de interação: filtros atenuam (não escondem) os não selecionados; no desktop o painel de detalhe nunca cobre o radar inteiro.
• O gráfico Inovação × Engajamento do detalhe mostra o sinal selecionado sobre todos os sinais do mesmo aspecto STEEP (o selecionado em destaque), para dar contexto de posição relativa.

Site do Comitê do Futuro

• A página do Comitê é uma porta de entrada para o radar — o radar é o carro-chefe. Há múltiplos convites "Acessar o Radar" ao longo da página (hero, seção do radar e um banner de reforço mais abaixo).
• Ferramentas e Publicações unificadas numa única seção "Arquivos de Futuro" na home (que mostra apenas algumas de cada) com um botão "Ver todos" que leva a uma página-repositório completa. Motivo: com o tempo haverá muitas ferramentas e publicações, então a home não pode listar tudo.
• Na página-repositório, as duas naturezas se diferenciam por badge de tipo (Publicação = verde-suave; Ferramenta = verde-sólido) e há filtro (segmentado Tudo / Ferramentas / Publicações + busca).
• Downloads diretos, sem pré-cadastro (ferramentas e publicações). Um contador de downloads seria desejável (via backend).
• Membros: o card do carrossel é compacto (foto + nome + cargo); a bio, de tamanho variável, abre num modal de perfil (foto maior, bio completa, áreas de atuação). Modal escala melhor que bio inline.
• História: linha do tempo dos encontros horizontal e navegável (carrossel com corte na borda); cada encontro abre um modal de detalhe ("o que foi trabalhado" + temas). Inclui espaço para um vídeo de apresentação (em produção).
• Agenda: lista de próximos encontros/eventos, em duas colunas.
• Conteúdo dinâmico (via backend): membros (fotos/bios), ferramentas, publicações, textos completos dos encontros e a agenda serão publicados pelo backend. O design usa placeholders realistas onde ainda não há conteúdo.

Nova visualização em teia (grafo de correlações)

Pedido do cliente (jul/2026), incorporado ao escopo: nas demonstrações do radar, a visão das correlações entre sinais (impulsionam / tensionam / desdobramentos) tem se mostrado o maior ativo do momento — o olhar sistêmico sobre os sinais é o que mais impressiona.

• Nova visão do radar em forma de teia: os sinais exibidos por correlação, não por ação ou megatendência — nos moldes da graph view do Obsidian.
• Em desenvolvimento no protótipo v4.
• Combinado com o cliente: uma prévia no protótipo com interface de debug (sliders) para ele ajustar os parâmetros da simulação e testar a visualização.
• Plano: duas semanas de design — 1 protótipo, 1 ajuste / alta fidelidade.

Ajustes no backend

Definidos na reunião de apresentação do high fidelity e kickoff da nova visualização (a mesma que fechou os entregáveis da teia), ficam do lado do backend:

• Exportar dados em JSON para LLM — os dados do radar em um formato pensado para consumo por modelos de linguagem.
• Ajustes no "Enviar Sinal" — refinamentos no fluxo/endpoint do formulário público.
• Otimização da API pública levando o design em consideração — moldar as respostas da API ao que a visualização e as páginas realmente consomem.

Diferido (não agora)

• Uma seção do site para sinais retirados, com a justificativa da saída (voltou a ser sinal fraco / virou realidade consolidada). O backend já faz soft-delete, então o histórico fica preservado.
• A seção "Chamadas" (chamada de propostas) — v3.

Restrições e contexto técnico.

• Telas pequenas: parte do público acessa de notebooks com 1366×600 (Chromebooks). A visualização do radar precisa funcionar bem nesse tamanho — densidade é o desafio central.
• Design system — DS V3 da Pioneira: é a referência atual (tokens de cor, tipografia Exo 2 + Nunito, e componentes publicados: Menu, breadcrumb, Footer, ícones Sicredi). O trabalho no Figma alinha as páginas ao novo site (referências: Home e Patrocínios da Pioneira).
• Botão do DS: o componente de botão do DS não está publicado/vinculado ao arquivo do radar no Figma, então usamos um botão local equivalente (feito a partir dos tokens de botão do V3) e, em CTAs sobre fundo verde, uma pílula branca custom.
• Imagens de sinais: upload S3 bloqueado no backend no momento (ver seção 04).

Correção de tokens (auditoria de fidelidade)

Os valores exatos do DS V3 (modo claro):

• Os rótulos de seção em caps são verdes (#3FA110), não cinza.
• Os inputs do DS têm uma assinatura visual: canto superior-esquerdo reto (radius 0 8 8 8) e placeholder em itálico.

Estado do protótipo do Radar (HTML).

Protótipo vivo em HTML + JavaScript + Canvas 2D (sem bibliotecas), na pasta do projeto. Há duas versões:

• Protótipo do Radar — o protótipo original de alta fidelidade.
• Protótipo do Radar v2 — um fork que aplica o design system sobre o v1: chrome do site (menu + breadcrumb), anéis em escala de verde, ícones bullseye, chips/badges e o formulário Enviar Sinal com repetidor de "Leituras adicionais". Passou por uma auditoria de fidelidade que corrigiu os tokens do DS (ver seção 06) e detalhes de componentes.
• Protótipo v4 (em curso) — adiciona a visualização em teia das correlações entre sinais (ver seção 05), com painel de debug (sliders) para o cliente calibrar os parâmetros.

Ambos rodam em index.html / css/styles.css / js/radar.js / data/sinais.js (sinais reais reaproveitados como base) e funcionam em desktop e mobile.

Implementado

• Radar circular no modelo 2.0 (anéis = ação; setores = megatendências; cor por megatendência; forma por tipo; tamanho por recência; destaque dos ≤30 dias).
• Tema claro (padrão) e escuro; zoom/pan; legenda sempre visível.
• Filtros que atenuam (busca, ação, tipo, megatendência, STEEP, maturidade, probabilidade, novidades 30/60/90/+90), com tooltips de ajuda.
• Lista lateral que segue os filtros, com ordenação por atualização e badges de recência, sincronizada com o radar.
• Detalhe do sinal (drawer no desktop, bottom sheet no mobile) com chance, maturidade, impacto, inovação × engajamento, justificativas, textos (análise crítica, análise do comitê, perspectivas, oportunidades × ameaças em cards), rede de sinais relacionados (com conectores distintos no radar), histórico e impressão A4.
• Mobile: radar em tela cheia por toque (arrastar/pinça/tocar), filtros e detalhe em bottom sheets, detalhe em "peek" mostrando o radar ao fundo, e um modo de passar pelos sinais (equivalente ao hover do desktop).
• Enviar Sinal: formulário público (título, megatendência, STEEP, ação, descrição, chance, maturidade, imagem, perspectivas e leituras adicionais).

Site institucional do Comitê (design no Figma).

A partir do documento "Comitê do Futuro" (em Documentos/), desenhamos as páginas do site no Figma, alinhadas ao novo site da Pioneira e ao DS V3.

Página "Comitê do Futuro" (a home do comitê)

Seções, de cima para baixo:

• Hero (entrada para o radar) — apresenta o comitê e traz um convite forte para acessar o radar, com um preview do próprio radar.
• Sobre o Comitê — o que é, o propósito "Juntos Construímos Futuras Comunidades Melhores" e os 4 pilares (antecipação, curadoria coletiva, ação estruturante, comunidades melhores) em cards com ícone.
• Radar de Futuros — faixa de destaque explicando o radar e suas 3 frentes (antecipar mudanças, guiar decisões, fortalecer a região), com entrada para o radar.
• Membros — carrossel dos 22 membros (foto/nome/cargo em placeholder até o backend popular); cada card abre o modal de perfil com a bio.
• Arquivos de Futuro — mostra algumas publicações e ferramentas + botão "Ver todos" para a página-repositório.
• História — texto + player de vídeo (em produção) + linha do tempo horizontal navegável dos encontros; cada encontro abre um modal de detalhe.
• Agenda — próximos encontros e eventos, em duas colunas.
• Um banner de reforço convidando novamente a acessar o radar + rodapé do site.

Página "Arquivos de Futuro" (repositório)

Reúne todas as ferramentas e publicações. Diferenciação por badge de tipo e filtro (Tudo / Ferramentas / Publicações + busca). Há 4 publicações reais (na pasta Publicações/ do projeto); as ferramentas ainda não existem (cards placeholder).

Modais

• Perfil do membro — foto, nome, cargo, "Sobre" (bio) e "Áreas de atuação".
• Detalhe do encontro — badge de data, título, local, "O que foi trabalhado" e "Temas abordados".

Componentização e protótipo

• Os cards repetidos viraram componentes reutilizáveis (membro, publicação, ferramenta, encontro da timeline, evento da agenda); as telas usam instâncias com conteúdo próprio.
• Foi montado um protótipo navegável no Figma: navegação entre a home e o repositório, abertura dos modais (membro e encontro) e fechamento, scroll horizontal dos carrosséis, e os CTAs "Acessar o Radar" apontando para a URL do radar (placeholder, a confirmar).
• Foi produzida também uma versão dark do preview do radar para o hero.

Histórico de decisões.

• Mai/2026 — Imersão e benchmark; definição do modelo 2.0 (megatendências como setores, STEEP como dado); adoção do termo "sinal"; introdução da rede de sinais relacionados.
• Jun/2026 (reunião com o cliente) — descontinuação do "Cisne Negro Local"; ordenação simples por atualização; recência em primeiro plano; impressão A4; mobile como prioridade; seção de "sinais retirados" adiada.
• Jun/2026 (protótipo de alta fidelidade) — construção do radar, filtros, lista, detalhe, rede, temas, mobile e impressão.
• Jun/2026 (alinhamento ao backend) — remoção da Relevância; maturidade opcional/anulável; novos campos de justificativa e textos (markdown); renderização de markdown na interface.
• Jun–Jul/2026 (protótipo v2 de alta fidelidade) — fork aplicando o DS do Figma sobre o radar (chrome do site, anéis verdes, ícones bullseye, formulário Enviar Sinal) e auditoria de fidelidade que corrigiu os tokens do DS V3.
• Jul/2026 (site do Comitê no Figma) — desenho das páginas do Comitê do Futuro e do repositório "Arquivos de Futuro", dos modais (membro e encontro), da biblioteca de componentes e do protótipo navegável; unificação de Ferramentas + Publicações; linha do tempo horizontal; "Chamadas" adiada para v3.
• Jul/2026 (apresentação do high fidelity + kickoff da nova visualização) — a pedido do cliente, nova visão do radar por correlação entre sinais, estilo graph view do Obsidian; em desenvolvimento no protótipo v4, com prévia + painel de debug (sliders) para calibração; duas semanas de design (1 protótipo, 1 ajuste / alta fidelidade). Na mesma reunião, definidos os ajustes de backend: exportação em JSON para LLM, ajustes no "Enviar Sinal" e otimização da API pública levando o design em consideração.

Como atualizar este arquivo.

Atualizar sempre que:

• surgir uma decisão importante que contradiga a documentação oficial;
• o escopo do trabalho mudar (incluir ou excluir áreas);
• aparecer uma restrição técnica ou de produto que valha lembrar;
• uma página, fluxo ou componente novo for desenhado.

Manter a data de "última atualização" no topo. Evitar citar pessoas específicas — preferir papéis ("o cliente", "o time de backend", "o time de design").