Una base para todo un ecosistemaOne foundation for a whole ecosystem
El rediseño de un design system aislado, convertido en una base común de tokens y componentes de la que beben las webs, las apps y las interfaces embebidas de un mismo ecosistema.A design system built for one website, rebuilt as a shared foundation of tokens and components for the websites, apps and embedded interfaces of a single ecosystem.
ContextoContext
De un restyling a una base comúnFrom a restyle to a shared foundation
Todo arrancó por un restyling de identidad de la empresa: marca y logo nuevos. El encargo inmediato era aplicar ese cambio al sistema de diseño que existía, uno aislado y pensado para una sola web.It started with a company rebrand: new identity, new logo. The immediate brief was to apply it to the existing design system, which was isolated and built for a single website.
Pero esa web no es una web informativa. Es un ecosistema que vive bajo un mismo dominio, con accesos desde dentro a páginas de producto, un área de soporte y una plataforma para perfiles técnicos (instaladores, arquitectos, ingenieros de HVAC).But that website isn't a brochure site. It's an ecosystem under one domain, with entry points to product pages, a support area and a platform for technical users (installers, architects, HVAC engineers).
Hasta ese momento, el sistema de diseño solo cubría la web, con componentes y algunos estilos definidos. El resto de las plataformas estaba hardcodeado: respetaban los estilos de vista, pero sin componentes ni un sistema compartido.Until then, the design system only covered that website, with a set of components and a few defined styles. Every other platform was hardcoded: it matched the look, but had no components and no shared system behind it.
Y el universo no terminaba en las webs. Había además dos aplicaciones, una B2C para usuarios finales y una B2B para instaladores, y las interfaces de los termostatos.And the ecosystem didn't stop at the websites. There were also two apps, a B2C one for end users and a B2B one for installers, plus the thermostat interfaces.
De ahí salió la idea que le cambió la forma al encargo: en vez de aplicar el restyling a una sola web, reconstruir el sistema con atomic design y niveles de tokens, una librería de átomos de la que bebiera todo el universo de plataformas, apps e interfaces. Una sola base, donde cada plataforma o app interpreta los tokens según sus propios semánticos.That's where the brief changed shape. Instead of restyling one website, we rebuilt the system with atomic design and token tiers: one library of atoms for every platform, app and interface to draw from. One foundation, with each platform or app reading the tokens through its own semantic layer.
No era aplicar una identidad nueva a una web. Era darle a todo el ecosistema el sistema compartido que nunca había tenido.The job wasn't to put a new identity on one website. It was to give the whole ecosystem the shared system it had never had.
El equipoThe team
Cuatro personas, un sistemaFour people, one system
Entré con un rol de UX/UI y arquitecta del design system, junto a mi compañero de UX. Entre los dos definimos la estructura: el atomic design, los niveles de tokens y cómo cada plataforma los iba a interpretar.I joined as UX/UI designer and design system architect, alongside my UX colleague. Together we set the structure: atomic design, the token tiers and how each platform would interpret them.
Después se sumaron otra UI y una UX writer. La UX writer ayudaba a definir, según el contenido que necesitaba cada plataforma, qué piezas hacían falta. Y nos repartimos el universo por especialidad: la otra UI, más enfocada en la app mobile B2B; yo, en la B2C, las webs y las plataformas.A second UI designer and a UX writer joined later. The UX writer helped us work out which pieces each platform needed, based on its content. We split the work by strength: the other UI designer focused on the B2B mobile app, and I took the B2C app, the websites and the platforms.
No fue un sistema de una sola cabeza: cada uno aportó desde donde más sabía, y esa fue la razón de que cubriera plataformas tan distintas.No single person owned the system. Each of us brought what we knew best, and that's why it could stretch across such different platforms.
El proyecto sigue en desarrollo. Hay plataformas a las que todavía les falta buena parte de sus componentes, porque son de uso específico de esa plataforma o app. La B2C, en la que trabajo ahora, es una de ellas.The project is still in progress. Some platforms are still missing a good share of their components, because those components are specific to that platform or app. The B2C app, which I'm working on now, is one of them.
Un sistema que da servicio a muchas plataformas no lo sostiene una persona. Lo sostiene un equipo que se reparte bien, y lo sigue construyendo.A system that serves many platforms isn't held up by one person. It's held up by a team that splits the work well and keeps building it.
El desafíoThe challenge
Pensarlo, no solo construirloThinking it through, not just building it
El reto no era el tamaño en sí, aunque el universo fuera enorme. Era pensar la arquitectura de forma estratégica, nivel por nivel.Size wasn't the real challenge, even though the ecosystem was huge. The challenge was designing the architecture strategically, one tier at a time.
Por un lado, las foundations: los tokens primitivos, el nivel 0. Por encima, los semánticos de cada plataforma, un nivel 1 que bebía del 0 y que, a la vez, tenía que mantener coherencia entre todas. Crear los tokens no fue lo difícil, eso lo resolvimos con IA y auditorías. Lo difícil fue pensarlos de forma integral, con un mindset escalable y accesible, y contemplando casos como el de las plataformas que además tenían modo oscuro.At the bottom, the foundations: primitive tokens, tier 0. Above them, each platform's semantic tokens, a tier 1 that drew from tier 0 and still had to stay consistent across every platform. Creating the tokens wasn't the hard part; we handled that with AI and audits. The hard part was thinking about them as a whole: scalable, accessible, and ready for cases like the platforms that also had a dark mode.
El trabajo no estaba en crear los tokens, sino en diseñar la lógica que los volvía coherentes entre plataformas sin dejar de ser escalable y accesible.The real work wasn't creating tokens. It was designing the logic that kept them consistent across platforms while staying scalable and accessible.
Una misma base de decisiones alimenta implementaciones distintas: la web corre sobre WordPress, las apps sobre React. Cada entorno consume los mismos tokens en su propio lenguaje.The same set of decisions feeds very different builds: the website runs on WordPress, the apps on React. Each environment consumes the same tokens in its own language.
En la conversación con desarrollo, al principio hubo algo de rechazo. Después llegó el consenso, porque a sus equipos, uno por plataforma y por app, tener el sistema organizado también los beneficiaba. Cada entorno tiene su lenguaje, pero la organización siempre ayuda.Development pushed back a little at first. Then we reached agreement, because their teams, one per platform and app, also gained from an organized system. Every environment has its own language, but structure helps all of them.
Cada plataforma habla su idioma. El sistema les da, a todas, el mismo punto de partida.Each platform speaks its own language. The system gives all of them the same starting point.
El sistemaThe system
Una estructura común, el estilo de cada plataformaShared structure, each platform's own style
El sistema se organiza en niveles de tokens. El nivel 0 son los primitivos, la base cruda. El nivel 1 son los semánticos de cada plataforma, que beben del 0. Y el nivel 2 es el de componente, que se define por plataforma, cada una con sus componentes, dentro de la misma librería central.The system is organized in token tiers. Tier 0 holds the primitives, the raw values. Tier 1 holds each platform's semantic tokens, built on tier 0. Tier 2 is the component tier, defined per platform, each with its own components inside the same central library.
El sistema vive en una única librería central, organizada por páginas: una de átomos, una de elementos y una de componentes por cada plataforma.It all lives in one central library, organized by pages: one for atoms, one for elements and one for each platform's components.
La idea es que un mismo átomo se comparta entre plataformas, pero que cada una pueda aplicarle su estilo. Un button, o un input, tiene el mismo formato estructural y el mismo diseño base en web y en app. Lo que cambia, cuando hace falta, es su estilo: la tipografía, el color, el border radius. La estructura es común; el estilo lo decide cada plataforma.The idea is that an atom is shared across platforms, but each platform can give it its own style. A button or an input has the same structure and the same base design on the web and in the app. What changes, when it needs to, is the styling: type, color, border radius. The structure is shared; each platform decides the style.
Así, una misma pieza se mantiene reconocible en todo el ecosistema sin obligar a que todas las plataformas se vean iguales.That way, one piece stays recognizable across the ecosystem without forcing every platform to look the same.
Un sistema que comparte lo estructural y deja que cada plataforma decida hasta dónde diferenciarse.A system that shares the structure and lets each platform decide how far to stand apart.
DecisionesDecisions
Una sola librería, no muchasOne library, not many
La primera idea fue una librería madre con sublibrerías hijas, una por plataforma, que bebieran de ella. Al avanzar nos dimos cuenta de que repartir los tokens entre varias librerías iba a generar un lío difícil de mantener. Así que cambiamos el rumbo y centralizamos todo en una única librería. Elegir un solo lugar para todo costó más de definir, pero dividir la librería era repartir también el problema.Our first idea was a parent library with child libraries, one per platform, all drawing from it. As we went further, we saw that spreading tokens across several libraries would become a mess to maintain. So we changed course and centralized everything in a single library. One home for everything took longer to define, but splitting the library would have split the problem too.
Hoy está organizada por páginas: una de átomos, una de elementos y una de componentes por cada plataforma.Today it's organized by pages: one for atoms, one for elements and one for each platform's components.
La parte más dura fue la unificación. No todo nacía del mismo punto: hay un termostato que se creó antes de que existiera esta librería, y la app B2C todavía mantiene su librería anterior separada. Cada plataforma traía sus propias especificaciones, sus retos y sus estilos, y meterlas bajo un mismo sistema significaba reconciliar todo eso sin romper lo que cada una necesitaba.Unifying was the hardest part. Not everything started from the same place: one thermostat was designed before this library existed, and the B2C app still keeps its older library separate. Each platform came with its own specs, challenges and styles, and bringing them under one system meant reconciling all of that without breaking what each one needed.
Sabíamos que el esfuerzo se iba a pagar en mantenimiento y orden a futuro. Pero sobre todo en algo que se nota del lado del usuario: que todo el ecosistema se lea como uno solo, y no como un montón de herramientas sueltas.We knew the effort would pay off in maintenance and order down the line. Above all, it would pay off in something users notice: the whole ecosystem reading as one, not as a pile of disconnected tools.
Unificar fue lo más difícil, y también lo que hace que el usuario deje de saltar entre productos que se sienten distintos.Unifying was the hardest part, and it's what stops users from jumping between products that feel different.
ResultadosResults
Lo que una base ordenada habilitaWhat a well-ordered foundation makes possible
El proyecto sigue en curso, así que los resultados se cuentan por lo que el sistema ya habilita, no por un cierre.The project is still ongoing, so the results are about what the system already makes possible, not a final number.
Lo más tangible es la facilidad para reutilizar. Con las bases del sistema documentadas y ordenadas, crear un componente nuevo con IA es rápido y fiable: la IA lee qué token le corresponde a cada plataforma y reutiliza lo que ya existe, en vez de inventar. Cuando la base está bien definida y documentada, lo que ya está resuelto a nivel UI deja de consumir tiempo, y el foco se va a lo que de verdad importa.The most tangible result is reuse. With the foundations documented and organized, building a new component with AI is fast and reliable: the AI reads which token belongs to each platform and reuses what already exists instead of making things up. When the foundation is well defined and documented, what's already solved in the UI stops eating time, and the focus moves to what really matters.
Hoy, desde una única base, el sistema da servicio a un mismo ecosistema: tres webs, dos aplicaciones y dos interfaces embebidas, cada una con sus propios estilos pero partiendo del mismo lugar.Today, from a single foundation, the system serves one ecosystem: three websites, two apps and two embedded interfaces, each with its own style but starting from the same place.
Y el resultado que más se nota no está en Figma, sino del lado del usuario: el ecosistema empieza a leerse como uno solo, y no como un conjunto de herramientas sueltas que no se hablan entre sí.And the result people notice most isn't in Figma; it's on the user's side. The ecosystem is starting to read as one, not as a set of disconnected tools that don't talk to each other.
El resultado no es una cifra cerrada, es una base sobre la que todo lo que viene se construye más rápido y más coherente.The result isn't a closed number. It's a foundation that makes everything that comes next faster and more consistent to build.