Bloom
Une marketplace Web3 en marque blanche à l’architecture modulaire. Pensée pour s’adapter à chaque client, l’interface se reconfigure instantanément sans toucher au code.
1
Seul système à maintenir
65+
Composants maintenus
7+
Identités déployées
3×
Plus rapide à déployer
Contexte
Aligner design et code
Déployer une architecture unique sous des identités radicalement différentes expose la plateforme à une dette technique constante. Sans une structure sémantique stricte, chaque personnalisation client fragilise la maintenance globale du produit.
Pour absorber des univers opposés, du gaming à la finance, le système repose sur un thémage dynamique. Le design et le code partagent les mêmes variables, éliminant les allers-retours d’ajustement et garantissant l’intégrité de l’interface à chaque déploiement.
Problème
Le coût technique du sur-mesure
Ce qui varie d’un client à l’autre se limite aux valeurs de surface : couleurs, typographies, arrondis ou espacements. Les comportements, la hiérarchie et l’accessibilité restent strictement inchangés.
Isoler ces deux couches permet de décliner des dizaines d’identités sans impacter la structure des composants. Plus qu’une optimisation visuelle, c’est le choix technique fondamental qui rend la marque blanche viable à l’échelle.
Solution
Un seul système pour toutes les marques
Pour industrialiser le produit à partir d’une base unique, la solution s’appuie sur une architecture à trois niveaux : des valeurs primitives fixes, des tokens sémantiques configurables par client, et des composants agnostiques.
L’intégration technique ne se fait qu’une fois pour que l’UI s’adapte dynamiquement. Ce qui demandait des mois de recherche et développement s’intègre désormais chez un nouveau client en une semaine.
Méthode
Conçu en autonomie,pensé pour être repris
Travailler seul impose une rigueur absolue dans la documentation : nommer, justifier et annoter la moindre décision pour fluidifier l’intégration en production.
Le système doit pouvoir se comprendre sans ouvrir Figma. Les composants sont structurés par état d’usage et les tokens portent un nom sémantique plutôt qu’une valeur brute.
Un livrable autonome
Le livrable n’a pas besoin d’être expliqué en réunion. Les annotations intégrées capturent l’intention réelle, éliminant les corrections après coup.
Un nommage calqué sur le code
Design system et codebase partagent les mêmes conventions de nommage. Le développeur retrouve immédiatement ses repères, transformant le handoff en une simple synchronisation.
Décision
Industrialiser le multi-marque
Bloom a démarré sans couche sémantique par pragmatisme. Avec la croissance du produit, cette dette technique a imposé trois semaines de refonte pour restructurer le système. Pour un produit scalable, cette couche intermédiaire est une fondation indispensable dès le départ, pas une optimisation tardive.
Limites du modèle brut
Lier les composants aux valeurs brutes accélère le démarrage, mais accumule de la dette technique à chaque déclinaison client.
L’écosystème sémantique
Une couche intermédiaire traduit les primitives selon leur contexte. Changer l’identité d’un client se résume à modifier quelques variables.
Architecture
Des composants modulaires
Certains clients imposent des contraintes imprévues. Un composant trop rigide force un fork ; trop générique, il ne sert plus à rien. La réponse repose sur des composants fixes, déclinés en variantes capables d’absorber ces spécificités.
Valeurs brutes
Chaque valeur brute est définie sans intention sémantique : la base technique est posée, mais elle reste déconnectée du produit.
//couche 1
Rôles sémantiques
Chaque primitive reçoit un rôle fonctionnel. L’identité s’applique à ce niveau, sans impacter l’architecture des composants.
//couche 2
Composants finaux
Chaque composant consomme uniquement ces tokens sémantiques. La cohérence reste totale, quelle que soit l’identité du client.
//couche 3
Alignement tech
Designer pour la prod
Les états des composants suivent les pseudo-classes CSS : la structure d’un token comme btn-primary-bg-default correspond exactement au code.
La spec technique étant intégrée dans Figma, le développeur implémente la maquette sans aucune interprétation. Aucun composant n’est réécrit de zéro : l’architecture est autonome.
Identités
Une structure, plusieurs identités
L’architecture des composants et des tokens est identique pour tous. Pour déployer un nouveau client, il suffit d’injecter ses primitives (couleurs, typographies, arrondis) via un fichier de configuration.
L’identité se propage instantanément à toute la plateforme. Côté code, le développeur applique le thème en une ligne, sans toucher aux composants.
Parcours utilisateurs
Du créateur à l’acheteur
Configurer l’émission d’un actif
De la pièce unique à la collection complète, le créateur configure ses actifs digitaux en quelques clics. Il définit le volume, le prix et la rareté à travers un parcours fluide, qui masque toute la complexité technique de la blockchain.
Fluidifier l’achat vers le wallet
Un tunnel d’achat en trois étapes : fiche produit, paiement et transfert sécurisé. Chaque interaction est pensée pour rassurer et éliminer la friction liée aux transactions numériques.
Playground
Le design system en action
Sélectionnez une marque pour voir l’ensemble du système se reconfigurer.
Bloom
Base Modulaire
Contact
Concevons votre projet
Décrivez votre projet en quelques mots, je réponds vite.