Le design system META, en entier.

La cohérence construit la confiance. Un visiteur ne sait pas dire pourquoi un site inspire confiance, mais il le sent en trois secondes. Quand chaque page utilise le même orange, la même graisse de titre, le même rayon de bouton, le cerveau arrête de travailler et se concentre sur le contenu. À l'inverse, une page qui change de règles à chaque section envoie un signal simple : personne ne surveille les détails ici. Si le site est négligé, pourquoi le service ne le serait-il pas ?

Un token, c'est une décision prise une seule fois. Sans système, choisir un gris de texte se refait sur chaque page, chaque composant, chaque nouveau collaborateur. Vous vous retrouvez avec quarante gris presque identiques et personne pour trancher. Avec un système, muted-fg existe, il a une valeur, et la question ne revient plus. Le jour où la marque évolue, vous changez une ligne dans styles.css et l'ensemble du site suit — en clair, en sombre, sur toutes les langues.

Le développement va plus vite et la maintenance coûte moins cher. Construire une nouvelle page devient un assemblage : le conteneur .sec, un kicker, un titre h-section, une grille bordée en line, un bouton primary. Il n'y a rien à inventer, donc rien à réviser en revue. Sur la durée de vie d'un site, la maintenance dépasse largement le coût de la création initiale ; c'est là que le système se rembourse.

L'accessibilité est intégrée, pas ajoutée après coup. Les contrastes sont validés à la source : le texte principal atteint un ratio très élevé sur fond blanc, muted-fg reste au-dessus du seuil AA pour le texte courant. Les états de focus sont visibles et cohérents partout, l'anneau orange de 2px ne dépend jamais du composant. Et prefers-reduced-motion est respecté globalement, pas composant par composant. Une personne qui navigue au clavier ou qui souffre de troubles vestibulaires n'est pas un cas particulier à traiter plus tard.

La performance suit la même logique. Les polices sont auto-hébergées en woff2 avec des plages Unicode découpées et font-display: swap — aucune requête vers un serveur tiers, aucun texte invisible pendant le chargement. Deux familles, pas huit. Aucune bibliothèque de composants importée pour trois boutons. Le résultat se mesure : les pages s'affichent en moins d'une seconde, et cette rapidité est elle-même un argument de conversion.

Le mode sombre est offert par la structure. Comme aucun composant ne connaît de couleur en dur, passer en sombre revient à redéfinir huit variables. Pas de double maquette, pas de correctifs dispersés, pas de régression un mois plus tard. C'est exactement le genre de fonctionnalité qui coûte une fortune quand elle est bricolée, et presque rien quand le socle est propre.

Reste la discipline de la contrainte, la partie la plus difficile. Il est tentant d'ajouter un dégradé, une ombre, une seconde couleur d'accent. Chaque ajout paraît anodin et chacun retire un peu de force à l'ensemble. Cinq pour cent d'orange sur une page frappent ; de l'orange partout ne signale plus rien. Un système utile est un système qui dit non — c'est précisément sa valeur.

Nous appliquons ce standard à nos projets clients comme à notre propre site. Le résultat n'est pas un site plus joli dans l'absolu : c'est un site plus rapide à faire évoluer, moins cher à maintenir, plus accessible et plus crédible. Sur trois ans, la différence est comptable.