layout

Start by assessing spacing consistency, visual hierarchy with a squint test, grid structure, rhythm, and density. Then establish a consistent spacing scale, group related elements tightly, separate sections generously, and verify the most important content is obvious within two seconds.

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. Don't default to Grid when Flexbox with flex-wrap is simpler.

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 not sufficient.

Repeating identical icon-plus-heading-plus-text cards everywhere removes rhythm and hierarchy. Break monotony by varying card sizes, spanning columns, mixing cards with non-card content, and using spacing and dividers instead of nesting cards inside cards.

Use a defined scale such as a framework's built-in scale, rem-based tokens, or custom properties named semantically like --space-xs through --space-xl. Avoid arbitrary values, prefer gap over margins for siblings, and use clamp() for fluid spacing on larger screens.