arrange

Audit spacing consistency, hierarchy, grid structure, rhythm, and density first. Then apply a consistent spacing scale, group related elements tightly, separate sections generously, and verify with the squint test to confirm clear hierarchy.

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. Prefer the simplest tool for the job.

Use space and weight alone: generous whitespace around key elements draws the eye, and tight grouping with wide section separation creates clear 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 and dividers instead of nesting cards inside cards.

Any defined scale works: a framework scale like Tailwind, rem-based tokens, or custom properties named semantically such as --space-xs through --space-xl. What matters is that all values come from the scale, never arbitrary numbers.