Sentinel by Kayzen
Vendre un produit de sécurité à des ingénieurs : chaque affirmation devait être démontrable.
- Année
- 2026
- Conception
- 4 semaines
- Stack
- Next.js · React · TypeScript · Tailwind · Vercel
- Positionnement
- Design
- Développement
- SEO technique
- Rédaction
- faux positif revendiquéchaque finding est accompagné d'un PoC rejouable
- 0
- premier rendu utileHTML statique servi depuis le CDN
- < 1 s
- domaine tiers appelé au chargement
- 0
Ce qu'il fallait résoudre.
Le contexte
Sentinel est la plateforme de test d'intrusion autonome de Kayzen Web. Des agents IA n'analysent pas le code : ils exécutent l'application, tentent réellement l'exploitation et joignent un proof-of-concept rejouable à chaque vulnérabilité retenue. Le site est la vitrine commerciale du produit et sa porte d'entrée à l'essai.
La contrainte
Le public cible — RSSI, lead developers, équipes plateforme — est le plus imperméable qui soit au marketing. Un site de sécurité qui promet « la protection totale » perd sa crédibilité à la première ligne. Il fallait un site qui donne envie sans jamais surpromettre, et qui reste lisible pour un dirigeant non technique venu comparer trois prestataires.
La réponse
Nous avons renversé la hiérarchie habituelle : la preuve avant la promesse. La page d'accueil montre d'abord un extrait de rapport réel — la vulnérabilité, la requête d'exploitation, le correctif proposé — puis seulement ensuite l'argumentaire. Le vocabulaire reste celui du métier (PoC, faux positif, CVSS) parce que le lecteur le connaît et que l'édulcorer serait pris pour de l'ignorance.
Chaque parti pris, et sa raison.
Sombre par défaut, mais pas décoratif
Le thème sombre est la convention du secteur : les outils de sécurité vivent dans un terminal. Il est ici fonctionnel — les blocs de code et les extraits de rapport sont les éléments les plus lus de la page, un fond sombre réduit l'éblouissement sur les longues lectures. Les contrastes texte/fond restent au-dessus de 7:1, soit le niveau AAA, et non le minimum AA.
La preuve comme composant
Un composant « extrait de rapport » réutilisable : en-tête de vulnérabilité, sévérité CVSS, requête, réponse, correctif. Il apparaît quatre fois dans la page, avec des cas différents. C'est le seul élément animé de la page — l'attention va là où se joue la décision d'achat.
Aucune illustration abstraite
Pas de cadenas, pas de bouclier, pas de globe filaire. Les visuels sont des captures de l'outil. Sur ce marché, l'iconographie générique est le signal le plus fiable qu'un produit n'existe pas encore.
Densité maîtrisée
Une largeur de ligne bornée à 68 caractères et une échelle typographique fluide en clamp(). Le contenu est dense par nature ; c'est la mise en page qui doit compenser, pas le lecteur.
Palette du projet
Encre
#0B1120
Fond de page
Ardoise
#1E293B
Cartes et blocs de code
Signal
#38BDF8
Liens et accents
Alerte
#F43F5E
Sévérité critique uniquement
Système typographique
Titrage
Inter (graisses 600–800)
Texte courant
Inter (400–500)
Une seule famille, deux rôles. Les extraits de rapport passent en pile monospace système : aucune police supplémentaire n'est téléchargée.
Ce qu'il y a sous le capot.
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
Next.js en rendu statique
Chaque page est générée au build. Une vitrine produit n'a aucune donnée dynamique à servir : le rendu serveur permanent coûterait de la latence et une surface d'attaque, pour rien. Le HTML complet est servi depuis le CDN.
Zéro dépendance tierce au chargement
Aucune police Google, aucun script d'analytics externe, aucune iframe de chat. Sur un site de sécurité, chaque domaine tiers appelé au premier rendu est un argument contre soi — et un point d'entrée réel dans la chaîne d'approvisionnement.
En-têtes de sécurité complets
Content-Security-Policy stricte, HSTS avec preload, Referrer-Policy, Permissions-Policy fermée par défaut. C'est le minimum attendu d'un éditeur de sécurité — et le premier réflexe d'un prospect technique est d'ouvrir l'onglet Réseau pour vérifier.
Moteur open source assumé
Le moteur d'exécution s'appuie sur le projet open source Strix. Le site le dit et le lie plutôt que de le masquer : sur ce public, la traçabilité de la brique technique vaut mieux qu'une boîte noire.
Comment le site se rend trouvable.
Requêtes de comparaison plutôt que génériques
« Pentest automatisé », « DAST vs pentest manuel », « faux positifs scanner de vulnérabilités » : des requêtes de milieu de tunnel, faibles en volume, très fortes en intention. Se battre sur « cybersécurité » n'aurait servi à rien.
Balisage SoftwareApplication
JSON-LD SoftwareApplication avec catégorie, système d'exploitation et offre, plus une FAQPage sur les objections récurrentes (« les agents peuvent-ils casser ma production ? »). Ce sont ces réponses que les assistants IA citent.
Métadonnées sociales soignées
Le produit se partage en Slack et sur LinkedIn entre pairs. Open Graph et carte Twitter sont donc traités comme un canal d'acquisition, avec une image dédiée et non le logo.
Utilisable par tout le monde.
Depuis juin 2025, l'European Accessibility Act impose l'accessibilité numérique à une large part des services en ligne. Nous la traitons à la conception, pas en rattrapage.
Contraste AAA sur le corps de texte
Le thème sombre est le piège classique : gris clair sur gris foncé. Toutes les paires ont été mesurées ; le corps de texte est à 12:1, les libellés secondaires à 7:1.
Blocs de code navigables au clavier
Les extraits de rapport défilent horizontalement sur mobile : ils sont focalisables et annoncés comme régions défilables, sinon leur contenu est inatteignable sans souris.
Ce qui a été livré.
- Accueil — preuve, promesse, essai
- Fonctionnement — le cycle d'un audit agentique
- Rapports — anatomie d'un livrable
- Tarifs
- Documentation & moteur open source
Le déroulé du projet.
Cadrage
Entretiens avec l'équipe produit, définition des objections à traiter dans l'ordre.
Contenu
Rédaction technique validée par les ingénieurs avant toute maquette.
Design
Système sombre, composant de preuve, échelle typographique.
Développement
Next.js statique, en-têtes de sécurité, budget de performance.
Mise en ligne
Recette sécurité, contrôle des en-têtes, Search Console.
Ce qu'on nous demande souvent.
D'autres réalisations
Conformité RGPD & SaaSKonsent by Kayzen
Un éditeur de bandeau qui audite les bandeaux est juge et partie : l'indépendance était le produit.
Data & Service météoMétéo Climat France
358 pages indexables, une carte animée sur 72 échéances — et pas une seule ligne de framework.
Artisanat & BâtimentBTP EA Rénovation
Six champs, pas un de plus : le formulaire est le produit.
Le même niveau d'exigence, pour votre site.
Audit gratuit de votre site actuel, devis sous 24 h et un raisonnement écrit — comme celui que vous venez de lire. Paiement en trois fois sans frais, aides locales vérifiées avant signature.