Surfaces

Border radius, optical alignment, shadows vs. elevation, image outlines, and hit areas — on both web (React + Tailwind/CSS) and mobile (React Native). The math and the intent are shared; the APIs differ, and shadows in particular behave very differently across platforms.

Concentric Border Radius — Both platforms

When nesting rounded elements, the outer radius must equal the inner radius plus the padding between them:

outerRadius = innerRadius + padding

Most useful when nested surfaces are close together. If padding is larger than ~24px, treat the layers as separate surfaces and choose each radius independently instead of forcing the math. Mismatched radii on nested elements is one of the most common things that makes interfaces feel off — always calculate concentrically.

Web (CSS / Tailwind)