Design Principle
Small alignment errors quickly make an interface feel unprofessional even when typography and color are correct.
Principle
Small alignment errors quickly make an interface feel unprofessional even when typography and color are correct.
Design action
Set shared alignment lines for page, sections, and cards; right-align or tabularize numbers and align icons to text baselines.
Examples
Positive example: Lists, tables, card grids, and form rows. Counterexample: Titles, body, and buttons use different left edges.
Apply when
Lists, tables, card grids, and form rows. Metrics or actions need comparison.
Source notes
Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems. Apple HIG Layout: https://developer.apple.com/design/human-interface-guidelines/layout Material Design Layout: https://m3.material.io/foundations/layout/applying-layout NN/g Visual Design Principles: https://www.nngroup.com/articles/principles-visual-design/
Agent Directive
Set shared alignment lines for page, sections, and cards; right-align or tabularize numbers and align icons to text baselines.