Sawyer Defence — site institutionnel

Sawyer Defence est un cabinet de conseil en défense indépendant, au Royaume-Uni, fondé par un ancien général de brigade de l'armée britannique, également passé par la diplomatie et l'industrie de défense. Sa proposition tient en un mot : le jugement d'ensemble — comprendre comment capacités, stratégie, production, marchés et opérations interagissent, plutôt que de traiter l'un de ces volets isolément. Le public visé est composé de décideurs publics et militaires de haut niveau.

Le client est arrivé avec un prototype HTML fonctionnel et un cahier des charges d'une précision inhabituelle. Le site devait faire deux choses : servir de porte d'entrée crédible aux prestations de conseil, et proposer trois auto-évaluations gratuites qui donnent à voir la méthode. Quatre règles fermes :

Jamais de note

Aucun pourcentage, aucun score, aucun badge, aucun indice de « maturité ». Les résultats sont quatre états nommés : force relative, mitigé ou incertain, à challenger, insuffisamment évalué.

Divulgation minimale

L'utilisateur doit obtenir de la valeur sans transmettre quoi que ce soit de sensible. Les réponses restent dans le navigateur et ne sont jamais envoyées.

Sobre, sérieux, contemporain

Rien de l'imagerie habituelle du secteur : ni camouflage, ni bouclier, ni aigle. Et pleinement utilisable sur un téléphone.

Accessible pour de vrai

Navigation au clavier, libellés, états de focus et contrastes testés, et non supposés.

Le bronze ne sert qu'en aplat — bouton principal, filets d'accent de 4 px, éclair du logo. En texte, seul le Bronze Deep passe. Aucune ombre nulle part : la profondeur vient de l'alternance blanc / nuage et de filets d'un pixel.

Seul développeur et concepteur de la phase 1 : recommandation d'architecture et de stack, cahier des charges de design, phase de design, design system, développement, déploiement, passation.

1. 01

   Reprise du prototype

   Le prototype avait les bonnes idées et de mauvaises fondations : deux navigations incohérentes, la moitié des classes CSS absentes, des barres de pourcentage dans les résultats et les vingt questions sur une seule page. J'ai gardé la séparation entre moteur, contenu et présentation, à laquelle le client tenait, et reconstruit le reste.

2. 02

   Conduite de la phase de design

   J'ai rédigé le cahier des charges de design à partir des exigences du client, produit et itéré les planches, puis les ai fait valider en une seule revue asynchrone pendant qu'il était en déplacement. Planches approuvées après un tour de modifications.

3. 03

   Design system écrit à la main

   Propriétés personnalisées CSS, sans framework. La palette brute est cloisonnée : les composants n'atteignent que des rôles sémantiques, et il n'existe aucun jeton de texte bronze à détourner. Un seul point de rupture, valeurs mobiles d'abord. Propriétés logiques partout, si bien que le site bascule en arabe sans changement de code ; la pile typographique embarque IBM Plex Sans Arabic en compagnon.

4. 04

   Pages vitrine sans script

   Le menu mobile est un élément de divulgation natif, stylé. L'auto-évaluation est le seul îlot, en TypeScript sans framework, et chaque page reste entièrement lisible JavaScript désactivé — y compris la liste statique des vingt questions.

5. 05

   L'impression comme livrable

   « Imprimer ou enregistrer en PDF » produit une feuille A4 de deux pages depuis la page de résultats vivante, par la seule feuille de style d'impression : le motif des cinq dimensions et le sens de chaque état, les cinq questions à reprendre, puis le détail. Les glyphes sont des SVG en ligne, en noir, pour que l'état à moitié rempli s'imprime avec ou sans fonds.

6. 06

   Chaîne de livraison

   Déploiement continu vers Cloudflare Workers static assets, et une URL de préversion stable par branche : le client valide une page à une adresse qui ne change pas, sans installation ni rendez-vous.

Astro 7 en sortie statique · TypeScript · CSS avec propriétés personnalisées · IBM Plex auto-hébergée · Vitest et Playwright · Cloudflare Workers static assets · GitHub Actions et Wrangler avec préversions par branche · Umami · Resend pour le formulaire de contact.

Design approuvé en septembre 2026. Design system construit et intégré. Pages et auto-évaluation en cours de développement. Objectif de lancement : automne 2026.