Bloom
Un marketplace Web3 de marca blanca con arquitectura modular. Pensada para adaptarse a cada cliente, la interfaz se reconfigura al instante sin tocar código.
1
Solo sistema a mantener
65+
Componentes mantenidos
7+
Identidades desplegadas
3×
Más rápido de desplegar
Contexto
Alinear diseño y código
Desplegar una arquitectura única bajo identidades radicalmente distintas expone la plataforma a una deuda técnica constante. Sin una estructura semántica estricta, cada personalización de cliente fragiliza el mantenimiento global del producto.
Para absorber universos opuestos, del gaming a las finanzas, el sistema se apoya en un temado dinámico. El diseño y el código comparten las mismas variables, eliminando las idas y vueltas de ajuste y garantizando la integridad de la interfaz en cada despliegue.
Problema
El costo técnico del trabajo a medida
Lo que varía de un cliente a otro se limita estrictamente a valores de superficie: colores, tipografía, radios de borde o espaciados. Los comportamientos, la jerarquía y la accesibilidad se mantienen intactos.
Aislar estas dos capas permite desplegar decenas de identidades sin impactar la estructura de los componentes. Más que una optimización visual, es la decisión técnica fundamental que hace viable la marca blanca a escala.
Solución
Un solo sistema para todas las marcas
Para industrializar el producto desde una base única, la solución se apoya en una arquitectura de tres niveles: valores primitivos fijos, tokens semánticos configurables por cliente y componentes agnósticos.
La integración técnica se hace una sola vez para que la UI se adapte dinámicamente. Lo que antes exigía meses de investigación y desarrollo ahora se integra para un nuevo cliente en una semana.
Método
Diseñado en solo,listo para reanudar
Trabajar en solo exige un rigor absoluto en la documentación: nombrar, justificar y anotar cada decisión para agilizar la integración en producción.
El sistema debe entenderse sin abrir Figma. Los componentes se estructuran por estado de uso y los tokens emplean nombres semánticos en lugar de valores brutos.
Un entregable autónomo
El entregable no requiere explicaciones en reunión. Las anotaciones integradas capturan la intención real, eliminando correcciones posteriores.
Nomenclatura alineada con el código
El design system y la codebase comparten las mismas convenciones de nombre. El desarrollador se ubica al instante, convirtiendo el handoff en una simple sincronización.
Decisión
Industrializar el multi-marca
Bloom comenzó sin capa semántica por pragmatismo. Con el crecimiento del producto, esta deuda técnica exigió tres semanas de reestructuración para reorganizar el sistema. Para un producto escalable, esta capa intermedia es una base indispensable desde el principio, no una optimización tardía.
Límites del modelo bruto
Vincular componentes a valores brutos acelera el inicio, pero acumula deuda técnica con cada variante de cliente.
El ecosistema semántico
Una capa intermedia traduce primitivas según su contexto. Cambiar la identidad de un cliente requiere pocas variables.
Arquitectura
Componentes modulares
Algunos clientes imponen restricciones imprevistas. Un componente demasiado rígido fuerza un fork; demasiado genérico, ya no sirve. La solución se basa en componentes fijos con variantes capaces de absorber estas particularidades.
Valores brutos
Cada valor bruto se define sin intención semántica: la base técnica está lista, pero sigue desconectada del producto.
//capa 1
Roles semánticos
Cada primitiva recibe un rol funcional. La identidad se aplica aquí, sin impactar la arquitectura de los componentes.
//capa 2
Componentes finales
Cada componente consume solo estos tokens semánticos. La coherencia es total, sin importar la identidad del cliente.
//capa 3
Alineación tech
Diseñar para prod
Los estados de componentes siguen pseudo-clases CSS: la estructura de un token como btn-primary-bg-default coincide exactamente con el código.
Al integrar la especificación técnica en Figma, el desarrollador implementa sin interpretación. Ningún componente se reescribe desde cero: la arquitectura es autónoma.
Identidades
Una estructura, varias identidades
La arquitectura de componentes y tokens es idéntica para todos. Para desplegar un nuevo cliente, basta con inyectar sus primitivas (colores, tipografía, radios de borde) vía un archivo de configuración.
La identidad se propaga al instante por toda la plataforma. Del lado del código, el desarrollador aplica el tema en una sola línea, sin tocar los componentes.
Flujos de usuario
Del creador al comprador
Configurar la emisión de un activo
De piezas únicas a colecciones completas, el creador configura sus activos digitales en pocos clics. Define el volumen, precio y rareza mediante un flujo ágil que oculta toda la complejidad de la blockchain.
Fluidificar la compra al wallet
Un flujo de compra en tres pasos: ficha de producto, pago y transferencia segura. Cada interacción está diseñada para dar confianza y eliminar la fricción de las transacciones digitales.
Playground
El design system en acción
Selecciona una marca para ver todo el sistema reconfigurarse.
Bloom
Base modular
Contacto
Diseñemos tu proyecto
Cuéntame en pocas palabras, respondo rápido.