arrange

Adopt a defined spacing scale such as a Tailwind scale, rem-based tokens, or custom properties, and stop using arbitrary values. Use gap for sibling spacing instead of margins, and apply clamp() for fluid spacing on larger screens.

Use Flexbox for one-dimensional layouts like nav bars, button groups, and card internals. Use Grid for two-dimensional page structures and dashboards where rows and columns need coordinated control, and prefer the simpler tool when both work.

Use space and weight first: generous whitespace around an element draws the eye, and tight grouping with generous section separation creates clear groupings. Add color or size contrast only when simpler means are insufficient.

Layout problems are often the root cause: arbitrary spacing values, equal padding everywhere, identical repeated card grids, and everything centered. Fixing rhythm, hierarchy, and structure usually resolves the issue.

The squint test means blurring your view of the page and checking whether you can still identify the most important element, the second most important, and clear groupings. If hierarchy disappears when blurred, the layout needs stronger spatial separation or weight contrast.