arrange

Audit spacing consistency, hierarchy, grid structure, rhythm, and density first. Then apply a consistent spacing scale, group related elements tightly with generous separation between sections, and verify with the squint test.

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.

Use space and weight alone: generous whitespace around key elements draws the eye, and tight grouping with wide separation between sections communicates structure. Add color or size contrast only when simpler means are insufficient.

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 use spacing instead of containers for grouping.

Use a defined scale such as a framework scale like Tailwind, rem-based tokens, or custom properties named semantically. Avoid arbitrary values, use gap instead of margins, and apply clamp() for fluid spacing.