layout

Start by auditing spacing consistency, hierarchy, and density. Replace arbitrary padding values with a defined spacing scale, group related elements tightly, separate sections generously, and use the squint test to confirm the most important content stands out.

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 before adding color or size contrast. Apply tight spacing (8-12px) within related groups and generous spacing (48-96px) between sections. Whitespace around an element draws the eye and signals importance.

Repeating identical icon-plus-heading-plus-text cards everywhere removes rhythm. 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.

Any consistent scale works — Tailwind's built-in scale, rem-based tokens, or custom properties like --space-xs through --space-xl. What matters is that all values come from the defined set, never arbitrary numbers, and gap is preferred over margins.