Aller au contenu principal

Design system

Statut​

Document de cadrage frontend — version initiale.

Objectif​

Le design system DMV doit garantir une cohérence visuelle et fonctionnelle sans ralentir le développement.

Il doit définir les conventions utiles : couleurs, typographie, espacements, boutons, cartes, formulaires, modales, états et feedbacks.

État actuel visible​

Le repo montre :

  • Tailwind CSS 4 dans les deux frontends ;
  • police Ubuntu côté site public ;
  • fichiers de styles globaux ;
  • helpers buttonStyles dans le public et le backoffice ;
  • composants UI comme Carousel, Switch, Disclosure, panels et modales ;
  • styles répétés dans plusieurs pages backoffice.

Aucun package de design system partagé n'est confirmé.

Principes​

  • Documenter avant de multiplier les variantes.
  • Limiter le nombre de styles de boutons.
  • Standardiser les états : loading, empty, error, success, disabled.
  • Utiliser des composants simples et composables.
  • Garder les classes Tailwind lisibles.
  • Éviter la sur-abstraction.

Tokens à formaliser​

TokenObjectif
CouleursHiérarchie, actions, alertes, surfaces.
TypographieTailles, poids, titres, textes secondaires.
EspacementsRythme visuel cohérent.
RayonsCohérence des cartes, boutons, modales.
OmbresProfondeur sobre et non envahissante.
ÉtatsFocus, hover, active, disabled, erreur.

Composants prioritaires​

  • Bouton.
  • Champ texte.
  • Select.
  • Switch.
  • Badge.
  • Card.
  • Modal / sheet.
  • Toast ou message de feedback.
  • Loader.
  • Empty state.
  • Tabs.
  • Layout page.

Public vs backoffice​

Le design system peut avoir deux densités :

  • public : plus aéré, mobile-first, contenu local prioritaire ;
  • backoffice : plus dense, orienté traitement, tableaux et actions.

Les deux doivent partager les principes et composants de base quand c'est utile.

Vision cible​

La cible n'est pas un design system lourd. C'est une bibliothèque de conventions suffisantes pour :

  • réduire la duplication ;
  • accélérer la production ;
  • maintenir la cohérence ;
  • améliorer l'accessibilité ;
  • faciliter les futures apps connectées.

Points à clarifier​

  • Faut-il créer un package partagé ?
  • Quelle stratégie TypeScript/JavaScript entre public et backoffice ?
  • Quels composants doivent être stabilisés en premier ?
  • Quelle documentation visuelle utiliser ?
  • Comment auditer les variantes existantes ?