You've centered the play icon inside a circle button. CSS confirms it: display: flex; align-items: center; justify-content: center. The bounding box is dead center. Ship it.
Except it looks wrong. The triangle appears to lean slightly left. The visual weight feels heavier on one side. Your designer files a bug. You open DevTools, inspect, everything checks out. The math is correct.
The math is correct, but your eyes aren't using math. They're using thousands of years of evolved pattern recognition, and that system doesn't care about your bounding box.
This is the optical alignment problem. One of the most quietly important concepts in design engineering that almost no one talks about explicitly. It's the gap between geometric truth and perceptual truth.
The core principle: Human vision processes shape, weight, density, and negative space. What is mathematically centered is often perceptually off-center.
Case 1: The play button problem
This is the most classic optical alignment issue. A triangle inside a circle, mathematically centered by its bounding box, will always appear shifted to the left. The triangle's visual mass is concentrated on its left edge, creating a perceived imbalance.
Play button alignment
translate(0, 0) — geometrically correct, visually off
The correction is usually a translateX(2px) or about 8% of the icon's width pushed towards the point of the triangle. It depends on the triangle's proportions and the container size, so you need to eyeball it. This is exactly the point.
/* The optical correction, not a magic number,
it's a perceptual truth */
const PlayButton = () => (
<button className="play-btn">
<TriangleIcon
style={{
transform: `translateX(8%)`,
// Shifts toward the apex
// to balance visual weight
}}
/>
</button>
)
Case 2: Icons next to text are never vertically centered
Flexbox align-items: center aligns bounding boxes. But icons with varying visual density (a filled circle vs a thin outline) sit at different optical centers. A checkmark icon's visual weight is lower than its bounding box center. A filled square's is higher.
Toggle between the modes to see the 1-2px vertical correction that makes these rows feel right:
Icon-text vertical alignment
align-items: center — icons sit at bounding-box midpoint
The rule of thumb: Triangular/pointed icons need to shift ~1px up. Heavy/filled icons need ~1px down. Circular icons are usually fine. Always verify at your target size.
Case 3: Equal border-radius doesn't mean equal roundness
A nested element with the same border-radius as its parent looks subtly wrong. The inner corners appear sharper than the outer ones because the radius doesn't account for the gap (padding) between them. The fix is surprisingly simple arithmetic.
Nested border-radius
inner: 24px
gap: 12px
Inner corners appear sharper than outer
/* The formula:
inner-radius = outer-radius - gap (padding)
If result < 0, use 0 */
.card {
border-radius: 24px;
padding: 12px;
}
.card-inner {
/* ✗ border-radius: 24px - looks wrong */
border-radius: 12px; /* ✓ 24 - 12 = 12 */
}
Case 4: Buttons with icons need asymmetric padding
When a button contains an icon and text, equal left/right padding makes the icon side look like it has more space. The icon is typically less visually dense than text, so the eye reads more negative space around it. Use this interactive demo to find the right padding offset:
Button padding balance
Drag sliders — try left: 16px, right: 24px for optical balance
Building optical awareness into your workflow
These corrections aren't hacks or magic numbers. They're a systematic recognition that rendering engines optimize for geometry while human perception optimizes for visual weight. Here's how to work with that:
1. Squint test
Literally squint at your UI. Blur removes detail and reveals weight distribution. If something "jumps" or feels unbalanced when blurred, it needs optical correction regardless of what your inspector says.
2. Build correction tokens
Add optical correction values to your design tokens. A --optical-nudge-sm: 1px and --optical-nudge-md: 2px in your CSS custom properties legitimizes these corrections and makes them systematic rather than ad-hoc.
3. Test at every density
Optical corrections that work at 1x density may overcorrect at 2x or 3x. Always verify on real devices. A 1px shift at 1x is a 2px shift at 2x, that might be too much.
The amateur approach
Trust the CSS inspector. If the numbers say center, it's centered. Ship fast, fix later (you won't).
The craft approach
Trust your eyes over your tools. Build optical corrections into your system. Document the why, not just the what.
The uncomfortable truth
No design tool or linter will catch these issues. Figma won't flag a geometrically-centered play icon. ESLint doesn't have an optical alignment rule. This is craft. The kind of knowledge that lives in your eyes, not your editor.
And it's what separates interfaces that feel right from interfaces that just pass QA. The user never notices when optical alignment is correct, they only notice when it's wrong. That's the highest compliment in our field: invisible precision.
The next time you center something and it looks "close enough," remember: your eyes evolved to spot a predator hiding in tall grass. They can definitely tell that your play button is 2 pixels off.