Bloom
A white-label Web3 marketplace built on a modular architecture. Designed to adapt to each client, the interface reconfigures instantly without code changes.
1
Single system to maintain
65+
Maintained components
7+
Deployed identities
3×
Faster to deploy
Context
Aligning design and code
Deploying a single architecture across radically different identities exposes the platform to constant technical debt. Without a strict semantic structure, each client customization threatens global product maintenance.
To absorb contrasting worlds, from gaming to finance, the system relies on dynamic theming. Design and code share the exact same variables, eliminating back-and-forth adjustments and ensuring interface integrity with every deployment.
Problem
The technical cost of custom builds
What varies from client to client is strictly limited to surface values: colors, typography, border radius, or spacing. Behaviors, hierarchy, and accessibility remain unchanged.
Isolating these two layers makes it possible to deploy dozens of identities without impacting component structures. More than a visual optimization, this is the foundational technical decision that makes white-label viable at scale.
Solution
A single system for all brands
To industrialize the product from a single codebase, the solution relies on a three-tier architecture: fixed primitive values, semantic tokens configurable per client, and agnostic components.
Technical integration happens only once, allowing the UI to adapt dynamically. What used to take months of R&D now integrates for a new client in a single week.
Method
Designed solo,built to be taken over
Working solo demands absolute documentation rigor: naming, justifying, and annotating every decision to ensure smooth production integration.
The system must be understood without opening Figma. Components are structured by usage state, and tokens use semantic names over raw values.
A standalone deliverable
The deliverable requires no meeting to be explained. Embedded design annotations capture true intent, eliminating post-handoff corrections.
Code-aligned naming
Design system and codebase share identical naming conventions. Engineers find their bearings instantly, turning handoff into a simple sync.
Decision
Industrializing multi-brand
Bloom started without a semantic layer for pragmatic reasons. As the product grew, this technical debt required a three-week refactor to restructure the system. For a scalable product, this intermediate layer is an essential foundation from day one, not a late optimization.
Raw model limitations
Binding components directly to raw values speeds up launch, but accumulates technical debt with every client variant.
The semantic ecosystem
An intermediate layer translates primitives by context. Changing a client’s identity comes down to a few variables.
Architecture
Modular components
Some clients impose unexpected constraints. A component that is too rigid forces a fork; too generic, it becomes useless. The answer lies in fixed components with variants built to handle these edge cases.
Raw values
Each raw value is defined without semantic intent: the technical baseline is set, but remains disconnected from the product.
//layer 1
Semantic roles
Each primitive receives a functional role. Identity is applied here, leaving component architecture completely untouched.
//layer 2
Final components
Components consume only these semantic tokens. Total consistency is preserved, regardless of the client’s identity.
//layer 3
Tech alignment
Designing for prod
Component states follow CSS pseudo-classes: a token structure like btn-primary-bg-default mirrors the codebase exactly.
With technical specs embedded directly in Figma, developers implement designs without interpretation. No component is rewritten from scratch: the architecture is self-sustaining.
Identities
One structure, multiple identities
Component and token architecture remains identical for everyone. Deploying a new client simply requires injecting its primitives (colors, typography, border radius) via a config file.
The identity propagates instantly across the entire platform. Code-wise, developers apply the theme in a single line without touching components.
User flows
From creator to buyer
Configuring asset issuance
From 1-of-1s to full collections, creators configure digital assets in a few clicks. Supply, price, and rarity are defined through a seamless flow that completely abstracts blockchain complexity.
Streamlining wallet checkout
A three-step checkout flow: product page, payment, and secure transfer. Every interaction is designed to reassure users and remove friction from digital transactions.
Playground
The design system in action
Select a brand to watch the entire system reconfigure.
Bloom
Modular base
Contact
Let’s build your project
Describe your project in a few words, I’ll get back to you quickly.