material 3 dans un site personnel : ce qui a survécu, ce qui n'a pas survécu
dev · Oct 4, 2026 · 5 min read
ce site fonctionne avec material 3. pas « inspiré par », pas « vaguement basé sur » — les vrais noms de jetons, les vrais schémas de palette, le vrai langage de forme. je voulais savoir si un design system conçu pour une application de téléphone survit au contact avec un site personnel, qui a des priorités complètement différentes.
réponse courte : environ 70% a survécu, et les 30% qui sont morts sont la partie dont je suis le plus heureux de m'être débarrassé.
## ce qui est entré
**la couche de jetons**, qui est la vraie chose. `--primary-container`, `--on-primary-container`, `--surface-variant`, `--outline-variant` — ce sont les noms m3, pas les miens, et chaque composant les consomme au lieu de coder une couleur en dur. c'est la partie qui a le plus rapporté, et pas pour des raisons esthétiques.
elle a rapporté parce que j'ai fait passer tout le site du clair au sombre et retour, et changé l'accent, six fois, en l'écrivant. rien n'est cassé. il n'y a aucun `if (dark)` dans mes composants. chaque couleur de la feuille de style passe par une variable, et la palette sombre est un second jeu de valeurs pour les mêmes noms.
**les six schémas de palette** : tonal-spot, fidelity, content, neutral, expressive et fruit-salad. ils sont dans la boîte de dialogue des réglages et ils fonctionnent tous, parce que ce sont ceux que m3 nomme ainsi et non six thèmes ajustés à la main.
**l'échelle de formes.** m3 a une échelle définie de rayons de coin et les cartes se placent à son sommet. mes cartes sont en `rounded-[2.4rem]`, les boutons sont totalement arrondis, les pilules de navigation totalement arrondies. c'est l'indice m3 le plus reconnaissable et il survive sans difficulté à la traduction vers un site personnel.
**l'ondulation**, à la bonne opacité :
```
opacity: var(--ripple-hover-opacity, 0.08);
```
0.08 est la valeur de la couche d'état de m3. elle paraît presque trop subtile, et c'est normal — le but d'une couche d'état est que vous ne la remarquiez pas consciemment.
**le périmètre de l'ondulation.** c'est la partie que je ne savais pas qu'il me fallait. l'ondulation ne suit le pointeur qu'à l'intérieur de l'élément sur lequel vous avez réellement appuyé, pas sur toute la page. ça donne aux clics rapides une sensation de précision plutôt que de maladresse.
**les composants qui ont du sens en petite version web** : l'interrupteur, le curseur, le champ de texte, et deux barres de défilement, une pour la fenêtre et une pour les panneaux. ce sont de purs gains.
## ce que j'ai jeté
**l'élévation.** m3 définit six niveaux, de 0 à 5, avec une ombre spécifique pour chacun. je n'en utilise **aucun**. il n'y a pas un seul jeton d'élévation dans ma feuille de style, et les seules ombres qu'elle contient sont des états de survol sur les cartes et les boutons — rien qui décrive la hauteur d'une surface.
ce n'était pas de la paresse, c'était une décision. le modèle d'élévation de m3 suppose des surfaces opaques empilées les unes sur les autres. ce site a une barre latérale translucide avec un flou en arrière-plan, et du contenu qui défile dessous. l'élévation est une métaphore de profondeur pour des plans opaques ; quand le plan est transparent, l'ombre ment sur ce qui est au-dessus de quoi. ici ce sont les bordures qui séparent, pas les ombres.
les valeurs d'élévation de m3 sont bonnes et j'en ai copié l'esprit — bordures à `--outline-variant`, rayon au sommet de l'échelle — sans copier les jetons.
**l'échelle typographique.** m3 a cinq rôles : display, headline, title, body, label, chacun avec trois tailles. j'en utilise à peu près deux, parce qu'un rôle display dimensionné pour un téléphone vous donne environ 57px, ce qui n'est pas un titre sur un large écran. l'échelle ne survit pas au saut d'une fenêtre de 6 pouces à une de 2560px sans être redimensionnée, et une fois redimensionnée vous n'utilisez plus l'échelle de m3, vous utilisez la vôtre qui lui ressemble.
j'ai gardé l'*idée* — une seule police display expressive pour les grands moments, une monospace pour les surfaces développeur, une sans-serif neutre pour le corps — et j'ai jeté la rampe précise.
## celle qui n'a jamais fonctionné
**le mouvement.**
m3 spécifie des durées et des courbes d'accélération, et elles sont réglées pour un téléphone : courtes, parce qu'un pouce est près de l'écran. sur un site de bureau piloté au pointeur, ces mêmes courbes donnent une lenteur difficile à formuler. mon œil n'est pas là où mon pouce serait.
le plus gros problème, c'est que des specs riches en mouvement supposent un budget d'images fiable. ils ne supposent pas que le budget d'images puisse être nul.
je me suis pris le choc de plein fouet. mon animation de repli de la barre latérale a cessé de fonctionner en silence : la boîte restait à sa largeur maximale, pour toujours, sans la moindre erreur. la cause n'était pas la logique d'animation mais une projection de mise en page qui se battait avec une transition de largeur sur le même élément — deux choses qui essaient toutes les deux de posséder la boîte, et le perdant n'atteint jamais sa valeur finale. et la seule raison pour laquelle je l'ai trouvée, c'est d'avoir mesuré la largeur calculée au lieu de faire confiance au fait que le code « avait l'air correct ».
j'ai déplacé la largeur d'une valeur motion vers une transition css classique, et supprimé la projection de mise en page. la boîte atteint maintenant sa cible en moins de 60ms, mesuré, à chaque fois.
la leçon ne portait pas sur framer motion. elle portait sur le fait qu'un design system vous dit à quoi ressemble un état final et ne dit rien sur la façon d'y arriver quand le budget d'images s'effondre. pour une application de téléphone cette hypothèse tient. pour une page web qui tourne dans un onglet que quelqu'un a peut-être mis en arrière-plan, elle ne tient pas.
## ce que je garderais si je recommençais
la couche de jetons, sans hésiter. c'est la partie de m3 qui est vraiment réutilisable hors d'android, et la raison est ennuyeuse : c'est un système de nommage qui vous oblige à répondre à « quel est le rôle de cette couleur » au lieu de « quelle est cette couleur ». cette question vaut la peine d'être posée même si vous n'ouvrez jamais la doc material.
les schémas de palette et l'échelle de formes, parce qu'ils sont gratuits une fois que les jetons existent.
l'opacité de la couche d'état, parce que c'est un seul nombre et qu'il est juste.
et l'élévation, la rampe typographique et les courbes de mouvement, parties, sans regret — ce sont toutes des hypothèses sur un contexte dans lequel ce site ne se trouve pas.
le résumé honnête : m3 est une très bonne réponse à « à quoi ressemble et se sent une application android native », et un point de départ correct pour un design system web, à condition que vous acceptiez de le traiter comme un vocabulaire et non comme une spécification. les jetons se transfèrent. les valeurs en pixels, non.