Identidade Visual e Landing Page para hub de produtos de IA
- Branding
- Web Design
- UI/UX Design
- Construída com IA
Desenhei a marca e a landing page de um produto que nasce com um agente de IA e foi pensado para virar um hub: um polvo com muitos braços para quem segura muitas frentes de um projeto. Depois levei tudo do Figma ao código, com agentes de IA, e ao WordPress.
Em resumo
O PM Octopus é a frente de produtos de IA do Mario Trentim. Hoje tem um produto: um agente dentro do GPT que serve de copiloto para gestores de projetos e PMOs, com diagnóstico, artefatos, riscos e planos de ação. No futuro, a marca deve abrigar outros produtos. A página fala com público frio, e a ideia que a sustenta é uma só: "IA sem método amplifica o caos".
Fiz a identidade (isotipo, logotipo, paleta e regras de tipografia) e uma landing de onze seções, majoritariamente escura, construída em Astro e exportada para colar no Elementor. A redação veio pronta do cliente e eu não a alterei; o meu trabalho foi dar forma, movimento e ritmo ao texto.
Esta página mostra a marca e como a landing foi feita. Não mostra resultado de vendas: os botões ainda não apontam para um checkout real, e o projeto está pausado.
Meu papel
- Identidade visual
- Design da landing page
- Direção de UI
- Construção com IA
Ferramentas
- Figma
- Astro
- CSS
- React
- Three.js
- GSAP
- Claude Code
- WordPress
- Elementor
- Tipo
- Identidade visual e landing page de conversão
- Cliente
- Mario Trentim, frente de produtos de IA
- Prazo da landing
- 19 a 22/06/2026, do primeiro ao último commit da landing
- Estado
- Pronta e exportada, sem checkout ligado
Resultados
60 h
Contado no GitEntre o primeiro e o último commit da landing
De 19/06/2026 às 19:51 a 22/06 às 08:17, em 10 commits do repositório da landing. Quanto tempo levou a marca antes disso não está registrado.
11
Contado no códigoSeções na landing, do hero ao rodapé
Hero, manifesto, benefícios, depoimento em destaque, método, preço, mural de depoimentos, sobre, FAQ, chamada final e rodapé, na ordem de landing.config.ts.
5
Do arquivo de tokensCores formam a paleta oficial da marca
Um quase preto, um roxo profundo, a primária lavanda, um lavanda claro e um branco quente, declarados em tokens.css e em contexto.projeto.md.
Uma marca para caber mais de um produto
A página vende o agente. Mas desde o primeiro dia está registrado que o PM Octopus abrigará outros produtos, como arquivos de método e ebooks. Isso mudou a pergunta: o nome e o desenho precisavam funcionar com ou sem o agente.
O público é frio: gestores de projetos e PMOs que ainda não conhecem o Mario como produto de IA. Por isso a página precisava parecer séria antes de qualquer promessa, e dizer logo o que o agente não é: não é IA genérica, não substitui o gerente de projetos e não é um sistema de gestão.
A marca não é o agente
O agente tem nome próprio dentro da marca (PM Octopus Agent). O polvo e as cores ficam livres para outros produtos entrarem depois.
Polvo é muitos braços
Escopo, prazo, riscos, stakeholders e governança: as frentes que um gestor segura ao mesmo tempo. A faixa que corre sob o título da página lista esses braços, um por um.
Dizer o que ele não é
A seção de método e o FAQ trabalham as dúvidas de quem desconfia de IA: se substitui o gerente, se inventa informação, se serve para PMO.
Conceito e público conforme as notas de marca no cofre (PM Octopus - KV e - Mensagem e Público) e o contexto.projeto.md da landing.
A marca: um polvo, cinco cores e uma regra de peso
O isotipo é um polvo de braços em espiral, de linha grossa e contorno limpo. O logotipo é escrito em serifa de laje, e a assinatura "Por Mário Trentim" vai ao lado, em fonte monoespaçada pequena. Existem quatro variações e duas versões de cor: a clara, para fundo escuro, e a escura, para fundo claro.
A paleta tem cinco cores, e quase tudo vive no roxo sobre o quase preto. A tipografia é Inter para texto e JetBrains Mono para rótulos e prompts de exemplo, com uma regra dura: nada acima de semibold, nem nos títulos. Ela veio de uma correção depois da primeira versão.
Antes do logo final, o nome passou por testes no Figma em Space Mono, Arvo, Aleo e JetBrains Mono, inclusive escrito como código, <PM_octopus/>. Ficou a serifa no logotipo, e o lado "código" ficou na assinatura e nos rótulos.
Os testes de fonte vêm do arquivo Figma "Rascunhos, Junho" (cópia lida em 02/11/2026). O motivo da escolha final da serifa não está registrado em nenhum arquivo.
A landing, seção por seção
A página é majoritariamente escura, com três bandas claras para variar o fundo. A ordem das seções segue a conversa que o visitante teria antes de comprar: o que é, por que método, o que ele faz, por que confiar.
Manifesto: a voz do criador, que se lê rolando
Uma banda clara com três parágrafos assinados pelo Mario. As palavras aparecem uma a uma ao rolar, com um desfoque que some, e os trechos-chave ficam em roxo.
A decisão por trás: É a seção que mais carrega a voz da marca. A banda clara quebra o fundo escuro, o efeito mantém os destaques e a estrutura em três parágrafos, e sem JavaScript (como no Elementor) o texto aparece inteiro.
Benefícios: quatro cartões que mostram o produto em ação
Uma grade de dois por dois. Em cada cartão, uma cena animada em CSS: a conversa de diagnóstico, os documentos sendo gerados, um gráfico subindo e um cronograma com marcador.
A decisão por trás: O produto é um chat dentro de outra ferramenta, então não há tela própria para mostrar. As quatro cenas dão uma imagem do que acontece depois da compra. São ilustrações animadas, não dados reais.
Método: IA para apoiar a decisão, não para decidir por você
Três cartões, cada um com um ícone: método antes da resposta, clareza sobre lacunas e parceiro crítico.
A decisão por trás: Traz para a página a promessa central do produto: raciocínio de projetos em vez de texto bonito, e aviso quando falta informação em vez de prazo ou custo inventado.
A redação de todas as seções é do cliente. Também fazem parte da página, e ficaram fora das imagens, o preço, o depoimento em destaque, o mural de depoimentos, a seção sobre o Mário e o FAQ de dez perguntas.
Como construí: Astro, CSS escopado e o Elementor como destino
A página nasceu num repositório-base para landing pages: cria-se tudo em Astro, em localhost, e exporta-se um CSS global e um HTML por seção para colar em widgets do Elementor. Trabalhei com agentes de IA orientados por uma pasta de instruções do próprio repositório, com prompt de sistema, pipeline e dois portões de qualidade, e fiz passes de design com skills de revisão.
Duas decisões moldaram o código. Tudo é escopado numa classe raiz, para não vazar para o tema do WordPress. E o fundo de losangos, a assinatura visual, existe em duas camadas: WebGL de verdade no site em Astro, e uma versão só de CSS para o Elementor, que não roda WebGL.
- 19/06, noite
Primeira versão e passe de design
Landing escura, cartões animados e fundo de losangos em CSS. Em seguida, um passe de acessibilidade e de movimento: foco visível, feedback ao pressionar, curva de easing própria.
- 20/06, madrugada
Revisão de copy e de layout
Manifesto no lugar do "como funciona", hero reorganizado, cabeçalho em pílula flutuante. O fundo de losangos ganha a versão em WebGL, e o CSS fica como alternativa.
- 22/06, manhã
Refino visual e ritmo
FAQ e manifesto em banda clara, preço em duas colunas, revelação do manifesto feita com GSAP e um ajuste no espaçamento dos cabeçalhos.
Uma seção, um componente
Cada seção é um arquivo, com sua marca de seção e uma classe própria sob a classe raiz da página.
Escopo e fallback desde o início
Nada de seletor solto nem de :root, e todo efeito precisa de uma versão sem JavaScript, porque o destino é o Elementor.
Exportar e conferir
Um comando gera o CSS global e o HTML de cada seção. O README da exportação diz onde colar cada pedaço.
Datas e horários do git log do repositório da landing. As skills de revisão usadas estão no changelog de contexto.projeto.md. As instruções ficam na pasta intelligence/.
O que aprendi
O que eu levo deste projeto é menos sobre o polvo e mais sobre construir para um destino que limita o que você pode fazer. O Elementor impôs regras, e as regras melhoraram o código.
Um reset pode apagar o seu espaçamento.
A página estava "apertada" e eu procurava decisão de design. A causa era um reset de margem com especificidade maior que as classes de espaçamento. Passei a envolver todo reset escopado em :where().
Efeito bonito precisa de versão simples.
O Elementor não roda WebGL. Desenhar o fundo em duas camadas, com a de CSS entrando sozinha, foi o que deixou a assinatura da marca chegar à página no WordPress.
Regra de marca escrita vale mais que bom gosto.
O limite de peso semibold e o escopo de CSS estão registrados como regras do projeto. Quando eu ou um agente voltamos à página, a regra já está lá.
O que eu faço agora
Ligar os botões a um checkout real, trocar os depoimentos de exemplo por provas de verdade, pôr a foto do Mário no lugar do monograma e fazer o teste final de velocidade no WordPress. Enquanto isso não existir, a página mostra o design, não o resultado.