Cas 05 · Identité de marque
Un chevalier qui
monte la garde.
L’identité de WPress Sentinel, notre plateforme de sécurité WordPress : un chevalier sur une console bleu-noir, un bleu qui veut dire « agir », un bronze qui ne le veut jamais, et des couleurs d’état qui ne font que rapporter un état — codifiée en une trousse dont l’extension, l’analyseur et le site Web se servent tous.
- 01 // Rôle
- Stratégie · Identité · Système de design
- 02 // Livrable
- Trousse de design — jetons et règles
- 03 // Année
- 2026
- 04 // En usage
- presssentinel.com · l’admin de l’extension
A Le mandat
Les outils de sécurité vendent la peur : alertes rouges, boucliers clignotants, avertissements pour des choses que personne n’a vérifiées. C’est l’inverse de ce que promet Sentinel. La marque devait paraître calme, vigilante et exacte — assez digne de confiance pour qu’on lui remette les clés d’un site en ligne.
A.2 Ce qu’il devait faire
- 01Un gardien, pas une alarme — la vigilance sans la panique
- 02Une seule couleur pour l’action, pour qu’un clic ne fasse jamais de doute
- 03Des couleurs d’état qui rapportent un état, et rien d’autre
- 04Un site marketing bâti comme le produit, pour ne jamais trop promettre
B · La trousse
Calme par design.
Chaque règle de la trousse existe pour garder la console calme et exacte. Essayez-les : passez le bouton en bronze, aplatissez les surfaces, faites des couleurs d’état une décoration.
01 — Typo · deux polices
Surveiller · Protéger · Corriger · Vérifier
Sachez que votre site est sûr. Puis laissez-le se réparer.
Space Grotesk pour les titres, interlettrage serré
Une analyse gratuite en 36 points montre ce qu’un attaquant voit. L’extension referme ensuite chaque brèche de l’intérieur.
Inter porte chaque mot de l’interface · majuscules bronze pour les surtitres
02 — Le bleu veut dire agir
La seule couleur interactive. Au survol, elle s’éclaircit et monte d’un pixel — rien d’autre n’est bleu sur la page.
Conforme à la marque03 — Des paliers, une seule ombre
04 — L’état est un vocabulaire
- Intégrité des fichiers du noyauRéussi
- 2 mises à jour d’extensionAvertissement
- XML-RPC exposéÉchec
- Analyse complèteEn cours
C · Système d’identité
De l’idée à l’identité.
Le chevalier sur sa grille de construction, la palette et la typographie — une seule trousse dont l’extension, l’analyseur et presssentinel.com se servent. Choisissez une couleur pour y voir le logo.
Couleur
Typographie
Aa Titre
Aa Texte — Inter
Surveiller · Protéger · Corriger · Vérifier
D · Les règles
Six règles, sans exception.
- 01Le bleu veut dire agir
- Le bleu Sentinel est la seule couleur interactive — boutons, liens, focus, navigation active. Rien d’autre n’est bleu.
- 02Le bronze, jamais
- La note chaude, tirée du réticule du chevalier : surtitres, coins de l’affichage tête haute, bordures d’insignes. Jamais un aplat, jamais un lien.
- 03L’état est un vocabulaire
- OK, avertissement, problème et info n’apparaissent que pour rapporter un état. Le vert veut dire réussi — jamais décoratif.
- 04Deux polices
- Space Grotesk coiffe la page avec un interlettrage serré; Inter porte chaque mot de l’interface à densité de console. Les deux sont embarquées.
- 05La profondeur par paliers de surface
- Fond, surface, relevé, sommet — plus des filets de 1 px et une seule ombre douce pour les cartes. Des panneaux sur un bureau, pas des tuiles flottantes.
- 06Des cartes pour les objets seulement
- Cartes de 12 px, contrôles de 8 px, pastilles de 20 px. Les sections ne sont jamais encadrées, et les grands panneaux ne s’animent pas au survol.
E · Ingénierie
Comment c’est bâti.
- 01
La trousse, c’est du code
Un seul fichier de design lisible par machine contient chaque jeton de couleur, de typographie, d’arrondi, d’espacement et de composant — avec la justification de chaque règle.
- 02
Copiés, pas imités
Les jetons du site Web sont copiés tels quels de l’extension : la console que voient les visiteurs est celle qu’ils installent.
- 03
Deux dessins du chevalier
Un emblème en couleurs pour la marque, et un dessin au trait d’une seule couleur pour les interfaces, les petites tailles et toute déclinaison de couleurs.
- 04
Léger pour le matériel
Les polices sont embarquées, pas chargées d’un CDN, et aucune superposition floutée sur les pages qui défilent — elles saturent le GPU des machines plus anciennes.
Pile technologique
F · Impact
En chiffres.
- 1
- Couleur interactive — le bleu, rien d’autre
- 1
- Note chaude — le bronze, jamais cliquable
- 4
- Couleurs d’état, seulement pour rapporter
- 2
- Polices, toutes deux embarquées