Totem - 3 ans d’un design system maison
D une bibliothèque CSS bricolée pour Shaman à un design system atomic avec Storybook 10. Trois ans de sommeil, un reboot brutal, et une direction artistique qui s appelle Soft Minimal.
Octobre 2022 - la naissance
Totem naît un dimanche d’octobre 2022. Le contexte : Shaman, un générateur de sites statiques qui a besoin d’une couche CSS. Je crée un fichier SCSS, quelques maps de couleurs, une poignée de composants. Rien de spectaculaire - le genre de bibliothèque utilitaire que tout développeur front a fabriquée au moins une fois.
Les premiers mois, le projet vit normalement. Un commit par-ci, une correction par-là. Et puis le silence s’installe. 2023 passe avec quelques modifications éparses. 2024, à peine mieux. Totem dort.
Le reboot de février 2026
Tout bascule en une seule journée de février 2026. Je fais sauter Webpack pour Vite 8. Je migre chaque @import vers les modules Sass modernes - @use, @forward, les namespaces propres. Eleventy dégage. L’architecture entière est restructurée en atomic design.
C’est violent, mais nécessaire. L’ancien Totem était un empilement de décisions prises à des moments différents, sans cohérence globale. Le nouveau est pensé comme un système.
Atomic design, pour de vrai
Quatre niveaux, clairement séparés :
- Atomes - Avatar, Badge, Button, Chip, Divider, Icon, Progress, Skeleton, Tooltip
- Molécules - Accordion, Alert, Card, Form, List, Modal, Table, Tabs, Tile, Toast
- Organismes - Navbar, Sidebar, Footer, Section layouts
- Mixins - Gradient, neumorphic, soft-shadow, micro-animations, responsive
Le pattern clé : tous les tokens utilisent !default. N’importe quel projet consommateur peut surcharger les couleurs, les espacements, la typographie. Il suffit de charger ses tokens avant ceux de Totem. Ce jardin numérique en est la preuve vivante - sa palette acide vert-orange-framboise écrase les pastels de Totem sans toucher à une ligne du design system.
Storybook 10 et la documentation vivante
L’ajout de Storybook change tout. 37 stories documentent chaque composant avec ses variantes, ses états, ses edge cases. Ce n’est plus un fichier CSS qu’on importe à l’aveugle - c’est un catalogue interactif où chaque atome est testable en isolation.
Storybook force aussi une discipline : si un composant n’a pas de story, il n’existe pas officiellement. Ça élimine le code mort et les composants fantômes que personne n’utilise.
Soft Minimal 2026
La direction artistique émerge progressivement au fil des commits de mars 2026. Pastels chauds, ombres subtiles, bordures à peine visibles. J’appelle ça « Soft Minimal » - une esthétique qui respire, qui ne crie pas, qui laisse le contenu au premier plan.
C’est l’opposé du Bauhaus brutaliste de « Où est mon doc ? ». Et c’est précisément le point : Totem n’impose pas une esthétique. Il fournit les briques. Chaque projet construit sa propre identité par-dessus.
Ce que trois ans m’ont appris
Un design system, ce n’est pas un projet qu’on finit. C’est un organisme vivant qui grandit avec les projets qu’il nourrit. Les deux ans de sommeil n’étaient pas du temps perdu - c’était de la maturation silencieuse. Quand le reboot est arrivé, je savais exactement ce que je voulais construire, parce que j’avais vécu les frustrations de l’ancienne version assez longtemps.
Totem alimente maintenant ce jardin, Summoner, et les projets à venir. Cinquante-cinq commits, trois ans et demi, 37 stories. L’atelier est ouvert.