Menu

Individual skill

alignment

Use this skill whenever the design has more than one element on the page — every layout, every form, every table, every page header, every card. Trigger when designing a layout, picking a grid, fixing a UI that "looks off," debating left vs. center alignment for body text, or auditing why a design feels disorderly. Alignment is one of the most foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) — every visible element's edge or center should fall on a shared axis with at least one other element. Misalignment by even a few pixels reads as disorder.

plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/alignment/SKILL.md

Read pinned source

Source commit d780783eba4ecc7c8b9429f95c9362df95f07c61

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
No
Observed behavior
Network or broad shell
Last checked
Nov 4, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
1,537
Repository last updated
Nov 7, 2026
License
Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# Alignment

Alignment is the placement of elements so that their edges or centers fall on shared axes — invisible vertical or horizontal lines that thread through the composition. Aligned elements feel ordered, professional, and easy to scan. Misaligned elements — even when the misalignment is small — read as accidental, sloppy, or unfinished. Of all the visual variables a designer manages, alignment is the cheapest to get right and the most expensive to get wrong.

## Definition (in our own words)

When elements share an alignment axis, the eye can connect them as part of a system. A row of fields all sharing a left edge reads as a coherent column. A set of buttons all sharing a baseline reads as a related group. A hero headline sharing the page's center axis reads as a deliberate focal moment. When this discipline lapses — when a button is 4px off from its neighbors, when a label hangs out from the rest of the form — the eye registers the discrepancy preattentively. The user may not articulate it, but they sense the design is "off."

## Origins and research lineage

- **Gutenberg's printing press** (1450s) standardized typesetting, which is fundamentally about strict alignment. Lines of type aligned to baselines; columns aligned to gutters. The discipline predates digital design by centuries.
- **Tschichold and the New Typography** (1920s–30s). Jan Tschichold's *Die neue Typographie* argued for asymmetric, strictly-aligned compositions over the ornamented symmetric layouts of the 19th century. Influential across modernist graphic design.
- **The Swiss style / International Typographic Style** (1950s onward). Müller-Brockmann, Hofmann, Gerstner — the canonical formalization of grid-based design. Modernist corporate identity, much of which still defines visual standards, descends from this tradition.
- **Lidwell, Holden & Butler** (2003) compactly stated: every element should be aligned with at least one other element. The book's iconic example is the Palm Beach County "butterfly ballot" of the 2000 US presidential election — alignment failures that may have decided the result.