layout

Adopt a consistent spacing scale such as a framework scale like Tailwind, rem-based tokens, or a custom system, 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 1D layouts like nav bars, button groups, and card internals, and Grid for 2D layouts like page structure and dashboards where rows and columns need coordinated control. Flexbox with flex-wrap is often simpler than Grid.

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.

Monotony usually comes from identical card grids repeated everywhere, equal spacing with no rhythm, and everything centered. Vary card sizes, alternate tight and generous spacing, and use asymmetric left-aligned compositions.

The squint test means blurring your view of the page to check whether the most important element, secondary elements, and content groupings are still identifiable. If hierarchy disappears when blurred, spacing and weight need adjustment.