layout

Adopt a defined spacing scale such as a framework scale (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 that adapts to screen size.

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

Start with space and weight alone: group related elements tightly, separate sections generously, and use whitespace to draw the eye to what matters. Add color or size contrast only when simpler means are insufficient, then verify with the squint test.

Repeating identical icon-plus-heading-plus-text cards everywhere removes rhythm and hierarchy. Vary card sizes, span columns, mix cards with non-card content, and reserve cards for content that is truly distinct and actionable.

Avoid arbitrary spacing values, equal spacing everywhere, nesting cards inside cards, centering everything, and arbitrary z-index values like 9999. Build semantic scales for spacing, shadows, and stacking instead.