Totem - Design System maison

Mon design system maison, pur SCSS, qui donne sa personnalité à tous mes projets. Atomic design, direction artistique 'Soft Minimal', et une architecture pensée pour être détournée. Le socle invisible qui rend chaque interface un peu tordue.

IV - Persistant 3 ans 5 mois 2022-10-16 2026-03-14
XP
90%

Pourquoi

Chaque projet que je lance a besoin d’une interface. Et chaque fois, je repartais de zéro : les mêmes boutons, les mêmes modales, les mêmes cartes, les mêmes tokens de couleur. Copier-coller d’un projet à l’autre, adapter, corriger les incohérences. Au bout du cinquième projet, l’évidence : il me faut un design system à moi.

Pas Tailwind, pas Bootstrap. Un truc qui porte ma direction artistique, que je peux détourner à volonté, et qui ne m’impose rien. Du SCSS pur, des tokens surchargeables, et une structure en atomic design (atomes, molécules, organismes) pour retrouver mes petits.

La vie du projet

Totem est né un dimanche d’octobre 2022 comme bibliothèque CSS pour un autre projet. Puis il a dormi deux ans. Un commit par-ci par-là en 2023, une correction en 2024. La vie d’un side project classique.

Tout a changé en février 2026 quand j’ai commencé à multiplier les projets en parallèle. En une journée, j’ai tout cassé : Webpack viré pour Vite, @import migrés vers les modules Sass modernes, architecture restructurée en atomic design. Le lendemain, Storybook est arrivé pour documenter chaque composant. Une direction artistique “Soft Minimal” a émergé naturellement : pastels chauds, ombres subtiles, bordures à peine visibles.

Comment ça s’utilise

Le principe clé : tous les tokens utilisent !default. N’importe quel projet peut surcharger les couleurs, les espacements, la typographie, il suffit de charger ses tokens avant ceux de Totem. Ce jardin numérique le fait avec une palette acide de jungle tropicale. Basalt Beholder, QA Panel et Où est mon doc l’utilisent aussi, chacun avec sa propre personnalité. Un même socle, des identités différentes.

L’atelier du pixel

La phase la plus révélatrice, c’est la série de commits autour des “uptime bars” pour le dashboard de monitoring : vert électrique, puis vert sombre, puis gradient diagonal, puis shine subtil… On voit un dev qui itère pixel par pixel, qui revient en arrière, qui essaie encore. Totem n’est pas un produit corporate. C’est un atelier d’artisan où chaque nuance de vert a été débattue avec soi-même.

Stats

Commits55
Durée de vie3 ans 5 mois
Composants Storybook37 stories
Premier commit16 oct 2022
Dernier commit11 mars 2026

Stack technique

SCSS pur

Styles sans framework

Contrôle total sur la direction artistique

Storybook

Documentation vivante

Visualiser chaque composant en isolation

Vite

Build & dev server

Itérer vite sur le rendu visuel

Direction artistique Soft Minimal 2026

Pastels chauds, ombres subtiles, bordures à peine visibles. Itérations pixel par pixel sur les uptime bars du Monitoring Dashboard. La DA émerge des commits.

  • Direction artistique Soft Minimal 2026
  • Uptime bars : gradient diagonal + shine subtil
Storybook 10, 37 stories+5 commits

Chaque composant documenté dans Storybook avec variantes, états hover/focus/disabled, tailles. Code mort détecté et supprimé. Incohérences corrigées.

  • Storybook 10 : 37 stories, catalogue interactif
  • Suppression du code mort et nettoyage des props
Reboot complet : Vite, @use, atomic design+15 commits

Tout casse en une journée. Webpack → Vite 8. @import → @use/@forward. Architecture plate → atomic design. Systématisation des !default sur tous les tokens.

  • Migration Webpack → Vite 8
  • Migration @import → @use/@forward (modules Sass)
  • Restructuration atomic design (atomes, molécules, organismes)
  • Systématisation des !default sur tous les tokens
Naissance : bibliothèque CSS pour Shaman+1 commits

Premier commit. Un fichier SCSS, quelques maps de couleurs, une poignée de composants. Le début discret d’un design system qui va dormir deux ans.

  • Init : tokens de base, maps de couleurs, premiers composants