El Proyecto de un Vistazo
El sistema de tokens que anticipó el multi-brand.
En 2021 estábamos sentando las bases de un design system desde cero para una plataforma healthcare global. Una pregunta incómoda, hecha en el momento justo, lo cambió todo. Esta es la historia de por qué esa pregunta merecía una respuesta arquitectónica, no un parche.
EL PROYECTO DE UN VISTAZO
Rol
Design System Lead · Arquitectura de tokens
Dominio
Salud · Multimarca · Multiproducto
Año
2021, antes de que multimarca fuera práctica común
Alcance
Arquitectura de tokens · Naming semántico · Theming entre marcas
Foco
Visión a largo plazo · Escalar sin deuda técnica
LA PREGUNTA QUE LO CAMBIÓ TODO
"¿Qué pasa si la empresa cambia mañana de color de marca?"
El momento
A principios de 2021 construíamos las bases de un design system desde cero: foundations, tokens, naming, lo básico que necesita cualquier sistema. Mientras trabajábamos, una pregunta volvía una y otra vez, a mí y al desarrollador con el que trabajaba. Sonaba simple.
¿Qué pasa si la empresa cambia mañana de color de marca? Si dejamos de ser azules y pasamos a ser rojos, ¿cuánto del sistema se rompe?
La respuesta honesta
La respuesta honesta, en ese momento, era: bastante. Esa pregunta fue el principio de una decisión que cambiaría la dirección de todo lo que vino después.
También nos dijo algo importante. Si una sola pregunta podía romper el sistema, el sistema aún no estaba listo. Esto era más que una librería de componentes con un color por encima. Sin verlo del todo, estábamos delante de la primera pregunta real de cualquier sistema multimarca.
El contexto
En 2021, multimarca no era un tema común en los design systems. Los frameworks, las referencias, los casos de estudio que hoy ves por todas partes no existían. No había camino que seguir.
Había una pregunta incómoda y la sensación de que merecía una respuesta seria.
LA DECISIÓN: NOMBRAR LOS TOKENS POR SU FUNCIÓN, NO POR SU ASPECTO
Un token ya no representaría un valor visual. Representaría un rol, un propósito dentro del sistema.
La forma normal de nombrar un token es por cómo se ve. color-blue-500. font-size-16. Funciona, hasta que algo cambia. Y algo siempre cambia.
Así que cambiamos la lógica. Un token ya no representaría un color ni un valor. Representaría una función, un propósito dentro del sistema. color-action-primary no es azul. Es el color que significa "la acción principal de esta pantalla", sea cual sea el color que la marca elija: azul, rojo o verde.
Token semántico
color-action-primaryNo es "azul". Es "el color que comunica la acción principal de esta pantalla, sea cual sea el azul, el rojo o el verde que la marca decida usar".
Sobre el papel, parece un cambio pequeño. En la práctica, es lo que deja escalar todo lo demás. Significa que el mismo componente, con el mismo código, sin tocar una línea, puede vestirse con cualquier marca que la empresa necesite mañana.
El sistema de tokens se convirtió en la fuente de referencia compartida entre diseño y desarrollo. Podía extenderse a distintos activos de marca y a distintos lenguajes de programación sin que nadie tuviera que reescribir nada.
Esto es lo que se ve cuando un mismo token se usa en tres marcas. Mismo nombre. Misma función. Mismo componente. Solo cambia el valor final.
"Mismo nombre. Misma función. Mismo componente. Solo cambia el valor final."
POR QUÉ LO HICIMOS A PROPÓSITO
"La ausencia de un sistema previo no era una limitación. Era la única ventana de tiempo en la que se podía diseñar la arquitectura correcta."
La lectura fácil
Podrías pensar que esto solo fue posible porque no había nada construido todavía, y así empezar limpio era fácil. Pero esa lectura se queda corta.
La realidad
Vimos algo que muchas empresas no ven hasta que ya es tarde. Sin un sistema antiguo que proteger, ese era el único momento en el que podíamos construir la base correcta sin deuda técnica a la espalda.
El coste de esperar
Una vez que un sistema crece sin esa base, añadir tokens semánticos después son meses de trabajo sobre cientos de componentes, con riesgo real de romper producto en producción.
Vimos la ventana y la aprovechamos. Esto no fue suerte. Sabíamos que una pregunta incómoda necesitaba una respuesta de verdad en la arquitectura, no un parche.
EL IMPACTO
Cuando el coste de poner una marca nueva sobre un producto cae casi a cero, haces algo más que acelerar el diseño. Le das a la empresa un poder nuevo.
Una nota sobre el impacto
No tengo cifras exactas que pueda compartir, y prefiero ser honesta sobre eso antes que dar un número que solo suene bien. Pero vi cómo se usó el sistema después, y esto es lo que puedo decir.
Antes de tener un framework de tokens compartido, vestir el producto con una marca nueva significaba empezar casi de cero. Cada producto nuevo y cada marca nueva eran un proyecto entero de diseño y desarrollo.
La transformación
Con los tokens semánticos en marcha, ese mismo trabajo pasó a ser cuestión de cambiar valores, no de reconstruir la experiencia. La planificación se acortó. Construir pasó de ser un proyecto a ser una configuración.
Eso le dio al negocio algo que antes no tenía: una vía real para testear, validar y lanzar en nuevos mercados, o con nuevos socios, a una velocidad que antes no era posible. Cuando el coste de poner una marca nueva sobre un producto cae casi a cero, haces algo más que acelerar el diseño. Le das a la empresa un poder nuevo: el de decir que sí a oportunidades que antes habrían sido demasiado caras para considerarlas siquiera.
MÁS ALLÁ DE FARMA
Un token que representa un rol, no una apariencia, es portable a cualquier sector que necesite que una misma experiencia funcione bajo marcas distintas.
Este sistema nació en salud, pero la arquitectura no tiene nada que funcione solo para farma. Como un token nombra una función en lugar de un aspecto, sirve en cualquier industria que necesite que un mismo producto corra bajo marcas distintas. En todos los casos la pregunta es la misma que nos hicimos en 2021: ¿qué pasa si la marca cambia? Y la respuesta es la misma: nada, si el sistema se construyó bien desde el principio.
Fintech
Una fintech con varios neobancos white-label sobre la misma base.
Herramienta de productividad
Una herramienta de productividad que toma el aspecto de cada empresa que la usa.
Plataforma educativa
Una plataforma educativa que se adapta a la marca de cada institución que la licencia.
"Esa es la parte que más me gusta de este caso. No resolvimos un problema de Roche. Resolvimos un problema de sistemas, y Roche fue simplemente donde tuvimos la oportunidad de planteárnoslo primero."
