arrange

Adopt a defined spacing scale such as Tailwind's built-in scale or rem-based tokens, and replace arbitrary padding and margin values with values from that scale. Use gap for sibling spacing instead of margins to avoid margin-collapse issues.

Use Flexbox for one-dimensional layouts like nav bars, button groups, and card internals. Use Grid for two-dimensional layouts like page structure and dashboards where rows and columns need coordinated control.

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 layout: identical card grids repeated everywhere, equal spacing with no rhythm, and everything centered. Vary spacing between tight and generous, break card-grid repetition, and use asymmetric compositions.

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