Alinea espacios, breakpoints y capas con los componentes.
Usa la escala compartida para separaciones, padding y desplazamientos.
.preferences {
display: grid;
gap: var(--lq-space-16);
padding: var(--lq-space-24);
}
.preferences__actions {
display: flex;
gap: var(--lq-space-8);
}Los pasos incluyen 1, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48 y 56.
bp-*: breakpoints compartidos.hit-target-*: dimensiones mínimas de interacción.opacity-*: énfasis deshabilitado, atenuado o tenue.z-*: capas de contenido, elementos fijos, superposiciones, modales y notificaciones.Usa z-index en límites de apilamiento reales. Elevar un elemento por encima de un modal suele ocultar un problema de estructura.