Spacing and layout
Build consistent layouts with spacing, breakpoint, hit-target, opacity, and z-index tokens.
The spacing scale is shared by component geometry and application layout. Use it for gaps, padding, and offsets so custom surfaces align with Liquidify controls.
.preferences {
display: grid;
gap: var(--lq-space-16);
padding: var(--lq-space-24);
}
.preferences__actions {
display: flex;
gap: var(--lq-space-8);
}Available spacing steps include 1, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, and 56.
Related layout families
bp-*provides the shared breakpoint scale.hit-target-*provides minimum interactive target dimensions.opacity-*provides disabled, muted, faint, and dim emphasis.z-*provides content, sticky, overlay, modal, and toast layers.
Use z-index tokens only at real stacking boundaries. Raising an element above a modal or portal locally usually hides a containment problem rather than solving it.