Concentric Radii & Inset Clearance

When cards, input fields, and tags form nested hierarchies, radii and paddings must obey strict geometric laws.

Concentric Radii Geometric Law

When inner and outer rounded containers are concentric, their corner arcs must remain parallel and equidistant: $$R_{\text{outer}} = R_{\text{inner}} + \text{Padding}$$

• The outer radius must equal the inner radius plus the gap between them.
• If the inner element hugs the outer border directly (Padding = 0), both radii must be identical.

The Visual Failure of Non-Concentric Nesting

When nested containers naively reuse the same radius (e.g. outer 12px, inner 12px, gap 8px):

• Straight edges maintain an 8px distance.
• Corner distance balloons to $(12 + 8) \times \sqrt{2} - 12 \approx 16.28\text{px}$! Doubling the distance at the corner produces an ungrounded, pinched visual defect where the inner element feels floating or squeezed.

Caret Clipping Prevention via Horizontal Inset

In rounded input controls (TxInput), the corner curve encroaches into the interior content box. If the input text or blinking cursor starts too close to the left boundary, the cursor directly slices into the corner curve.

TuffEx mandates the clearance constraint: $$Padding_{\text{horizontal}} \ge R$$ The horizontal padding must fully cover the corner radius value, placing the initial caret safely beyond the curved boundary.

0.65x Optical Vertical Padding

Because type carries font leading (internal line-height buffers), identical horizontal and vertical paddings (e.g. padding: 8px 8px) look optically bottom-heavy and unbalanced.

TuffEx applies the optical ratio: $$Padding_{\text{vertical}} \approx 0.6 \sim 0.75 \times Padding_{\text{horizontal}}$$ For instance, a 26px chip uses padding: 4px 8px, anchoring the text baseline with optical symmetry.