Pílula = ação. 20px = card. Quadrado = input.

A geometria diferencia famílias de componente. Botões e badges são pílulas. Cards são retângulos suaves de 20px. Inputs são quadrados — entrada de dado, não ação.

Escala de raio

8px

12px

16px

xl · cards

20px

2xl

28px

pill · ações

∞

input

0px

Mapa família × geometria

Pílula (∞): botões, badges, eyebrow-chips, header pill.
20px (xl): cards, demos, frames de canvas.
16px (lg): mini-cards, callouts.
12px (md): code blocks, notes, chips de info.
0 (input): inputs, textareas, selects — entrada de dado.

Snippet · pronto pra colar

CSS · mapa família × geometria

/* Mapa família × geometria */
.btn, .badge, .eyebrow-chip, .header-pill { border-radius: var(--e-r-pill); }  /* ∞ — ações */
.card, .demo-frame                        { border-radius: var(--e-r-xl); }    /* 20px — conteúdo */
.callout, .mini-card                      { border-radius: var(--e-r-lg); }    /* 16px — secundário */
.code-block, .note                        { border-radius: var(--e-r-md); }    /* 12px — info */
.input, .textarea                         { border-radius: 0; }                /*  0px — entrada */