Design system

1. 1

   Efficacité métier avant l’effet visuel

   Densité d’information maîtrisée, actions principales évidentes, zéro décoration gratuite.

2. 2

   Un écran = une intention

   Un seul bouton principal par écran ; les actions secondaires vont dans un menu.

3. 3

   Le statut est toujours visible

   Badge de statut et prochaine action attendue dans l’en-tête de chaque document.

4. 4

   Le flux plutôt que le module

   Chaque document montre ses documents liés (commande → BL → facture → paiement → écriture) et y mène en un clic.

5. 5

   Calme et lisibilité pour 8 h par jour

   Fonds neutres, contraste élevé du texte, couleur réservée au sens : statut, alerte, action.

6. 6

   Accessible par défaut

   WCAG 2.2 AA, clavier complet, focus visible, cibles tactiles ≥ 44 px sur le terrain.

7. 7

   Repris d’AGB, validé par un vrai client

   Espaces par rôle, accueil « Aujourd’hui », onglets de statut avec compteurs, fiche 360°, toast après succès, confirmation seulement pour l’irréversible, motif obligatoire au refus.

// ✅ Rôles sémantiques : correct dans les deux thèmes
<div className="rounded-xl border border-border-default bg-bg-surface p-4 shadow-xs">
  <p className="text-sm text-fg-muted">Encours client</p>
  <MoneyText value="94800000" currency="XOF" className="text-2xl font-semibold" />
</div>

// ❌ Interdit (refusé par pnpm --filter @synapse/ui lint) :
//    valeurs hexadécimales, palette Tailwind par défaut (gris, bleu… numérotés),
//    styles inline de couleur ou de fond

// Outillage
pnpm tokens                          # régénère tokens.css, theme.css, tokens.generated.ts
pnpm --filter @synapse/ui contrast   # 41 paires × 2 thèmes (WCAG AA)
pnpm --filter @synapse/ui lint       # couleurs codées en dur interdites