Mise en page

Les mises en page doivent correspondre au rôle de la page. La documentation a besoin d’espace pour lire et naviguer, les tableaux de bord de comparaison dense et les surfaces d’accueil de signaux forts dès le premier écran.

Grille#

Utilisez les grilles pour aligner le contenu lié et rendre le balayage prévisible. Définissez explicitement le comportement des colonnes pour que les cartes, tables et navigations ne se déplacent pas de façon inattendue.

Marge#

Les marges séparent les régions. Utilisez-les pour créer un rythme entre les sections, pas pour réparer l’intérieur des composants ou compenser une taille de contenu instable.

Padding#

Le padding protège le contenu à l’intérieur d’un composant. Gardez-le stable entre les états pour que le survol, le focus, les badges et les libellés plus longs ne redimensionnent pas la mise en page.

Responsive#

Le comportement responsive doit préserver l’objectif, pas seulement rétrécir la page desktop. Gardez la navigation accessible, évitez les chevauchements de texte et utilisez des contraintes qui fonctionnent aux petites et grandes tailles.