La dérive visuelle d’un back-office vient rarement d’une grande refonte, mais de valeurs de couleur, d’espacements et de composants jetables dispersés : le même « succès » apparaît en trois verts, et changer de thème impose de parcourir des dizaines de fichiers.

admin-design commence par les jetons et les coques, et ne parle des pages qu’ensuite.

La couleur décrit l’usage, pas la valeur

La couleur passe uniquement par des classes utilitaires sémantiques : bg-card, text-muted-foreground, text-success, border-destructive. Changer de thème change des jetons, pas du code métier.

Les palettes fonctionnent en deux couches : six préréglages (teal, blue, forest, violet, amber, graphite et personnalisé) donnent le ton général, tandis que les couleurs de base (neutral, stone, zinc et autres) et les couleurs de thème sur dix-huit teintes l’ajustent. Les modes clair et sombre conservent des choix distincts.

L’accessibilité n’est pas un supplément : taille et graisse du texte, contraste élevé, accompagnement de la vision des couleurs, réduction des animations et liens soulignés sont dans les réglages. Les préférences restent dans le navigateur et n’entrent jamais dans les données métier.

Tous les graphiques sont dessinés en SVG

Courbes, barres, anneaux, mini-barres, barres horizontales, cartes de chaleur, radar, entonnoir et Gantt partagent les mêmes couleurs sémantiques, suivent les modes clair et sombre et portent role="img" avec un aria-label qui indique ce que montre le graphique.

Le prix de l’absence de dépendance est l’entretien des coordonnées et des échelles. Le bénéfice est la maîtrise du poids, des audits et de la cohérence du thème : il n’y a pas un second système de couleurs à synchroniser.

La galerie est la surface de recette

Neuf catégories de composants occupent neuf pages, et chaque contrôle a un emplacement réel. Modifier un composant suppose de mettre à jour d’abord son exemple dans la galerie ; une nouvelle capacité arrive sous forme d’exemple, d’emplacement réel et de test. La documentation ne peut pas diverger de l’implémentation et la revue dispose d’un point de comparaison unique.