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.
Agent Directive
Set shared alignment lines for page, sections, and cards; right-align or tabularize numbers and align icons to text baselines.