layout

Replace arbitrary padding and margin values with a consistent 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 CSS Grid for two-dimensional 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 structure. Add color or size contrast only when spacing and typography alone are insufficient.

Monotony usually comes from repeated identical card grids, equal spacing everywhere, and centering all content. Vary card sizes, alternate tight and generous spacing, and use asymmetric left-aligned compositions to create rhythm.

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, the layout relies on details rather than structure.