La grille 8pt et les fondamentaux d'un design system UI
Florent Dabernat
3 mai 2026
6 min de lecture
Dans cet article
Une application bancaire qui veut moderniser son interface tout en conservant un haut niveau d'accessibilité doit s'appuyer sur des fondamentaux solides. La grille 8pt en fait partie, et elle structure la majorité des interfaces professionnelles aujourd'hui.
La grille 8pt et le spacing
La grille 8pt assure une cohérence visuelle et un rythme régulier, avec des espacements et des tailles harmonisés par multiples de huit, ou par demi-pas de quatre si nécessaire. Les colonnes s'adaptent aux différents breakpoints, tandis que les gouttières restent stables d'un écran à l'autre. Certains produits prévoient même deux densités, Comfort et Compact, pour s'adapter aux usages riches en données comme les tableaux financiers.
Couleurs, contrastes et typographie
La palette s'organise autour de quatre familles : primaire, secondaire, neutres et couleurs d'état (succès, alerte, danger, information). Les contrastes doivent respecter le niveau AA, soit 4,5:1 pour le texte normal et 3:1 pour le texte large. Les thèmes clair et sombre ne se résument jamais à une simple inversion : ils demandent un recalibrage des neutres, des saturations et de l'élévation des surfaces.
Côté typographie, l'échelle modulaire garantit des titres lisibles et hiérarchisés, tandis que la longueur de ligne et l'interlignage sont ajustés pour favoriser la lecture continue. Les chiffres tabulaires lining s'avèrent particulièrement utiles dans les contextes chiffrés, comme les tableaux ou les montants bancaires.
Sur la refonte d'un écran de connexion bancaire, l'application de ces principes a permis d'augmenter de 15 % les connexions réussies au premier essai, avec une baisse de 30 % des erreurs de saisie.
Le design system comme source de vérité
Le design system organise les éléments du plus simple au plus complexe : atomes, molécules, organismes. Il s'appuie sur des composants avec variants et props, une bibliothèque partagée dans Figma, et une documentation claire, souvent dans Zeroheight ou Notion. Les tokens constituent la source de vérité pour les couleurs, les espacements, la typographie et le motion, garantissant qu'un changement de valeur se propage partout sans divergence.
Chaque composant dispose d'états définis (défaut, survol, focus visible, actif, désactivé, chargement, succès, erreur), avec des transitions de 150 à 300 millisecondes et des courbes d'accélération douces, en respectant la préférence utilisateur pour un mouvement réduit quand elle est activée.
Questions fréquentes
-
Pourquoi spécifiquement une grille de 8 points plutôt que 4 ou 10 ?
- 8 offre un bon compromis : suffisamment de flexibilité pour varier les espacements, tout en restant facilement divisible pour des ajustements fins (demi-pas de 4), ce qui n'est pas le cas avec des bases moins pratiques mathématiquement.
-
Un design system est-il nécessaire pour un petit projet ?
- Sur un projet très restreint, un mini design system simplifié (couleurs, typographie, quelques composants) peut suffire. La version complète avec tokens documentés devient utile dès que plusieurs personnes interviennent sur le produit.
-
Comment vérifier qu'un contraste respecte le niveau AA ?
- Des outils gratuits comme le WebAIM Contrast Checker permettent de tester rapidement une combinaison de couleurs et de vérifier si elle atteint les ratios requis pour le texte normal et le texte large.