v1.0

Design System MultiSaaS

La référence visuelle et fonctionnelle utilisée par tous les modules de la plateforme : tokens couleur OKLCH, primitives shadcn/ui personnalisées, composants métier et règles d'usage. Conçu pour garantir une expérience cohérente entre Qualitool, HIRA, RH360, IT Manager et tous les autres modules.

Fondations

Couleurs OKLCH, typographie, espacement, radius, ombres.

Primitives

Boutons, formulaires, dialogs et composants shadcn personnalisés.

Composants métier

StatsCard, KPICard, RiskBadge, PageHeader et autres briques modules.

Patterns & guidelines

Quand utiliser quoi, responsive, accessibilité, modules embarqués.

Principes

  • Tokens d'abord. Jamais de couleur brute (text-white, #fff) dans un composant. Toujours un token sémantique (text-foreground).
  • Dark mode natif. Tous les tokens ont une valeur light et dark — pas de classe conditionnelle nécessaire.
  • A11y par défaut. Contraste AA minimum, focus visible, cibles tactiles ≥ 44px, ARIA correct sur les composants Radix.
  • Mobile-first. Toute nouvelle vue se conçoit d'abord pour 375px, puis monte en breakpoint.