DS4 — notre design system passe en open access

On lance DS4 en accès public

Aujourd'hui on rend publique la vitrine de DS4 — le design system qui propulse tous nos projets Axelo, Oxela, Toucher Terre et BEC. C'est en ligne, c'est navigable, et chaque composant est documenté avec ses variantes, ses états et son code.

DS4, c'est notre 4ᵉ itération sur ce qu'un design system doit être pour une équipe qui livre vite et veut tenir dans le temps. Quatre couches, deux thèmes (Light + Dark), une vraie discipline de versioning.

Les 4 couches

Le nom DS4 vient des 4 couches qui structurent le système, du plus bas niveau au plus haut :

• Tokens — les valeurs primitives : couleurs, espaces, typographie, ombres, rayons. Light et Dark dès la première couche, jamais en surcouche.

• Primitives — les briques HTML/CSS sans logique : boutons, inputs, badges, rails. Framework-agnostiques, réutilisables ailleurs.

• Composants — les briques avec un peu de comportement : tabs, modals, OxAppShell, cartes produit. Svelte 5 côté Axelo.

• Layouts — les compositions de page : landing, dashboard, blog. Réutilisés tels quels sur les 4 sites du studio.

Light & Dark dès le départ

Beaucoup de design systems ajoutent le Dark mode après. On le regrette six mois plus tard quand les contrastes cassent et qu'on doit refactorer des dizaines de composants. Chez nous, chaque token a sa valeur Light ET Dark dès le premier commit. Le thème bascule via une seule variable CSS, et tous les composants suivent.

La stack

DS4 est construit en Svelte 5 + Tailwind 4. Tailwind 4 nous donne les tokens compilés et la utility-first ; Svelte 5 nous donne les runes pour la réactivité fine et un bundle vraiment léger. La vitrine elle-même est statique (SSG via SvelteKit + adapter-static) — pas de serveur dynamique, pas de cold start, juste du HTML/CSS/JS optimisé et un CDN devant.

Charte graphique morte, vive le design system

Une charte graphique au PDF, c'est statique. Une fois livré, plus personne ne le rouvre. Six mois plus tard, le site et la plaquette ne se ressemblent plus.

Un design system, c'est l'inverse : c'est du code. Des tokens, des composants réutilisables, des variantes documentées. Quand on change la couleur primaire, tout se met à jour partout, automatiquement. C'est cette différence qui fait qu'un projet reste cohérent à 2 ans, à 5 ans, à 10 ans.

Open source à venir

DS4 est encore privé côté code, mais l'objectif est de l'extraire en repo public sur GitHub (license MIT) et de publier un package npm @axelolabs/ds4. Tu pourras l'installer dans tes propres projets Svelte ou réutiliser les tokens dans d'autres frameworks. Stay tuned.