Costruirò un sistema di design multi-brand scalabile e accessibile

Smetti di ricostruire la tua UI per ogni unità di business e di fallire nelle verifiche di accessibilità.

La maggior parte dei sistemi di design si rompe nel momento in cui compare un secondo brand o una modalità dark perché il colore è codificato nei componenti invece di fluire attraverso i token. E la maggior parte fallisce WCAG perché l'accessibilità è una verifica manuale aggiunta alla fine.

Progetto il tuo sistema di design su un modello a tre livelli di token, così una libreria di componenti può servire ogni unità di business che possiedi e rimanere conforme mentre lo fa:

Layer 1 palette / token di brand. I colori del brand vivono qui. Questo è l'unico livello che una nuova BU deve toccare. Passami una palette, ottieni un prodotto completamente tematizzato

Layer 2 token semantici (modalità light+dark). I valori della palette si mappano ai ruoli surface, text-primary, border-subtle, action-default. Qui avviene il cambio di modalità e il rebranding, senza dover rifare i componenti. Qui si applica anche l'accessibilità: il contrasto viene validato una volta per ogni coppia semantica, poi ereditato da ogni componente

Layer 3 token dei componenti. Bottoni, input, card e altri fanno riferimento solo ai token semantici.

Il risultato: per lanciare una nuova unità di business, il tuo team cambia Layer 1 e l'intera UI si ri-tematizza automaticamente, light e dark, e rimane conforme alle WCAG AA