De l’acide à la jungle
La première version du site portait une palette acidulée : vert fluo, framboise, orange vif. Quatre couleurs criardes sur fond noir. Ça fonctionnait, mais ça ressemblait à un terminal sous stéroïdes. En itérant sur le design, la direction a glissé vers quelque chose de plus dense, plus organique : une jungle tropicale nocturne.
Le changement n’est pas cosmétique. Une palette acide est binaire — ça brille ou c’est éteint. Une palette tropicale a de la profondeur : des couches de feuillage, des fruits qui percent l’obscurité, des lueurs qui filtrent entre les branches.
Six accents, six rôles
La palette actuelle nomme ses couleurs comme des espèces végétales, pas comme des codes hex :
- Mango
#f07020— l’accent principal. Orange profond, fruit mûr. C’est la couleur de l’action : navigation, focus, points d’entrée. Le curseur custom s’allume en mango au survol. - Ember
#e84828— la braise. Rouge orangé, chaleur résiduelle. Alertes, accents chauds, ce qui demande l’attention. - Orchid
#c050e0— le violet tropical. Rare dans la nature, rare dans l’interface. Réservé aux éléments distinctifs : tags spéciaux, accents de personnalité. - Helico
#00c8a0— du nom de l’Heliconia. Vert-turquoise dense, sous-bois humide. Succès, validation, ce qui a bien poussé. - Lime
#b8e830— le citron vert. Vif, électrique. Barres d’XP, progression, énergie brute. - Canary
#00ddb0— vert menthe lumineux. Liens, indicateurs secondaires, la sève qui circule.
Six couleurs, c’est plus que les quatre de la palette acide. Mais chacune a un territoire précis. L’interface ne les mélange jamais au hasard.
Le sol : six couches d’obscurité
Le fond n’est pas un noir plat. C’est un dégradé de six niveaux qui simule la profondeur d’un sous-bois nocturne :
| Token | Hex | Rôle |
|---|---|---|
void | #06080f | Fond de page, le vide absolu |
deep | #0a0e18 | Arrière-plans secondaires |
layer | #0f1422 | Cartes, surfaces élevées |
bark | #161c2e | Bordures de blocs, écorce |
wire | #1e2840 | Séparateurs, lianes fines |
mold | #263350 | Survol, mousse sur les pierres |
Chaque couche est légèrement plus claire que la précédente. L’oeil perçoit la hiérarchie sans effort : ce qui est plus clair est plus proche, ce qui est sombre recule. Le même principe que la perspective atmosphérique en peinture, appliqué à des div.
Texte : quatre températures
Le texte ne se contente pas d’un blanc unique. Quatre nuances règlent la hiérarchie typographique :
- White
#f8f5ff— titres et texte principal. Légèrement lavande, jamais blanc pur (trop agressif sur fond sombre). - Warm
#fdf0e0— texte d’accentuation. Ton crème, comme une page éclairée à la bougie. - Fog
#e0e8f8— texte secondaire. Bleuté, brumeux, lisible sans dominer. - Mist
#b8c8e0— métadonnées, dates, labels discrets. À peine là.
Typographie brutaliste
Trois polices qui ne changent pas depuis la v1, parce qu’elles fonctionnent :
- Unbounded pour les titres : ronde, épaisse, presque arcade. Elle s’impose.
- Space Mono pour le corps et le code : monospace, technique. Le côté terminal persiste même sans palette acide.
- Instrument Serif pour les citations : élégante, organique. La touche végétale dans le numérique.
Grain, curseur, néon
L’identité ne tient pas qu’aux couleurs. Trois éléments visuels ancrent l’ambiance jungle nocturne :
Le grain. Un overlay SVG de bruit fractal couvre toute la page à 4% d’opacité. Invisible consciemment, mais il casse la perfection numérique. L’oeil perçoit une texture, comme la rugosité d’une feuille.
Le curseur custom. Un anneau et une croix qui remplacent le curseur système sur desktop. Au survol d’un lien, l’anneau s’agrandit et passe en mango. C’est un réticule de botaniste, pas une flèche de bureau.
Les glows. Au survol des cartes, une lueur colorée filtre à travers les bordures. Comme la bioluminescence qui perce l’obscurité de la canopée. L’effet est subtil — si on le remarque, c’est qu’il est trop fort.
Totem, le sol sous la jungle
Le site repose sur Totem, un design system SCSS maison. Totem fournit la structure : grilles, typographie, composants atomiques. Tous ses tokens utilisent !default en Sass, ce qui permet au jardin de redéfinir chaque valeur en chargeant garden-tokens.scss en premier.
C’est un mécanisme simple mais puissant : le même Totem peut habiller une app d’entreprise ou cette jungle tropicale. Seuls les tokens changent. La preuve que l’architecture !default fonctionne.
Pourquoi “tordu” ?
Un jardin bien rangé est ennuyeux. Les branches tordues portent les meilleurs fruits. Ce site assume ses imperfections : les notes inachevées sont visibles, le design est parfois excessif, les idées se contredisent d’une fiche à l’autre.
Le nom “Tordu Jardin” inverse la syntaxe pour signaler d’emblée que les conventions ne s’appliquent pas ici. C’est un jardin, mais un jardin de nuit, dense, tropical, tordu.
En savoir plus sur le jardinage numérique | Le design system Totem