Sentinel by Kayzen
Vendere un prodotto di sicurezza agli ingegneri: ogni affermazione doveva essere dimostrabile.
- Anno
- 2026
- Progettazione
- 4 settimane
- Stack
- Next.js · React · TypeScript · Tailwind · Vercel
- Posizionamento
- Design
- Sviluppo
- SEO tecnica
- Copywriting
- falsi positivi dichiaratiogni finding è accompagnato da un PoC riproducibile
- 0
- primo rendering utileHTML statico servito dalla CDN
- < 1 s
- domini di terze parti chiamati al caricamento
- 0
Cosa c'era da risolvere.
Il contesto
Sentinel è la piattaforma di penetration test autonomo di Kayzen Web. Agenti IA non analizzano il codice: eseguono l'applicazione, tentano davvero lo sfruttamento e allegano un proof-of-concept riproducibile a ogni vulnerabilità confermata. Il sito è la vetrina commerciale del prodotto e la sua porta d'ingresso alla prova.
Il vincolo
Il pubblico di riferimento (CISO, lead developer, team di piattaforma) è il più impermeabile che esista al marketing. Un sito di sicurezza che promette «la protezione totale» perde credibilità alla prima riga. Serviva un sito che invogliasse senza mai promettere troppo, e che restasse comprensibile per un dirigente non tecnico venuto a confrontare tre fornitori.
La risposta
Abbiamo capovolto la gerarchia abituale: la prova prima della promessa. La home mostra prima un estratto di report reale (la vulnerabilità, la richiesta di sfruttamento, la correzione proposta) e solo dopo l'argomentazione. Il vocabolario resta quello del mestiere (PoC, falso positivo, CVSS), perché il lettore lo conosce e addolcirlo verrebbe scambiato per ignoranza.
Ogni scelta di design, e il suo perché.
Scuro di default, ma non decorativo
Il tema scuro è la convenzione del settore: gli strumenti di sicurezza vivono in un terminale. Qui è funzionale: i blocchi di codice e gli estratti di report sono gli elementi più letti della pagina, e un fondo scuro riduce l'abbagliamento nelle letture lunghe. I contrasti testo/sfondo restano sopra 7:1, cioè al livello AAA, non al minimo AA.
La prova come componente
Un componente «estratto di report» riutilizzabile: intestazione della vulnerabilità, gravità CVSS, richiesta, risposta, correzione. Compare quattro volte nella pagina, con casi diversi. È l'unico elemento animato della pagina: l'attenzione va dove si gioca la decisione d'acquisto.
Nessuna illustrazione astratta
Niente lucchetti, niente scudi, niente globi in wireframe. Le immagini sono schermate dello strumento. In questo mercato, l'iconografia generica è il segnale più affidabile che un prodotto non esiste ancora.
Densità sotto controllo
Una lunghezza di riga limitata a 68 caratteri e una scala tipografica fluida in clamp(). Il contenuto è denso per natura; è l'impaginazione che deve compensare, non il lettore.
Palette del progetto
Inchiostro
#0B1120
Sfondo di pagina
Ardesia
#1E293B
Card e blocchi di codice
Segnale
#38BDF8
Link e accenti
Allarme
#F43F5E
Solo gravità critica
Sistema tipografico
Titoli
Inter (pesi 600–800)
Testo corrente
Inter (400–500)
Una sola famiglia, due ruoli. Gli estratti di report usano la pila monospace di sistema: nessun font aggiuntivo viene scaricato.
Cosa c'è sotto il cofano.
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
Next.js con rendering statico
Ogni pagina è generata al build. Una vetrina di prodotto non ha dati dinamici da servire: il rendering server permanente costerebbe latenza e superficie d'attacco, per niente. L'HTML completo è servito dalla CDN.
Zero dipendenze di terze parti al caricamento
Nessun font Google, nessuno script di analytics esterno, nessun iframe di chat. Su un sito di sicurezza, ogni dominio terzo chiamato al primo rendering è un argomento contro se stessi, e un vero punto d'ingresso nella supply chain.
Header di sicurezza completi
Content-Security-Policy rigorosa, HSTS con preload, Referrer-Policy, Permissions-Policy chiusa di default. È il minimo che ci si aspetta da un produttore di sicurezza, e il primo riflesso di un potenziale cliente tecnico è aprire la scheda Rete per verificare.
Motore open source dichiarato
Il motore di esecuzione si basa sul progetto open source Strix. Il sito lo dice e ne mette il link invece di nasconderlo: con questo pubblico, la tracciabilità del mattone tecnico vale più di una scatola nera.
Come il sito si fa trovare.
Ricerche di confronto anziché generiche
«Pentest automatisé» (pentest automatizzato), «DAST vs pentest manuel», «faux positifs scanner de vulnérabilités» (falsi positivi degli scanner di vulnerabilità): ricerche di metà funnel, a basso volume e con un'intenzione fortissima. Battersi su «cybersicurezza» non sarebbe servito a nulla.
Markup SoftwareApplication
JSON-LD SoftwareApplication con categoria, sistema operativo e offerta, più una FAQPage sulle obiezioni ricorrenti («gli agenti possono rompere la mia produzione?»). Sono queste le risposte che citano gli assistenti IA.
Metadati social curati
Il prodotto si condivide su Slack e LinkedIn tra colleghi. Open Graph e Twitter card sono quindi trattati come un canale di acquisizione, con un'immagine dedicata e non il logo.
Utilizzabile da tutti.
Da giugno 2025 l'Atto europeo sull'accessibilità (European Accessibility Act) impone l'accessibilità digitale a una larga parte dei servizi online. La affrontiamo in fase di progettazione, non come rimedio a posteriori.
Contrasto AAA sul corpo del testo
Il tema scuro è la trappola classica: grigio chiaro su grigio scuro. Tutte le coppie sono state misurate; il corpo del testo è a 12:1, le etichette secondarie a 7:1.
Blocchi di codice navigabili da tastiera
Gli estratti di report scorrono in orizzontale su mobile: possono ricevere il focus e sono annunciati come regioni scorrevoli, altrimenti il loro contenuto sarebbe irraggiungibile senza mouse.
Cosa è stato consegnato.
- Home — prova, promessa, prova gratuita
- Funzionamento — il ciclo di un audit agentico
- Report — anatomia di un deliverable
- Prezzi
- Documentazione e motore open source
Lo svolgimento del progetto.
Impostazione
Colloqui con il team di prodotto, definizione delle obiezioni da trattare in ordine.
Contenuti
Redazione tecnica approvata dagli ingegneri prima di qualsiasi mockup.
Design
Sistema scuro, componente di prova, scala tipografica.
Sviluppo
Next.js statico, header di sicurezza, budget di performance.
Messa online
Collaudo di sicurezza, controllo degli header, Search Console.
Cosa ci chiedono spesso.
Altri lavori
Conformità GDPR e SaaSKonsent by Kayzen
Un fornitore di banner che verifica i banner è giudice e parte: l'indipendenza era il prodotto.
Dati e servizio meteoMétéo Climat France
358 pagine indicizzabili, una mappa animata su 72 scadenze e nemmeno una riga di framework.
Artigianato ed ediliziaBTP EA Rénovation
Sei campi, non uno di più: il modulo è il prodotto.
Lo stesso livello di rigore, per il tuo sito.
Audit gratuito del tuo sito attuale, preventivo entro 24 ore e un ragionamento scritto, come quello che hai appena letto. Pagamento in tre rate senza interessi; agevolazioni locali verificate prima della firma.