A·All Concepts
02
A

Alignment

The invisible force that creates order.

1 min read·Community

Alignment is not about things being lined up — it is about creating visual relationships that communicate structure, connection, and belonging. Nothing in a well-designed composition is placed arbitrarily.

The Thought

Robin Williams identified alignment as one of the four fundamental principles of design (alongside contrast, repetition, and proximity) in "The Non-Designer's Design Book." Her point was simple and devastating: nothing should be placed on a page arbitrarily. Every element should have a visual connection to something else on the page.

There are two kinds of alignment at play in any composition: alignment to a grid or structure (the mechanical version) and optical alignment (the perceptual version). These are not the same thing. A circle centred mathematically within a square will appear to sit slightly low because of how the eye reads visual weight. Optical alignment corrects for this — it trusts the eye over the ruler.

In component-based UI design, alignment is enforced by auto-layout and spacing tokens. But mechanical alignment is only the foundation. The more nuanced work is ensuring that the semantic hierarchy is also visually aligned — that things that belong together look like they belong together, and things that are distinct are visually separated.

Key Principles
  1. 01

    Nothing should be placed arbitrarily — every element should have a visual connection.

  2. 02

    Left-alignment is the default for body text in LTR languages; deviate with intention.

  3. 03

    Optical alignment corrects what mathematical centering gets wrong.

  4. 04

    Align to meaning first, grid second.

  5. 05

    Misalignment is either an error or a deliberate act of emphasis — there is no middle ground.

Related