Risk OS, un design system pour piloter le risque financier

Le parti pris visuel s'appelle Iris & Slate : des neutres ardoise froids et un seul accent, un iris (#5241CC). Il se démarque des design systems financiers courants et, surtout, ne se confond avec aucune couleur de risque. Geist sert à l'interface, Geist Mono à toutes les valeurs financières : la chasse fixe aligne les décimales d'une ligne à l'autre.

C'est le choix le plus structurant du système. Les couleurs risk/* décrivent l'état métier d'une limite, de Normal à Critical. Les couleurs feedback/* décrivent le résultat d'une action dans l'interface : sauvegarde, saisie, export. Les couleurs dataviz/* encodent des catégories sans jugement, sans vert, ni ambre, ni rouge. Un même rouge ne peut donc jamais signifier à la fois « limite dépassée » et « champ à corriger ». Chaque niveau de risque associe en plus une forme, un libellé et une couleur : cercle pour un état stable, triangle pour l'avertissement, octogone pour le dépassement.

Claude Cowork, connecté à Figma par le serveur MCP, a posé les fondations : 251 variables réparties en collections (primitives, couleurs en mode clair et sombre, dimensions, trois densités d'affichage, motion avec une variante en mouvement réduit), 17 styles de texte, 3 élévations et une grille de 12 colonnes. Puis la bibliothèque : 51 icônes, 34 composants à variantes (225 variantes au total) et la structure d'application, barre latérale, barre du haut, en-tête de page, barre d'outils, panneau latéral. Mon rôle : fixer la direction, relire chaque page, trancher les choix métier.

La page la plus spécifique du fichier rassemble les composants du risque : glyphe et badge de niveau, indicateur de dépassement, fraîcheur de la donnée, variation, valeur d'exposition, utilisation d'une limite, lignes de concentration et de contribution, graphiques, liste d'alertes, historique et tableau financier. Chacun est documenté avec ses états et ses notes d'usage. Le Breach Indicator, par exemple, met la durée au premier plan : un dépassement de deux jours n'a pas la même gravité qu'un dépassement de dix minutes.

Huit patterns décrivent les gestes clés avant de dessiner le moindre écran : filtrer les expositions, explorer une hiérarchie de portefeuilles, passer d'un agrégat à son détail, consulter une limite, analyser les causes d'un dépassement, relire l'historique d'une alerte, créer ou modifier une limite avec validation, afficher l'état des données. Chaque pattern précise le contexte, les informations disponibles, les actions possibles et leurs conséquences.

Les écrans assemblent ces briques en densité compacte : la vue d'ensemble des risques, le suivi des limites avec le panneau de détail ouvert, et la fiche d'exposition d'une contrepartie, une page qui défile de la synthèse jusqu'à l'historique du dépassement.

Le niveau de risque n'est jamais porté par la couleur seule : forme, libellé et couleur vont ensemble, et les badges gardent un contraste texte/fond d'au moins 6,6:1. Les composants ont leur équivalent pour les lecteurs d'écran (une barre d'utilisation annonce « 104.2% of limit, breach »), et la mise à jour d'une donnée en temps réel n'est annoncée qu'au changement d'état, jamais à chaque rafraîchissement. La documentation distingue ce qui est vérifié, ce qui est conçu pour WCAG 2.2 et ce qui reste à vérifier.

Le prototype suit le parcours de surveillance : depuis la vue d'ensemble, ouvrir les dépassements actifs ou la liste des limites, cliquer sur une ligne pour faire glisser le panneau de détail, puis passer à la fiche d'exposition. Cinq animations Figma Motion le complètent : entrée du panneau, mise en évidence d'une ligne mise à jour, notification, ouverture de section, évolution d'une barre d'utilisation.