Construire un design system avec SvelteKit et Tailwind

Un design system bien structuré est la pierre angulaire d'un projet frontend maintenable. Dans cet article, je partage mon approche pour construire un design system modulaire avec SvelteKit 5 et Tailwind v4, depuis les tokens de design jusqu'aux composants complexes.

Pourquoi un design system ?

Quand une application grandit, la dette technique visuelle s'accumule rapidement. Des couleurs hardcodées, des espacements incohérents et des composants dupliqués rendent la maintenance cauchemardesque. Un design system résout ces problèmes en fournissant une source unique de vérité.

Les design tokens

Les tokens sont les atomes de notre système. Couleurs, typographies, espacements et rayons de bordure — tout est défini dans un fichier centralisé qui alimente à la fois Tailwind et nos composants Svelte.

export default {
  theme: {
    colors: {
      primary: 'hsl(var(--primary))',
      accent: 'hsl(var(--accent))',
    }
  }
}

Architecture des composants

Chaque composant suit une structure claire : un fichier .svelte pour le markup et le style, un fichier .svelte.ts pour la logique réactive, et des stories Storybook pour la documentation vivante. Cette séparation facilite les tests et la collaboration.

L'utilisation des snippets Svelte 5 et du pattern $props() rend les composants à la fois typés et flexibles. Les variants sont gérées via des props discriminées, éliminant le besoin de classes conditionnelles complexes.