visual-weight-tunerlisted

# Visual Weight Tuner Mathematical centering and optical centering are different things. Flexbox, `text-align`, and symmetric padding center a *bounding box*; the eye centers *visual mass*. Because letterforms sit low in their box, circles have less area than squares, and triangles have their mass on one side, geometrically perfect layouts routinely look a pixel or two wrong — and users feel that as "cheap" without being able to say why. Work the way a typographer does: lay it out mathematically first, then correct by eye. The corrections are tiny (usually 0.5–2px or 5–15%), but they're the difference between a component that reads as templated and one that reads as crafted. ## The three corrections that matter most ### 1. Icons next to text: align to cap-height, not the line box `align-items: center` centers the icon against the full line box (ascender to descender). Capitals and most lowercase mass sit above the baseline, so the icon ends up visually *low* next to uppercase labels, button titles, and nav items — it looks like it's sagging. Fix: keep flex centering as the baseline, then nudge the icon up to meet the cap-height. Prefer `position: relative; top: -1px` or `transform: translateY(-0.5px)`; the exact value depends on font and size, so check it at the rendered size rather than copying blindly. ```css .action { display: inline-flex; align-items: center; gap: 0.5rem; } .action-icon { position: relative; top: -1px; /* snaps icon mass to the ca