Crearé un sistema de diseño multimarca escalable y accesible

Deja de reconstruir tu UI para cada unidad de negocio y deja de fallar en las auditorías de accesibilidad.

La mayoría de los sistemas de diseño se rompen en el momento en que aparece una segunda marca o un modo oscuro porque el color está codificado en los componentes en lugar de fluir a través de tokens. Y la mayoría no cumplen WCAG porque la accesibilidad es una auditoría manual añadida al final.

Diseño tu sistema de diseño con un modelo de tokens de tres capas, para que una biblioteca de componentes pueda servir a cada unidad de negocio que posees y mantenerse compatible mientras lo hace:

Capa 1 Paleta / tokens de marca. Los colores de la marca viven aquí. Esta es la única capa que una nueva unidad de negocio tiene que tocar. Entiéndeme una paleta, obtén un producto completamente tematizado

Capa 2 Tokens semánticos (modo claro + oscuro). Los valores de la paleta se asignan a roles superficie, texto-principal, borde-sutil, acción-por defecto. El cambio de modo y la rebranding ocurren aquí, sin necesidad de reprogramar componentes.  También aquí se refuerza la accesibilidad: el contraste se valida una vez por par semántico, y luego se hereda en todos los componentes

Capa 3 Tokens de componentes. Los botones, inputs, tarjetas y el resto solo hacen referencia a tokens semánticos.

El resultado: para lanzar una nueva unidad de negocio, tu equipo cambia la Capa 1 y toda la UI se vuelve a tematizar, en modo claro y oscuro, y se mantiene automáticamente compatible con WCAG AA