Eu vou construir um sistema de design acessível e escalável para múltiplas marcas

Pare de reconstruir sua UI para cada unidade de negócio e deixe de falhar nas auditorias de acessibilidade.

A maioria dos sistemas de design quebram no momento em que uma segunda marca ou modo escuro aparece, porque a cor está codificada nos componentes ao invés de seguir os tokens. E a maioria falha WCAG porque a acessibilidade é uma auditoria manual adicionada no final.

Eu projeto seu sistema de design com um modelo de tokens de três camadas, para que uma biblioteca de componentes possa atender todas as unidades de negócio que você possui e permanecer em conformidade enquanto faz isso:

Camada 1 Paleta / tokens de marca. As cores da marca ficam aqui. Essa é a única camada que uma nova unidade de negócio precisa tocar. Me entregue uma paleta, e você terá um produto totalmente tematizado.

Camada 2 tokens semânticos (modo claro + escuro). Os valores da paleta mapeiam para funções superfície, texto-principal, borda-sutil, ação-padrão. A troca de modo e a rebranding acontecem aqui, sem precisar reprogramar componentes.  É aqui também que a acessibilidade é garantida: a contraste é validado uma vez por par semântico, e depois herdado por todos os componentes.

Camada 3 tokens de componentes. Botões, inputs, cartões e o restante referenciam apenas tokens semânticos.

O resultado: para lançar uma nova unidade de negócio, sua equipe troca a Camada 1 e toda a UI se re-tematiza automaticamente, com modo claro e escuro, e permanece em conformidade com WCAG AA.