Spacing & alignment

The 4px grid

Tailwind already uses this. p-2 is 8px, p-4 is 16px.

Concentric border radius

Outer radius = inner radius + padding. Same radius on both makes the inner corners pinch.

Encode the rule in CSS variables:

If the math goes negative, use 0.

Optical centring

Spotify's play triangle isn't centred mathematically. It's nudged right because visual mass sits right. Same for icon-plus-text buttons:

For icon centring, adjust the SVG bounding box so visual centre matches geometric centre. For other icons: transform: translateX(2px).

Trust your eye over your grid.

Common mistakes

• Same radius inside and out. Inner corners pinch against the outer.
• Non-4px spacing values. A 14px gap next to 16px creates a rhythm break.
• Symmetric padding on icon-text buttons. The icon looks shifted.
• Centring bounding boxes, not visual mass. Triangles and chevrons need manual adjustment.
• Forgetting border-width. Subtract it from the inner radius too.