Je vais construire un système de design multi-marques accessible et évolutif

Arrêtez de reconstruire votre interface utilisateur pour chaque unité commerciale et d’échouer aux audits d’accessibilité.

La plupart des systèmes de design échouent dès qu’une seconde marque ou un mode sombre apparaît, car la couleur est codée en dur dans les composants au lieu de passer par des tokens. Et la plupart ne respectent pas WCAG car l’accessibilité est une vérification manuelle ajoutée en fin de processus.

J’architecture votre système de design sur un modèle à trois couches de tokens, afin qu’une seule bibliothèque de composants puisse servir chaque unité commerciale que vous possédez tout en restant conforme :

Couche 1 Palette / tokens de marque. Les couleurs de la marque y résident. C’est la seule couche que doit toucher une nouvelle unité commerciale. Donnez-moi une palette, et vous aurez un produit entièrement thématisé.

Couche 2 tokens sémantiques (mode clair + mode sombre). Les valeurs de la palette sont mappées à des rôles surface, text-primary, border-subtle, action-default. Le changement de mode et le rebranding se font ici, sans rework des composants. C’est aussi ici que l’accessibilité est appliquée : le contraste est validé une fois par paire sémantique, puis hérité par chaque composant.

Couche 3 tokens de composants. Les boutons, champs, cartes, et autres ne font référence qu’aux tokens sémantiques.

Le résultat : pour lancer une nouvelle unité commerciale, votre équipe échange la couche 1 et toute l’interface se rethématise automatiquement, en mode clair et sombre, tout en restant conforme à WCAG AA.