Design system, contenu, cohérence

10.1 Les tokens : le style vit à un seul endroit

Un design system commence par les tokens, les variables nommées des couleurs, des espacements, de la typographie. Changez le token, tout le produit change avec lui. Codez une couleur en dur sur un écran et vous avez lancé une lente dérive que personne ne corrigera entièrement. La cohérence, ce n'est pas de la discipline appliquée mille fois, c'est une source unique appliquée partout.

10.2 L'invariant qui garde un produit cohérent

Choisissez une palette réduite et fixe, et tenez-la. Une poignée de couleurs utilisées avec du sens (une pour l'action principale, une pour le danger, une pour le succès) est ce qui fait qu'un produit ressemble à un seul produit. Le mode d'échec n'est pas la laideur, ce sont dix bleus légèrement différents qui semblaient tous très bien, isolément.

10.3 Le registre de composants

Réutilisez avant de recréer. Tenez un registre des briques (le bouton, la carte, le champ) et servez-vous-en. Chaque composant unique est une incohérence future et une maintenance future. Quand un fichier dépasse les deux cents lignes, c'est le signal de le découper, pas une réprimande.

10.4 Le contenu se calibre sur un corpus, il ne se décrète pas

La voix de votre produit (les micro-textes, les états vides, les messages d'erreur) ne s'invente pas écran par écran. Elle se calibre sur une référence : quelques exemples qui définissent le ton, et tout le reste s'y aligne. Un contenu décidé écran par écran finit par sonner comme cinq personnes différentes, parce qu'il a été écrit dans cinq humeurs différentes.

10.5 Performance et accessibilité, le minimum que tout builder doit

Deux choses que vous n'avez pas à maîtriser, mais que vous ne devez pas ignorer. La performance : un produit lent semble cassé même quand il fonctionne. Surveillez les bases (à quelle vitesse le premier vrai contenu apparaît, en combien de temps la page devient utilisable) et traitez une page lourde comme un bug, pas comme un détail. L'accessibilité : certains utilisateurs naviguent au clavier, d'autres avec un lecteur d'écran, d'autres ne supportent pas les animations. Les gains faciles portent loin : des états de focus visibles pour que les utilisateurs au clavier sachent où ils sont, le respect du réglage « réduire les animations », de vraies alternatives textuelles aux images, un contraste de couleurs suffisant. Ce n'est pas du vernis supplémentaire. C'est la question de savoir si une partie de vos utilisateurs peut simplement se servir de la chose.