Corners do more brand work here than the violet does. A 24px card is the default, not a soft option; section panels reach 120px. Nothing in this system has a small corner, and that single constraint is the fastest way to tell an on-brand surface from a generic one.
Every step is named for what it wraps, and that is not stylistic.
The first two were --radius-sm and --radius-md until 2026-08-20 —
which are also Tailwind default theme names, at different values: 0.25rem and
0.375rem against this system's 0.5rem and 0.75rem. The site emits Tailwind's defaults (its
@theme declares one radius, --radius-custom), so the same markup
rendered here and rendered there took two different shapes, with no error and nothing in the
console to notice. Six of the eight then-existing steps were already semantic; the two t-shirt sizes were
precisely the two that could collide. See
the checkbox for the case that made it visible — since
resolved on the site's side too, which now declares --radius-control: 0.5rem
itself instead of inheriting a name it never defined.
Counted on the rendered production homepage. 24px dominates by a wide margin; that is what makes it the default rather than one option among several.
24px12px44px8px120px2–4pxdoes not occurSame fill, same border, same padding. Only the corner changed. This is how much of the brand lives in the radius alone.
64px below 768px, 120px at and above it. Resize this window across the
breakpoint and watch the corner change — the panel below is the real
.section-container class, glow included.