layout

Replace arbitrary padding and margin values with a defined spacing scale, such as a framework scale 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 alone: group related elements tightly, separate distinct sections generously, and give important elements more surrounding whitespace. Verify with the squint test to confirm primary and secondary elements remain identifiable.

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 rely on spacing and alignment for grouping instead of wrapping everything in containers.

Optical nudges should only be applied when an element genuinely looks off-center despite being geometrically centered. Speculative adjustments without visual confirmation can introduce inconsistency rather than fix it.