Espacements
Échelle d’espacements en rem utilisée pour les paddings, marges et gaps.
La progression suit le système Tailwind (multiples de 4px), familier de
la plupart des développeurs front.
Préférer les tokens à des valeurs en pixels en dur. Ils garantissent une cohérence transversale et une bascule plus simple si la base typographique change.
| Token | rem | px | Représentation | Usage |
|---|---|---|---|---|
1 | 0.25rem | 4px | Gap minimal entre icône et texte | |
2 | 0.5rem | 8px | Padding compact, gap intra-composant | |
3 | 0.75rem | 12px | ||
4 | 1rem | 16px | Padding standard de carte | |
5 | 1.25rem | 20px | ||
6 | 1.5rem | 24px | Padding ample, gap entre cartes | |
8 | 2rem | 32px | ||
10 | 2.5rem | 40px | ||
12 | 3rem | 48px | ||
16 | 4rem | 64px | Section de page | |
20 | 5rem | 80px | ||
24 | 6rem | 96px |
Bonnes pratiques
spacing-2àspacing-4pour l’espacement intra-composant (gap entre une icône et un libellé, padding d’un input).spacing-4àspacing-6pour le padding standard d’une carte ou d’un dialog.spacing-8et plus pour la séparation entre blocs ou sections d’une page.