La grille 8pt n’est pas une convention arbitraire. Elle repose sur une observation pratique : les écrans les plus courants (iPhone, Android, MacBook, moniteurs standard) ont des résolutions qui sont des multiples de 8. Travailler en multiples de 8 garantit que les espacements s’alignent pixel-perfect quelle que soit la densité de l’écran (1x, 2x, 3x).
Google Material Design utilise une grille de base 8dp. Apple HIG utilise 8pt comme unité de base. Linear, Stripe, Airbnb, Figma : les design systems des références de l’industrie sont tous construits sur des multiples de 8. Ce n’est pas une coïncidence.
Le principe de la grille 8pt
L’échelle d’espacement standard avec une grille 8pt :
- 4px : espacement minimal entre des éléments très proches (icône et libellé, badge et valeur). Aussi 4pt pour les situations où 8pt serait trop grand.
- 8px : espacement de base pour les espacements internes fins (padding compact des boutons, espacement entre items de liste).
- 16px : espacement standard, le plus utilisé. Padding des composants, espacement entre éléments de même niveau.
- 24px : espacement moyen, pour les groupes d’éléments et les sections modérément séparées.
- 32px : espacement large, pour séparer des sections distinctes à l’intérieur d’un composant.
- 48px : espacement très large, pour les séparations entre sections de page.
- 64px, 80px, 96px : pour les espacements de mise en page sur les pages entières.
Avant la grille 8pt, un designer pouvait mettre 13px ici, 17px la, 22px ailleurs. Chaque décision était une micro-décision subjective. Avec la grille 8pt, ces décisions n’existent plus. On choisit entre 16 et 24. C’est plus rapide et le résultat est toujours cohérent.
Appliquer la grille 8pt aux composants
Exemples concrets d’application pour les composants courants :
- Bouton standard : padding horizontal 16px (ou 24px pour les boutons larges), padding vertical 8px (hauteur totale avec texte 16px = 32px) ou 12px (hauteur = 40px).
- Champ de saisie : padding interne 12px ou 16px. Hauteur standardisée à 40px ou 48px selon la densité d’interface.
- Card : padding interne 16px ou 24px, border-radius 8px ou 16px, espacement entre les cards dans une grille 16px ou 24px.
- Navigation : hauteur de la barre de navigation 48px ou 56px (multiples de 8), icônes 24px, padding latéral 16px.
La grille 8pt dans un design system
Dans un design system, la grille 8pt se traduit en design tokens d’espacement. La convention de nommage la plus courante :
space-1: 4pxspace-2: 8pxspace-3: 12pxspace-4: 16pxspace-5: 20pxspace-6: 24pxspace-8: 32pxspace-10: 40pxspace-12: 48px
Les équipes qui travaillent en Tailwind CSS ont une bonne nouvelle : l’échelle de spacing Tailwind est construite sur des multiples de 4px (4, 8, 12, 16, 20, 24, 32…). Utiliser uniquement les valeurs paires de cette échelle revient à appliquer la grille 8pt.
Gestion des exceptions
La grille 8pt n’interdit pas les exceptions, elle les rend conscientes. Quand un espacement de 12px est nécessaire (typiquement dans une interface très dense comme un tableau de données ou un dashboard compact), l’utiliser délibérément et le documenter comme exception dans le design system.
La règle pratique : avant d’utiliser une valeur non multiple de 8, se demander si 8 ou 16 pourrait fonctionner. Dans 80% des cas, l’une des deux valeurs standards est adaptable avec un léger ajustement du composant. Dans les 20% restants, l’exception est justifiée.
