Comment j'ai choisi l'identité visuelle du site

31 août 2026 dev design

J'ai déjà raconté, dans la genèse de ce site, comment il a été construit — le processus, les agents spécialisés, le passage de l'idée au site en ligne. Ici c'est autre chose : à quoi il ressemble, et pourquoi. Les choix de couleur, le dark mode, l'effet verre, l'identité de chaque section. Le "comment j'ai codé" d'un côté, le "pourquoi ça a cette tête-là" de l'autre.

Le problème de départ était simple à énoncer et pas si simple à résoudre : le site a quatre parties — CV, musique, jeux vidéo, blog — et je voulais qu'on sente qu'on change d'univers en passant de l'une à l'autre, sans que ça devienne quatre sites différents recollés ensemble.

J'ai commencé par le socle, avant même de penser identité par section : le dark mode. Le réflexe facile, c'est de partir sur du noir pur et du blanc pur, et ça donne un résultat qui fatigue les yeux et qui, sur les écrans OLED, finit par marquer l'écran à l'usage (smearing). La recherche 2026 sur le sujet est unanime là-dessus : un gris très sombre plutôt qu'un noir franc (j'ai retenu #121212), un blanc cassé plutôt qu'un blanc pur pour le texte, et pas plus d'un ou deux accents de couleur, désaturés à 70-80 % — en dark mode, chaque couleur pèse visuellement plus lourd qu'en fond clair, donc mieux vaut en mettre moins. J'ai aussi veillé au contraste minimum recommandé (WCAG AA, grosso modo 4,5:1 pour du texte normal), pas pour cocher une case d'accessibilité qu'on m'aurait imposée, mais parce qu'un site illisible n'a aucun intérêt à exister.

Sur la matière, j'avais trois directions possibles. La première, celle que j'ai gardée : un "verre sombre feutré" — fond très sombre, une lueur diffuse en arrière-plan (un halo bleu très désaturé qui dérive lentement), des cartes en verre dépoli (l'effet backdrop-filter: blur(), qu'on appelle glassmorphism), un seul accent bleu, des titres légèrement plus lourds en dark mode parce qu'un texte fin devient vite difficile à lire sur fond sombre. C'est la direction la plus proche de ce qui ressort des tendances 2026, et elle collait avec ce qui existait déjà dans le repo (le dark mode était déjà géré via prefers-color-scheme). Le glassmorphism, en particulier, est passé de gadget à langage de design qui a fait ses preuves — et il se fait entièrement en CSS natif, sans librairie.

J'avais deux autres pistes, écartées mais gardées en tête pour plus tard. Un "terminal chaleureux" : touches monospace sur les labels et les dates pour signer visuellement le développeur, un accent chaud (ambre, orange désaturé — plus proche de l'univers musique que le bleu "tech"), une légère texture de grille en fond façon circuit imprimé. Plus marqué, plus risqué si mal dosé, je l'ai mis de côté. Et un "minimal éditorial" : beaucoup de blanc, des titres en serif système (pas de police distante — ui-serif/Georgia suffisent), l'accent réservé aux liens, quasiment plus de cartes, juste des séparateurs fins. Cette direction-là convient à un site pensé comme un essai ou un blog plutôt qu'une vitrine de compétences — elle reprendra peut-être du sens si le blog devient un jour la partie dominante du site. Pour l'instant, j'ai gardé le verre sombre comme base commune.

Vient ensuite la question de l'identité par section, qui était le vrai sujet : comment donner à chaque partie sa propre couleur sans que ça se transforme en quatre chartes graphiques différentes. La recherche sur les systèmes multi-marques est claire là-dessus, et c'est un pattern qui existe depuis longtemps dans le design de marque (le "wayfinding") : on garde fixes la typographie, la grille, les rayons de coin, les ombres, le rythme d'espacement — et on ne fait varier que la couleur (parfois une légère variation de forme) d'une sous-identité à l'autre. C'est ce qui permet à quelqu'un de reconnaître "même système" tout en sentant "univers différent" en changeant de page.

Techniquement, ça tombait bien : le site utilisait déjà des variables CSS centralisées (--accent, --accent-2, --bg-glow...). Il suffisait de les redéfinir dans un petit fichier theme.css propre à chaque section, sans jamais toucher aux règles de composants elles-mêmes (les cartes, la timeline, les boutons restent identiques partout). Une couleur qui change, une structure qui ne bouge pas.

La palette, section par section : le CV reste neutre, en bleu et orange — c'est la base du site, celle qui donne le ton, donc je ne voulais rien y bousculer. La musique passe en violet profond et or champagne, une ambiance sombre et un peu classe, cohérente avec ce que je fais musicalement. Les jeux vidéo basculent sur du corail et du turquoise, des coins plus arrondis, des micro-interactions un peu plus "rebondissantes" au survol — volontairement enfantin, à l'image du projet fait avec mon fils. Le blog, enfin, change complètement de registre : fond crème chaud plutôt que le bleu-gris froid des autres pages, encre presque noire, un accent terracotta/rouille, des titres en serif système. L'idée, c'est un effet "journal papier" — des cartes moins "verre", moins de flou, pour que ça se lise comme du texte d'abord, pas comme une interface.

CV
Clair #f0f2f8
Sombre #121212
Musique
Clair #e4d9f0
Sombre #100b18
Jeux vidéo
Clair #dff7f8
Sombre #0a1620
Blog
Clair #f5efe4
Sombre #1c1712
Les huit couleurs de fond et les seize accents réellement définis dans le theme.css de chaque section — même structure de carte partout (deux modes, deux accents), seule la couleur change d'une section à l'autre. Le mode clair n'est pas un simple négatif du mode sombre : chaque variante a été pensée pour elle-même (le violet musique passe d'un lavande clair à un aubergine profond, pas d'un blanc à un noir inversés).

Sur la page d'accueil, chaque tuile reprend un avant-goût de la couleur de sa section — une barre, une teinte d'icône — pour que cliquer dessus donne déjà l'impression d'entrer dans un autre univers avant même que la page ne charge.

Ce n'est pas figé pour toujours. Si le blog venait à devenir la partie centrale du site plutôt qu'une des quatre briques, je referais sans doute le point sur la direction "minimal éditorial" mise de côté. Et je n'ai pas de subagent dédié au design pour l'instant — cette recherche, je l'ai faite une fois, ponctuellement, avec l'agent principal. Si les demandes de retouche esthétique deviennent récurrentes, ça rejoindra sans doute la même logique que mes agents RH ou SEO : un spécialiste de plus, appelé quand il faut.

Références