Sentinel by Kayzen
Vender um produto de segurança a engenheiros: cada afirmação tinha de ser demonstrável.
- Ano
- 2026
- Conceção
- 4 semanas
- Stack
- Next.js · React · TypeScript · Tailwind · Vercel
- Posicionamento
- Design
- Desenvolvimento
- SEO técnico
- Redação
- falsos positivos reivindicadoscada finding é acompanhado de um PoC reproduzível
- 0
- primeira renderização útilHTML estático servido a partir da CDN
- < 1 s
- domínios de terceiros chamados no carregamento
- 0
O que era preciso resolver.
O contexto
O Sentinel é a plataforma de testes de intrusão autónomos da Kayzen Web. Agentes de IA não se limitam a analisar o código: executam a aplicação, tentam efetivamente a exploração e anexam um proof-of-concept reproduzível a cada vulnerabilidade confirmada. O site é a montra comercial do produto e a sua porta de entrada para o teste gratuito.
A restrição
O público-alvo — CISO, lead developers, equipas de plataforma — é o mais impermeável ao marketing que existe. Um site de segurança que promete «proteção total» perde a credibilidade logo na primeira linha. Era preciso um site que despertasse interesse sem nunca prometer de mais, e que continuasse legível para um dirigente não técnico que veio comparar três fornecedores.
A resposta
Invertemos a hierarquia habitual: a prova antes da promessa. A página inicial mostra primeiro um excerto de relatório real — a vulnerabilidade, o pedido de exploração, a correção proposta — e só depois o argumentário. O vocabulário continua a ser o da profissão (PoC, falso positivo, CVSS), porque o leitor o conhece e suavizá-lo seria interpretado como ignorância.
Cada opção, e a sua razão.
Escuro por predefinição, mas não decorativo
O tema escuro é a convenção do setor: as ferramentas de segurança vivem num terminal. Aqui é funcional — os blocos de código e os excertos de relatório são os elementos mais lidos da página, e um fundo escuro reduz o encandeamento nas leituras longas. Os contrastes texto/fundo mantêm-se acima de 7:1, ou seja, o nível AAA, e não o mínimo AA.
A prova como componente
Um componente «excerto de relatório» reutilizável: cabeçalho da vulnerabilidade, gravidade CVSS, pedido, resposta, correção. Aparece quatro vezes na página, com casos diferentes. É o único elemento animado da página — a atenção vai para onde se joga a decisão de compra.
Nenhuma ilustração abstrata
Nada de cadeados, escudos ou globos em arame. Os visuais são capturas de ecrã da ferramenta. Neste mercado, a iconografia genérica é o sinal mais fiável de que um produto ainda não existe.
Densidade controlada
Uma largura de linha limitada a 68 caracteres e uma escala tipográfica fluida em clamp(). O conteúdo é denso por natureza; é o layout que tem de compensar, não o leitor.
Paleta do projeto
Tinta
#0B1120
Fundo da página
Ardósia
#1E293B
Cartões e blocos de código
Sinal
#38BDF8
Links e destaques
Alerta
#F43F5E
Apenas gravidade crítica
Sistema tipográfico
Títulos
Inter (pesos 600–800)
Texto corrido
Inter (400–500)
Uma só família, dois papéis. Os excertos de relatório usam a pilha monoespaçada do sistema: nenhuma fonte adicional é descarregada.
O que está por baixo do capô.
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
Next.js em renderização estática
Cada página é gerada no build. Uma montra de produto não tem nenhum dado dinâmico para servir: a renderização permanente no servidor custaria latência e superfície de ataque, para nada. O HTML completo é servido a partir da CDN.
Zero dependências de terceiros no carregamento
Nenhuma fonte Google, nenhum script de analytics externo, nenhuma iframe de chat. Num site de segurança, cada domínio de terceiros chamado na primeira renderização é um argumento contra si próprio — e um ponto de entrada real na cadeia de abastecimento.
Cabeçalhos de segurança completos
Content-Security-Policy estrita, HSTS com preload, Referrer-Policy, Permissions-Policy fechada por predefinição. É o mínimo que se espera de um editor de segurança — e o primeiro reflexo de um potencial cliente técnico é abrir o separador Rede para verificar.
Motor open source assumido
O motor de execução assenta no projeto open source Strix. O site di-lo e aponta para ele em vez de o esconder: para este público, a rastreabilidade da peça técnica vale mais do que uma caixa negra.
Como o site se torna encontrável.
Pesquisas de comparação em vez de genéricas
«Pentest automatisé» (pentest automatizado), «DAST vs pentest manuel», «faux positifs scanner de vulnérabilités» (falsos positivos de scanners de vulnerabilidades): pesquisas de meio de funil, de volume baixo e intenção muito forte. Lutar por «cibersegurança» não teria servido de nada.
Marcação SoftwareApplication
JSON-LD SoftwareApplication com categoria, sistema operativo e oferta, mais uma FAQPage sobre as objeções recorrentes («os agentes podem partir a minha produção?»). São estas respostas que os assistentes de IA citam.
Metadados sociais cuidados
O produto partilha-se no Slack e no LinkedIn entre pares. Open Graph e cartão do Twitter são, por isso, tratados como um canal de aquisição, com uma imagem dedicada e não o logótipo.
Utilizável por todos.
Desde junho de 2025, o Ato Europeu da Acessibilidade exige a acessibilidade digital a uma grande parte dos serviços online. Tratamo-la na conceção, não como correção posterior.
Contraste AAA no corpo de texto
O tema escuro é a armadilha clássica: cinzento-claro sobre cinzento-escuro. Todos os pares foram medidos; o corpo de texto está a 12:1 e as legendas secundárias a 7:1.
Blocos de código navegáveis por teclado
Os excertos de relatório deslocam-se horizontalmente no telemóvel: podem receber o foco e são anunciados como regiões deslocáveis; caso contrário, o seu conteúdo seria inalcançável sem rato.
O que foi entregue.
- Início — prova, promessa, teste gratuito
- Funcionamento — o ciclo de uma auditoria agêntica
- Relatórios — anatomia de um entregável
- Preços
- Documentação e motor open source
As etapas do projeto.
Enquadramento
Entrevistas com a equipa de produto, definição das objeções a tratar e da respetiva ordem.
Conteúdo
Redação técnica validada pelos engenheiros antes de qualquer maqueta.
Design
Sistema escuro, componente de prova, escala tipográfica.
Desenvolvimento
Next.js estático, cabeçalhos de segurança, orçamento de desempenho.
Lançamento
Testes de segurança, verificação dos cabeçalhos, Search Console.
O que nos perguntam com frequência.
Outros projetos
Conformidade RGPD & SaaSKonsent by Kayzen
Um editor de banners que audita banners é juiz em causa própria: a independência era o produto.
Dados & Serviço meteorológicoMétéo Climat France
358 páginas indexáveis, um mapa animado em 72 horizontes — e nem uma linha de framework.
Artesanato & ConstruçãoBTP EA Rénovation
Seis campos, nem mais um: o formulário é o produto.
O mesmo nível de exigência, para o seu site.
Auditoria gratuita do seu site atual, orçamento em 24 h e um raciocínio por escrito — como o que acabou de ler. Pagamento em três prestações sem juros; apoios locais verificados antes da assinatura.