Alignez espaces, breakpoints et couches avec les composants.
Utilisez l’échelle partagée pour les espacements, le padding et les décalages.
.preferences {
display: grid;
gap: var(--lq-space-16);
padding: var(--lq-space-24);
}
.preferences__actions {
display: flex;
gap: var(--lq-space-8);
}Les pas comprennent 1, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48 et 56.
bp-* : breakpoints partagés.hit-target-* : dimensions minimales d’interaction.opacity-* : accentuation désactivée, atténuée ou discrète.z-* : couches de contenu, éléments fixes, superpositions, modales et notifications.Utilisez z-index aux véritables limites d’empilement. Élever un élément au-dessus d’une modale masque souvent un problème de structure.