Quand Totem a rencontré la jungle

Le problème

Le jardin numérique avait besoin d’un design system. Totem existait déjà. Le réflexe naturel : l’utiliser tel quel.

Sauf que Totem, c’est Soft Minimal. Des pastels chauds, des ombres subtiles, des gris doux. Le genre d’esthétique qui dit « application SaaS professionnelle ». Or ce jardin n’est pas un SaaS. C’est un terrain de jeu, un atelier, un espace personnel. Il fallait quelque chose qui vibre.

La question : peut-on prendre un design system sage et le transformer en jungle tropicale nocturne sans le casser ?

La palette

Le fichier s’appelle « Jungle Tropicale Tokens ». Le commentaire en tête : Deep jungle night. Tropical vivid accents. Monospace brutalism. La palette finale :

• Mango #f07020 : l’orange tropical, chaud et direct
• Ember #e84828 : le rouge braise, pour les alertes
• Orchid #c050e0 : le violet électrique, pour les accents
• Helico #00c8a0 : le vert héliconia, frais et vif
• Lime #b8e830 : le vert lime, pour les éléments primaires
• Canary #00ddb0 : le cyan canari, pour les liens

Les fonds : du quasi-noir ($void: #06080f) au bleu nuit profond ($mold: #263350). Six niveaux de profondeur pour créer de la hiérarchie sans jamais toucher au blanc.

Rien de subtil. Rien de corporate. C’est voulu.

Le fichier qui change tout

Le miracle des !default de Totem. Un seul fichier, garden-tokens.scss, chargé avant Totem dans le pipeline Sass. Les tokens de Totem utilisent !default : si une variable est déjà définie, Totem la garde telle quelle. Le jardin définit ses propres couleurs, Totem s’y plie.

Le Button de Totem est toujours un Button. Le Card de Totem est toujours un Card. Mais les couleurs, les ombres, les fonds, tout est jungle tropicale.

La typographie brutaliste

Trois polices, chacune avec un rôle précis :

• Unbounded pour les titres : géométrique, massive, qui impose le regard
• Space Mono pour le corps de texte : monospace, technique, lisible
• Instrument Serif pour les accents : un serif élégant qui casse le brutalisme juste ce qu’il faut

C’est un contraste délibéré. Le monospace dit « terminal, code, technique ». Le serif dit « culture, édition, narration ». Les deux ensemble disent « développeur qui écrit ».

Les custom properties pour le thème

Les tokens SCSS sont compilés en CSS custom properties dans garden-theme.scss. Chaque couleur, chaque fond, chaque nuance est exposée comme variable CSS :

:root {
  --void: #{$void};
  --mango: #{$mango};
  --orchid: #{$orchid};
  --lime: #{$lime};
  // ...
}

Les composants du jardin utilisent ces variables. Changer une couleur dans les tokens, c’est changer l’intégralité du site. Un seul fichier source, un seul point de vérité.

Les composants qui n’existaient pas

Totem fournit les briques de base : cards, buttons, badges, grids. Mais le jardin avait besoin de composants spécifiques :

• XP bars : des barres de progression qui ressemblent à celles d’un RPG, avec un remplissage animé
• Growth badges : graine, pousse, croissance, persistant, avec une icône et une couleur par stade
• Glow hovers : un halo coloré qui pulse quand on survole une carte
• Pixel grid overlay : un motif de grille semi-transparent qui donne un côté terminal/rétro

Ces composants vivent dans garden-components.scss, séparés de Totem. Le design system fournit le layout et la typographie. Le jardin ajoute sa couche de personnalité par-dessus.

Le moment où ça a cliqué

Le premier rendu de la grille de cartes. Fond bleu nuit profond, cartes avec un léger halo mango, titres en Unbounded, texte en Space Mono, badges de stade colorés, XP bars qui se remplissent. Le tout sur un layout grid responsive qui rappelle un inventaire de jeu vidéo.

C’était exactement ça. Pas un portfolio professionnel. Pas un blog Notion-like. Un HUD de joueur qui documente ses projets comme des quêtes, avec des niveaux d’avancement et des points d’expérience.

Ce que j’en retiens

Totem n’a pas été dénaturé. Il a été réinterprété. La preuve que le pattern !default fonctionne : un design system qui ne s’impose pas mais qui se laisse transformer par le projet qui le consomme.

La direction artistique d’un projet ne se trouve pas dans un moodboard. Elle se trouve dans le premier fichier de tokens. Les noms des variables, mango, ember, orchid, helico, racontent déjà l’histoire avant même d’ouvrir le navigateur. Un design system réussi n’est pas celui qui produit des sites identiques. C’est celui qui disparaît sous la personnalité de chaque projet.