Sofinco
Le besoin. Donner aux équipes un langage commun pour concevoir les interfaces de Sofinco : des couleurs, des espacements et des composants dont les règles se retrouvent d’un écran à l’autre.
Ma contribution. Au sein de La Manufacture CACD2, j’ai participé à la conception de Monstera : fondations visuelles, composants et variantes, règles d’utilisation et documentation sur Zeroheight. Un travail mené avec les équipes métier et techniques pour préciser les usages et accompagner leur adoption.
Le parti pris. Partir des situations d’usage. Une couleur porte un rôle ; un bouton existe aussi au survol, au focus et lorsqu’il est désactivé ; un espacement appartient à une échelle commune. Les exemples ci-dessous rendent ces décisions visibles.
La fonction
avant la nuance.
Le système distingue le fond, le contenu et la bordure. Nommer les couleurs par leur usage permet de retrouver la même intention dans les composants.
Contenu secondaire
Green200
#007D8FMessage d’erreur
Red200
#A72B2AFond d’erreur
Red50
#FAE7E9Extraits de la palette et des usages documentés dans Monstera, 2024.
Dessiner aussi
ce qui se passe.
Le bouton principal partage la même construction, tout en exprimant les états de l’interaction. Le focus reste identifié ; l’état désactivé se distingue de l’action disponible.
#DD0351#C70349Bordure #007D8FTexte #707070États du composant principal, variante desktop sans icône. Extraits adaptés du fichier Figma pour cette présentation.
Le même rythme,
d’un écran à l’autre.
L’échelle d’espacement utilise des multiples de deux, quatre et huit. Les valeurs communes aident à régler la densité des interfaces sans réinventer chaque distance.
4 px8 px16 px24 px32 px48 pxConcevoir
Des fondations et des variantes dans la bibliothèque Figma.
Documenter
Des règles, des exemples et des contre-exemples sur Zeroheight.
Accompagner
Des échanges avec les équipes pour préciser les cas d’usage.
