Projet concept2026Design systemBranding UI
Comment trois marques bancaires partagent-elles un seul design system ?
Un design system, trois banques professionnelles fictives : la marque devient un mode de variables, aucun composant n’est redessiné.
Résumé
- Le problème. Un groupe fictif lance trois banques professionnelles. Chaque marque veut son identité, sans tripler le coût de maintenance des interfaces.
- La décision clé. La marque est un mode dans une collection de variables Figma. Couleurs, rayons, typographies et nom changent, les composants restent uniques.
- L’état du résultat. Non mesuré. Fichier Figma de 124 variables et 29 composants, 16 écrans dans les trois marques, prototype de 4 parcours.
Contexte et utilisateurs
Tiloa est un projet concept : un groupe bancaire fictif exploite trois marques de banque professionnelle sur une seule base technique.
Tiloa Pro vise les PME et les équipes finance. Orée vise les indépendants. Soleia complète la gamme avec une troisième identité.
Les trois vendent les mêmes services : compte, cartes, virements, transactions. Seule la présentation change.
Utilisateurs décrits en hypothèses, sans entretien. Un gérant de PME valide des virements. Une indépendante gère sa carte depuis son téléphone.
Le contexte chiffré vient de sources publiques. L’Urssaf comptait 3,031 millions de comptes d’auto-entrepreneurs fin décembre 2025, selon son communiqué du 24 juillet 2026. Un compte bancaire dédié devient obligatoire au-delà de 10 000 euros de chiffre d’affaires pendant 2 années consécutives.
La question de design : comment donner trois visages à un seul produit ?
Contraintes
- Métier. La vérification du bénéficiaire avant un virement instantané est obligatoire depuis le 9 octobre 2025. L’interface doit afficher le résultat avant l’envoi.
- Technique. Un seul jeu de composants. Le nombre de modes par collection de variables dépend de l’offre Figma, ce qui borne l’architecture.
- Accessibilité. L’European Accessibility Act s’applique aux services bancaires aux consommateurs depuis le 28 juin 2025. Chaque paire texte et fond doit tenir le contraste dans les trois marques.
- Délai. Projet personnel mené en octobre 2026, en parallèle d’autres travaux. Le périmètre est volontairement limité à 16 écrans.
Recherche
Recherche documentaire, notes du 4 octobre 2026. Aucun entretien, aucun questionnaire. J’ai lu les textes réglementaires, la documentation Figma et le format de tokens de la communauté.
J’ai aussi parcouru les pages publiques de Qonto, Shine, Memo Bank et Revolut Business, en visiteur. Objectif : comprendre le vocabulaire et le ton du secteur, sans comparer les fonctionnalités.
Les noms Tiloa, Orée et Soleia ont été vérifiés le 4 octobre 2026. Aucun conflit trouvé dans le secteur financier.
- Règlement (UE) 2024/886 sur les paiements instantanés, vérification du bénéficiaire obligatoire depuis le 9 octobre 2025, page de la BCE.
- Directive (UE) 2019/882, European Accessibility Act, applicable depuis le 28 juin 2025 aux services bancaires aux consommateurs.
- Design Tokens Community Group, « Design Tokens Format Module 2025.10 », 28 octobre 2025. Rapport d’un groupe communautaire, pas une norme W3C.
- Aide Figma, nombre de modes par collection de variables selon l’offre.
- Urssaf, communiqué du 24 juillet 2026 : 3,031 millions de comptes d’auto-entrepreneurs fin décembre 2025.
- entreprendre.service-public.gouv.fr, compte bancaire dédié au-delà de 10 000 euros de chiffre d’affaires pendant 2 années consécutives.
- Pages publiques de Qonto, Shine, Memo Bank et Revolut Business, lues en visiteur, sans comparaison de fonctionnalités.
Options explorées
- Piste 1 : trois bibliothèques séparées. Une bibliothèque Figma par marque, chacune avec ses composants. Chaque équipe est autonome. Écartée : triple maintenance. Chaque correction de bouton se fait trois fois.
- Piste 2 : un thème par duplication de composants. Une bibliothèque commune, puis des copies recolorées par marque. Écartée : dérive entre marques. Les copies divergent sans qu’on le voie.
- Piste 3 : des objets 3D comme identité commune. Première direction visuelle, avec des objets 3D partagés par les trois marques. Écartée : moins différenciant qu’une mascotte par marque, et plus lourd à produire. Abandonnée le 5 octobre 2026.
La piste retenue : la marque devient un mode de variables, détaillé ci-dessous.
Décisions clés
1. La marque est un mode de variables
L’écran. Overview, Transactions, New transfer et Cards sur bureau, puis Home, Card, Send money et Sent sur mobile. Overview et Home existent aussi dans Orée et Soleia.
La règle. La collection Brand a 3 modes. Chaque mode fixe les couleurs, les rayons, les typographies et même le nom affiché de la marque. Plus Jakarta Sans pour Tiloa Pro, Fraunces pour Orée, Outfit pour Soleia. Les 6 collections totalisent 124 variables de couleur, de nombre, de texte et booléennes.
Le compromis. Tout ce qui diffère entre marques doit passer par une variable. Une marque ne peut pas avoir un composant qui lui est propre. Contrainte acceptée pour garantir une seule maintenance.
2. La vérification du bénéficiaire en trois états
L’écran. New transfer sur bureau, Send money sur mobile. Le résultat de la vérification apparaît avant le bouton de confirmation.
La règle. Trois états, toujours texte plus icône : Match, Close match, No match. La couleur seule ne porte jamais l’information. Le libellé du bouton principal atteint 6,3:1, 6,4:1 et 5,3:1 selon la marque. Le texte d’erreur atteint 4,6:1.
Le compromis. Trois états seulement. Toute situation qui n’est ni Match ni No match tombe sous Close match, avec un texte explicatif. C’est plus lisible, mais moins fin que la réalité des cas.
3. Une mascotte par marque, hors des données
L’écran. Home sur mobile et Sent après un virement. La mascotte accompagne l’accueil et la confirmation, jamais une liste de transactions.
La règle. La mascotte est le seul élément expressif de chaque marque. Elle reste plate, dans la direction « fintech lumineuse ». Elle n’apparaît jamais dans une zone de chiffres ou de saisie.
Le compromis. Trois personnages à dessiner et à maintenir au lieu d’un seul objet partagé. Le gain : un personnage par marque est plus lisible et plus différenciant.
Résultat
Non mesuré. Métrique : le temps nécessaire pour appliquer une correction de composant aux trois marques. Relevé : chronométrer la même correction dans Tiloa et dans trois bibliothèques séparées, sur une série de corrections types.
Chiffres comptés par script dans le fichier Figma, version mascottes.
Ce que j’ai appris
Un design system multi-marques se gagne dans l’architecture des variables, pas dans les composants. Si le nom de la marque est une variable de texte, le reste suit.
Le contraste doit être vérifié trois fois, une par marque. Une couleur d’accent qui passe dans Tiloa Pro peut échouer dans Soleia. Le script de calcul vérifie chaque paire dans les trois marques.
Changer de direction visuelle en cours de route a un coût. Les objets 3D séduisaient en image fixe, mais ne racontaient pas trois marques. Les mascottes le font.
Conçu dans Figma avec un workflow augmenté par l’IA : Claude relié à Figma par MCP, dirigé et relu par le designer.
Transparence
- ClientAucun. Projet personnel, données d’exemple, marques fictives.
- RechercheDocumentaire, sur des sources publiques datées. Aucun entretien.
- Test utilisateurPlan de test rédigé, non réalisé.
- AccessibilitéContrastes calculés paire par paire pour les trois marques. Ni audit ni déclaration de conformité.
Ce que l’IA a fait, ce que j’ai décidé
L’IA
- Généré les variantes d’écrans par marque à partir des variables.
- Écrit les scripts de comptage des variables, composants et écrans.
- Écrit le script de calcul des contrastes pour les trois marques.
Moi
- Conçu l’architecture des 6 collections et de la collection Brand à 3 modes.
- Choisi les trois états de la vérification du bénéficiaire.
- Dessiné et placé les mascottes, hors des zones de données.
- Relu chaque écran dans chaque marque.
Projet suivantBelrivePortail de démarches en ligne accessible