Use a shared spacing scale to express grouping, separate tasks, and preserve room for content.
Spacing explains relationships before a person reads the labels. Keep related information close together and use larger intervals between distinct tasks or sections. Choose a small set of recurring intervals so the interface has a recognizable rhythm.
Distinguish space within a group from space between groups. A label and its supporting description should read as one unit; the next setting needs enough separation to remain distinct. Container padding keeps that content away from edges and rounded corners.
Figure in preparation
Space within and between groups
Smaller internal spacing and larger group gaps explain relationships.
Use spacing before adding a separator solely to explain grouping. When a boundary is still needed, keep the spacing relationship consistent on either side. Avoid compressing all intervals to fit an extra control into a crowded row.
Liquidify exposes spacing as CSS custom properties. The table shows a useful subset of the installed web scale, not mandatory assignments for every component.
| Token | Installed value | Possible application use |
|---|---|---|
--lq-space-4 | 0.25rem | A small interval within a text group |
--lq-space-8 | 0.5rem | Separation between closely related items |
--lq-space-12 | 0.75rem | A compact group interval |
--lq-space-16 | 1rem | Content padding |
--lq-space-24 | 1.5rem | Separation between groups |
--lq-space-32 | 2rem | Separation between larger sections |
The scale also includes smaller and larger steps. Read Spacing and layout tokens for the broader vocabulary. The numeric suffix is an identifier; the CSS value uses rem and depends on the root font size. Do not interpret it as a native platform point measurement.
Use application-owned classes to define layout gaps and padding. Let components keep their supported internal geometry. Avoid reaching into a control's private children to make it match an unrelated spacing rule.
.preference-section {
display: grid;
gap: var(--lq-space-24);
padding: var(--lq-space-16);
}
.preference-copy {
display: grid;
gap: var(--lq-space-4);
}These classes belong on application containers. Load the Liquidify aggregate stylesheet so the variables are available. Use a component's documented spacing or size option when that option owns the relationship you need to change.
A gap separates controls; it does not enlarge their interactive area. Icon dimensions also do not determine a button's target. Choose supported control sizes and inspect the rendered boundaries, including focus outlines, before deciding whether the arrangement is comfortable to operate.
Keep a clear relationship between primary and secondary actions without using excessive distance that makes them appear unrelated. For longer labels or enlarged text, allow wrapping or a vertical arrangement instead of reducing the control's padding.
Use denser spacing only where the task benefits from comparison or repeated scanning. Preserve the distinctions between labels, descriptions, controls, and sections. Review the same hierarchy in both themes; a stronger surface boundary should not be needed to compensate for unclear grouping.
Check each gap inside the actual padded region at narrow widths. Layout grid explains column changes and reading order; spacing tokens alone do not implement a responsive layout.