# Optical Alignment

**SHOULD** · **ID:** `layout-optical-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-optical-alignment

> SHOULD: Optical alignment; adjust by ±1px when perception beats geometry

Adjust ±1px when perception beats geometry

Mathematical centering doesn't always look centered to the human eye. Icons with more visual weight on one side may need to be shifted slightly to appear balanced. Trust your eye over the numbers, but limit adjustments to 1-2px.

## Bad — do not do this

`layout-optical-alignment-bad`

```tsx
import { Play } from 'lucide-react';

export function OpticalAlignmentBad() {
  return (
    <div className="w-full max-w-sm">
      <button className="flex items-center justify-center gap-2 w-48 px-4 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">
        <Play className="w-5 h-5 fill-current" />
        <span className="font-medium">Play Video</span>
      </button>
      <p className="text-xs text-error mt-4">
        Play icon mathematically centered but looks off-balance
      </p>
    </div>
  );
}
```

## Good — do this

`layout-optical-alignment-good`

```tsx
import { Play } from 'lucide-react';

export function OpticalAlignmentGood() {
  return (
    <div className="w-full max-w-sm">
      <button className="flex items-center justify-center gap-2 w-48 px-4 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">
        <Play className="w-5 h-5 fill-current" style={{ marginLeft: '2px' }} />
        <span className="font-medium">Play Video</span>
      </button>
      <p className="text-xs text-success mt-4">
        Icon shifted 2px right for optical balance
      </p>
    </div>
  );
}
```

## References

- [Optical Alignment](https://marvelapp.com/blog/optical-adjustment-logic-vs-designers/)