REX : une après-midi pour rendre le design de Citios Impeccable
L’été, en théorie, c’est la plage. En pratique, c’est souvent le moment où un CTO freelance regarde son propre site et se dit : « OK… ça tient la route, mais est-ce que j’ai vraiment des règles de design, ou juste des habitudes ? »
Citios tourne bien. Pages services, blog, formulaire, cookies — le socle est sérieux. Mais le design avait grandi par couches : un hero un peu flamboyant, du vert d’eau partout, des contrastes « ça passe sur mon écran », une navigation clavier inégale. Bref, un site de CTO… qui n’avait jamais vraiment eu son atelier design dédié.
Alors j’ai pris Impeccable (un assistant design dans Cursor), un café, et j’ai traité citios.fr comme un petit projet produit d’été. Pas une refonte glossy d’agence. Un passage en revue méthodique : documenter, auditer, corriger, recommencer.
Voici le récit — pour comprendre le principe, même si tu n’écris pas une ligne de code.
C’est quoi Impeccable ? (et comment l’installer)
Impeccable, c’est un outil open source pour les assistants de code (Cursor, Claude Code, etc.). L’idée : au lieu de demander vaguement « rends ça plus beau » — et de récupérer le fameux look IA (dégradé violet, cartes partout, même police partout) — tu disposes d’un vocabulaire de design en commandes : audit, typo, accessibilité, polish, et d’autres. Derrière, des guides + un détecteur de mauvaises habitudes.
En gros : ça transforme l’assistant en directeur design un peu tatillon, avec un brief écrit (PRODUCT.md, DESIGN.md) plutôt qu’en décorateur aléatoire.
Installation (si tu bosses dans Cursor)
À la racine du projet :
npx impeccable installL’outil détecte ton éditeur, propose une install projet ou globale, et dépose le skill au bon endroit. Tu peux ensuite lancer un audit sur une page, par exemple /impeccable audit.
La doc à jour : github.com/pbakaus/impeccable.
Le point de départ : un site qui « marche », pas un système
Avant Impeccable, Citios avait déjà une identité : bleu marine, vert d’eau (teal), fond clair froid, hero sombre façon terminal. Ça collait à l’offre (CTO hands-on, pas SaaS violet).
Ce qui manquait :
- Une intention écrite — pas juste « j’aime ce bleu »
- Des règles claires — boutons, contraste, pages claires vs pages sombres
- Un filet de sécurité — audits chiffrés, priorités (urgent / important / plus tard)
- Des faits produit ancrés — 25 ans dans la tech, 15 ans CTO, 5 postes CTO/DT, pas des chiffres inventés
Sans ça, chaque session avec un assistant, c’est la loterie : il « embellit », tu te retrouves avec des pastilles arrondies et un dégradé indigo. Classic.
Acte 1 — Écrire avant de peindre
Impeccable pousse deux documents que je recommande à quiconque bosse avec un assistant sur l’UI :
PRODUCT.md — le vrai du faux
Qui décide, pour qui, quoi promettre, quoi ne pas inventer. Pour Citios : fondateur non-tech en early-stage en priorité, conversion = conversation (formulaire / prise de rendez-vous), faits d’expérience figés. Zéro faux témoignage client, zéro chiffre magique.
Ça a l’air administratif. En vrai, c’est ce qui empêche l’IA de remplir le site avec du marketing creux.
DESIGN.md — la carte d’identité visuelle
On a ancré :
- Intention : « La Passerelle Fondateur ↔ Tech » — lisible pour un CEO non-tech, crédible pour quelqu’un qui code
- Couleurs : Marine Atlantique + Teal Signal (le vert d’eau de marque)
- Règles : ombres douces, typo lisible d’abord, coins discrets, pas de blanc sur teal vif pour les boutons principaux
- Ce qu’on refuse : SaaS violet, néon startup
Photographier l’existant avant de le juger aide aussi : on ne redessine pas un site qu’on n’a pas encore décrit.
Acte 2 — Le choc du premier audit
Premier audit Impeccable : 12/20. Acceptable, pas fier.
La claque principale était le contraste : texte blanc sur le teal de marque. Tous les boutons primaires flamboyants… difficiles à lire. Le genre de truc que tu ne vois plus quand tu es trop habitué à ton propre branding.
Autres alertes classiques :
- Couleurs « officielles » d’un côté, couleurs bricolées un peu partout de l’autre
- Animations du hero qui bougent même quand on préfère moins de mouvement
- Navigation au clavier incomplète
- Chiffres produit à clarifier (on a figé 25 ans / 15 ans CTO / 5 postes)
Verdict : le site ressemblait déjà à Citios, mais les règles fuyaient.
Acte 3 — Le problème du teal trop beau
Garder le teal de marque et des boutons lisibles, c’est un vrai casse-tête. Options explorées :
- Teal vif + texte marine — le bouton reste marque, mais on abandonne le blanc sur teal
- Fond pastel + texte plus foncé — même famille de couleur, bien plus lisible
- Bouton contour — transparent + bordure teal
On a choisi la option 2 pour les actions principales. Le teal vif reste l’accent (bordures, hero sombre, soulignements). Sur le fond clair, on n’écrit plus avec le teal flashy : trop faible. On passe par une teinte plus sombre, prévue pour le texte.
Leçon d’été n°1 : une couleur de marque n’est pas automatiquement une couleur de texte.
Acte 4 — Une suite de passes, pas un bouton magique
Impeccable, ce n’est pas « rends tout joli ». C’est une suite de passes avec des jobs différents. Chez moi, ça a ressemblé à ça :
| Passe | En clair |
|---|---|
| Typo | Hiérarchie, interlignage, poids de police plus lisibles |
| Durcir | Contrastes, focus clavier, formulaire, cookies, zones tactiles |
| Images & polices | Images mieux servies, polices allégées (la « fancy » surtout au hero) |
| Header | Plus bas → moins de chrome, plus de contenu |
| Polish | Détails finaux, messages de succès, stabilité des images blog |
| Re-audit | Remesurer, classer ce qui reste |
| Correctifs ciblés | Boutons lisibles sur fond clair, fil d’Ariane sombre, Escape sur les cookies, lien « Aller au contenu » |
Score en fin de parcours (à date) : 17/20. Pas un 20/20 marketing — un 17 honnête, avec encore des petits chantiers ouverts.
Leçon d’été n°2 : auditer sans tout corriger d’un coup, puis corriger sans tout réécrire. Résister à l’envie de « tout refaire from scratch » entre deux baignades.
Acte 5 — Amplifier une page, sans tout changer
Après les audits transverses, j’ai voulu un cas ciblé. La commande bolder, ce n’est pas « plus d’effets partout » : c’est une surface, avec le vocabulaire déjà décidé, et le reste intouché.
La demande : rendre la page contact plus affirmée.
Ce qui était mou
La page contact tenait debout, mais elle n’utilisait pas les coups forts du système : pas d’accent teal sur le titre, hero un peu plat, lien FAQ qui détournait de la conversion, titre « Me contacter » mal placé dans le bleu.
Le geste décisif
- Hero marine + lueur teal, titre avec accent votre projet
- Formulaire seul qui « monte » dans le hero (sur grand écran) — les autres moyens de contact restent sur le fond clair
- FAQ sortie du hero (rangée dans le pied de page) — la page contact doit convertir, pas renvoyer lire
- Claims inchangés (25 ans / 15 ans CTO)
Tu peux comparer les deux états ci-dessous (glisser le curseur) :
Comparaison avant / après — faites glisser le curseur
(Captures d’écran réelles de la page contact — avant et après.)
Leçon d’été n°3 : amplifier = une section qui rejoint le niveau d’expression que le reste du site a déjà, pas une nouvelle identité.
Ce qui a vraiment changé sur le site (concret)
Deux registres, une marque
- Pages claires : police sobre, marine, ombres douces, boutons pastel lisibles
- Hero d’accueil : ambiance terminal, teal qui « pop » sur fond sombre (là, le contraste passe)
Même marque, deux ambiances. Documenté pour que le prochain assistant ne clone pas le terminal sur chaque page service.
Accessibilité sans théâtre
- Boutons principaux assez contrastés pour être lus confortablement
- Lien « Aller au contenu » branché sur toutes les pages (on en avait oublié deux)
- Bannière cookies : Escape = refus, focus remis au bon endroit
- Fil d’Ariane lisible sur fond sombre
Petit détail : le lien « Aller au contenu », personne ne le voit… jusqu’au premier Tab. Puis il devient évident pourquoi c’était prioritaire.
Plus léger, plus soigné
- Images mieux gérées
- Moins de variantes de polices inutiles
- Animations du hero respectueuses de « moins de mouvement » quand c’est demandé
Copy & faits
Pas de « 15+ années » floues : 25 ans tech / 15 ans CTO / 5 expériences CTO-DT. Des belles règles de design ne sauvent pas un chiffre faux.
Ce que j’ai appris sur le duo CTO + assistant design
1. Le brief gagne toujours
Si PRODUCT.md et DESIGN.md sont clairs, l’assistant affine. S’ils sont vagues, il improvise — et l’improvisation IA, en design marketing, ça ressemble à tout le monde.
2. Le détecteur se trompe parfois
Il signalait des couleurs « hors palette » : les pastilles rouge/jaune/vert du chrome de fenêtre façon macOS. Normal. Il faut vérifier en contexte, pas tout « corriger » bêtement.
3. Les petits chantiers restants ne sont pas des échecs
Animations encore trop présentes hors hero, quelques tailles de titre hors grille… Ce sont des dettes assumées. Un projet d’été a une fin ; un score 17/20 avec une liste claire vaut mieux qu’un 20/20 fantôme.
4. Le design sert la conversation, pas l’ego
Intention Passerelle Fondateur ↔ Tech = chaque choix doit aider un fondateur non-tech à comprendre l’offre et prendre un créneau. Si le hero est trop « insider », on perd. Si le bouton est illisible, on perd. Le reste, c’est du soin.
Pour qui ça vaut le coup de reproduire ?
Si tu as :
- un site marketing déjà en ligne,
- une identité visuelle « à peu près là »,
- et l’habitude de bosser avec Cursor (ou un assistant équivalent),
…une semaine d’été (ou deux week-ends) sur écrire les règles → auditer → durcir → ré-auditer change plus la qualité perçue qu’une couche de vernis.
Si tu démarres de zéro, Impeccable a aussi des modes pour inventer. Là, on était clairement en mode affinage : garder Citios, enlever le flou.
Et maintenant ?
Le site est plus cohérent, plus lisible, un peu plus rapide à charger, et surtout plus honnête avec ses propres règles. Les petits chantiers restants peuvent attendre le prochain week-end pluvieux (ou la prochaine session entre deux appels clients).
Si tu veux voir le résultat : citios.fr. Si tu veux discuter stack, design ou CTO à la demande — on en parle.
Bon été — et bon audit.
Vous cherchez un CTO à la demande pour votre startup ou votre PME ?
Discutons de votre projet