Misaligned Elements
SHOULD: Align related elements consistently using a grid system. Left-align text content for readability. Center buttons only when intentionally creating a focal point.
Elements should align to a consistent grid or baseline
Bad
Good
Why it matters
The upstream rule is that four-word bullet under "Layout & Spacing"; the explanation is ours. Alignment is the cheapest structure you get for free: shared edges create implicit lines, and the eye uses those lines to decide what belongs together, so a control that sits 3px off the column reads as an error long before anyone can name why. Establish the edges once — a grid, or a flex container with a single alignment rule — and let every child inherit them, instead of nudging individual elements into place with margins.
Watch the two places it usually breaks: text and icon on a shared baseline inside a button, and numbers in a table, which should be right-aligned and tabular so the digits line up by place value.
References