Design

Source : docs-sources/BioTrace_design_system.md v0.1. Mis en œuvre dans packages/ui (Lot 1, séquence B1).

Trois idées fondatrices

1. Un registre vivant : fond papier, encre bleu nuit, chiffres en monospace, lignes de grand livre.
2. Le fil de traçabilité, signature visuelle : un trait continu qui relie les lots, présent dans la frise, les états vides, la connexion et le logo.
3. Les statuts en forme de tampon : une qualité biologique se lit sur un symbole et une bordure, jamais sur une couleur seule.

Un seul jeu de jetons, deux densités : Bureau (back-office) et Terrain (mobile).

Principes

Principe	Implication
La couleur de statut est sacrée	Le vert ne signifie que « bio ». Aucune couleur de statut pour l’image de marque, un bouton ou un ornement.
La preuve avant la décoration	Chaque écran montre d’abord ce qui se vérifie : numéro, quantité, qualité, statut, auteur, date.
« À traiter » d’abord	Les écrans d’accueil montrent les actions en attente et les anomalies avant les statistiques.
Lisible partout	AA minimum au Bureau, AAA visé au Terrain ; lisible en noir et blanc, à l’impression thermique, pour une personne daltonienne.
Hors-ligne visible	L’état de synchronisation reste affiché en permanence sur mobile.

Jetons de couleur

:root {
  --encre: #1f2a44; --encre-2: #3e5c8a; --papier: #f6f3ec; --surface: #ffffff;
  --ligne: #ddd6c8; --ligne-forte: #b9b0a0;
  --texte-2: #5b6475; --texte-3: #646a76;
  --terre: #b4532a; --terre-texte: #9a4422;

  --statut-bio-fond: #e3f1e4;         --statut-bio-texte: #1e5b2a;
  --statut-conversion-fond: #fdf0d5;  --statut-conversion-texte: #7a4b00;
  --statut-conv-fond: #eceef1;        --statut-conv-texte: #39414d;
  --statut-quarantaine-fond: #eee8fb; --statut-quarantaine-texte: #4a2e91;
  --statut-bloque-fond: #fbe5e3;      --statut-bloque-texte: #8e1f17;

  --police-titre: "IBM Plex Serif", Georgia, serif;
  --police-ui: "IBM Plex Sans", system-ui, sans-serif;
  --police-id: "IBM Plex Mono", ui-monospace, monospace;

  --rayon-champ: 4px;
  --rayon-carte: 8px;
}

[data-densite="terrain"] {
  --papier: #ffffff; --encre: #111111; --encre-2: #1c4ed8; --ligne: #111111;
}

Contrastes mesurés (voir packages/ui/src/jetons.test.ts, qui échoue si un jeton retombe sous AA) : encre/papier 12,9:1, bio 7,0:1, conversion 6,6:1, conventionnel 8,9:1, quarantaine 8,4:1, bloqué 7,4:1.

Coquille commune (ADR 0047) : le back-office (densité Bureau) et le cockpit (densité Éditeur) partagent packages/ui/src/coquille.css et les composants CoquilleApp, CadrePage, Pastille, PaletteCommandes : barre latérale claire à groupes, en-tête, cadre de page à onglets, bleu d’action, pastilles de catégorie sans vert. La densité Bureau garde ses jetons papier et encre.

Palette de statut réservée : cinq états — bio (● bordure pleine), conversion (◐ tirets, toujours daté A1 ou A2+), conventionnel (○ bordure fine), quarantaine (◇ double bordure), bloqué (■ bordure épaisse). Jamais de couleur de statut mappée sur --destructive ni sur l’équivalent « succès ».

États du cycle de vie d’un document (distincts de la qualité, sans couleur de la palette réservée) : brouillon (italique, référence provisoire grise, bordure pointillée), validé (encre, sceau), dévalidé (barré, « le… par… »), annulé (barré, ligne conservée au registre).

Typographie — IBM Plex

Trois familles, deux graisses seulement (400 et 500) : IBM Plex Serif pour les titres H1/H2, IBM Plex Sans pour l’interface (font-variant-numeric: tabular-nums partout), IBM Plex Mono pour les identifiants (lot, certificat, numéro officiel, empreinte).

Espacement et forme

Grille de 4 px (pas utilisés : 4, 8, 12, 16, 24, 32, 48). Rayons : 4 px (champs, boutons), 8 px (cartes). Élévation par bordure, pas par ombre — l’ombre reste réservée aux menus déroulants et aux fenêtres modales.

Densités

Aspect	Bureau	Terrain
Hauteur de ligne de tableau	36 px	Pas de tableau : cartes
Cible tactile minimale	32 px	48 px (56 px pour l’action principale)
Navigation	Barre latérale	Barre basse, 4 entrées maximum

Composants métier nommés

Composant	Règle dure
Tampon de qualité	Symbole, libellé et bordure obligatoires ; jamais la couleur seule
Référence	Monospace ; provisoire grise préfixée « prov. », officielle en encre
Jauge de capacité	Encre jusqu’à 80 %, terre au-delà, « Bloqué » au dépassement ; valeur en kg toujours écrite
Bandeau « À traiter »	Texte en --terre-texte, une action par ligne, tri par ancienneté puis effet bloquant
État vide	Illustration du fil de traçabilité, une phrase, toujours une action suivante
Formulaire généré	Libellé au-dessus, unité à droite, erreur en clair sous le champ

Mise en œuvre

packages/ui (Lot 1, séquence B1) : jetons dans src/registre.css (Tailwind v4, voir ADR 0039), composants dans src/composants/, galerie de développement sur /_galerie dans apps/backoffice. Le thème react-jsonschema-form « Registre » est différé au premier écran qui en a besoin (produits et attributs, Lot 1 A2).