layout

Replace arbitrary padding and margin values with a defined spacing scale, such as a framework scale like Tailwind or rem-based tokens. Use gap for sibling spacing instead of margins, and apply clamp() for fluid spacing that adapts to screen size.

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. 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 spacing alone is insufficient.

Monotony usually comes from repeating identical card grids, equal spacing everywhere, and centering all content. Vary spacing rhythm between sections, break card-grid patterns, and use asymmetric left-aligned compositions.

The squint test means blurring your view of the page to check whether the primary element, secondary elements, and content groupings are still identifiable. If hierarchy disappears when blurred, spacing and weight are not communicating importance.