Optical Weight Balance Across Geometric Shapes

If you draw a circle, a square, and an arrow so that all three touch the exact edges of a 24px box, the square will look significantly heavier and larger than the circle or arrow.

This is because a square fills 100% of the pixel area, while a circle fills ~78% and a thin star fills ~40%.

Optical Weight Compensation (Keyline Shapes):

• Square shapes: Should be drawn slightly smaller (e.g., 18 $\times$ 18px within a 24px frame).
• Circular shapes: Draw slightly larger (e.g., 20 $\times$ 20px) to compensate for curved corners.
• Narrow / Horizontal shapes: Can stretch to 22px wide but should remain 16px high.

Designing to visual weight rather than strict geometric boundaries ensures that a heart, a settings cog, and an arrow look balanced side by side.