Spacing · card 2 of 3

Radius — the loudest brand signal

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.

The eight steps, at true size

--radius-sm · 8px
inputs, small chips

--radius-md · 12px
inline chips, icon tiles

--radius-card · 24px
DEFAULT card

--radius-article · 36px
article / insight cards

--radius-custom · 44px
feature & testimonial cards

--radius-section · 64px
section panel <768px

--radius-section-md · 120px · section panel ≥768px

--radius-pill · 9999px
buttons, pills, avatars

Measured census — homepage

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.

24px42 blocks

12px9 blocks

44px8 blocks

8px7 blocks

120px2 blocks

2–4pxdoes not occur0

What off-brand looks like

Same fill, same border, same padding. Only the corner changed. This is how much of the brand lives in the radius alone.

On-brand --radius-card · 24px

Off-brand 4px — reads as generic admin UI

Off-brand 0px — never occurs in source

The section panel in place

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.

The eight steps, at true size

Measured census — homepage

What off-brand looks like

The section panel in place

Words of appreciation from the teams we build with