# Deliberate Alignment

**MUST** · **ID:** `layout-deliberate-alignment` · **Category:** layout
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/layout-deliberate-alignment

> MUST: Deliberate alignment to grid/baseline/edges/optical centers—no accidental placement

Every element aligns with something intentionally

Nothing should be randomly placed. Every element should visibly align with another element, a grid line, or have a clear relationship to its neighbors. This creates visual harmony and helps users scan content efficiently.

## Bad — do not do this

`layout-deliberate-alignment-bad`

```tsx
export function DeliberateAlignmentBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="text-lg font-semibold mb-2" style={{ marginLeft: '3px' }}>
          Card Title
        </h3>
        <p className="text-sm text-muted-foreground mb-3">
          This is some content text that appears in the card.
        </p>
        <div className="flex gap-2" style={{ marginLeft: '5px' }}>
          <button className="px-3 py-1.5 bg-primary text-primary-foreground text-sm rounded">
            Action
          </button>
          <button className="px-3 py-1.5 bg-muted text-foreground text-sm rounded">
            Cancel
          </button>
        </div>
      </div>
      <p className="text-xs text-error mt-4">
        Random offsets create visual chaos
      </p>
    </div>
  );
}
```

## Good — do this

`layout-deliberate-alignment-good`

```tsx
export function DeliberateAlignmentGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="text-lg font-semibold mb-2">
          Card Title
        </h3>
        <p className="text-sm text-muted-foreground mb-3">
          This is some content text that appears in the card.
        </p>
        <div className="flex gap-2">
          <button className="px-3 py-1.5 bg-primary text-primary-foreground text-sm rounded focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">
            Action
          </button>
          <button className="px-3 py-1.5 bg-muted text-foreground text-sm rounded focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">
            Cancel
          </button>
        </div>
      </div>
      <p className="text-xs text-success mt-4">
        All elements align to a consistent grid
      </p>
    </div>
  );
}
```

## References

- [Visual Alignment](https://www.nngroup.com/articles/gestalt-proximity/)