Spacing & layout
Spacing scale
Section titled “Spacing scale”4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 pxThe scale intentionally supports two rhythms:
- editorial spacing between major page sections
- operational spacing inside repeated rows, toolbars, tables, and forms
Layout principles
Section titled “Layout principles”Align first
Section titled “Align first”Use consistent columns and edges. A clean grid often eliminates the need for extra containers.
Separate with space before surfaces
Section titled “Separate with space before surfaces”Before wrapping a group in a card, try whitespace, a section heading, or a thin divider.
Preserve scan paths
Section titled “Preserve scan paths”Labels, values, status, and actions should align consistently across repeated rows.
Mobile may transform
Section titled “Mobile may transform”A data-heavy desktop table may become a reduced table, stacked rows, or another intentional mobile pattern. Responsive design does not mean shrinking the desktop screen until it fits.
Usage guidance
Section titled “Usage guidance”| Context | Typical rhythm |
|---|---|
| Icon and label | 8px |
| Related compact controls | 8–12px |
| Form label and input | 8px |
| Repeated form groups | 16–24px |
| Section heading and content | 16–24px |
| Major page regions | 32–64px |
These are defaults, not a license to create near-duplicate values. Choose the closest scale token unless a platform constraint requires otherwise.
Density
Section titled “Density”Density variants may reduce internal component spacing, but they must preserve legibility, focus visibility, and touch behavior. Density should be applied coherently to a region rather than component by component at random.