Foundations

Radius .

Seis passos de curvatura — do arredondamento contido dos botões à pílula perfeita dos avatares. Cada elemento tem o seu passo correto; misturar valores fora da escala cria inconsistência visual.

Escala

--radius-sm 10px

Botões, chips, ícone-chip quadrado

--radius-md 16px

Inputs, tooltips, badges

--radius-box 20px

Cards e CTA band — o passo adicionado

--radius-lg 24px

Modais, painéis largos

--radius-xl 32px

Banners, blocos hero com borda visível

--radius-full 999px

Avatares, ícone-chip circular — NUNCA botões

Regras de uso

Botões usam sm (10 px) — sempre: Pílulas (--radius-full) são proibidas para botões de ação. O arredondamento 10 px comunica "elemento interativo" sem parecer brinquedo. O pill em botão sinaliza "tag" ou "badge", não "clique aqui".
Cards usam box (20 px): O --radius-box é o passo adicionado no v2 especificamente para caixas grandes — o gap perfeito entre o md (16 px) e o lg (24 px). O componente Card já o aplica; não sobrescreva.
Pílulas são para formas, não funções: Use --radius-full somente em chips informativos, avatares e ícone-chips circulares. Nunca em botões de chamada para ação — o shape entra em conflito com a gramática de interação.
Consistência interna por componente: Um componente usa um único passo de radius. Misturar, por exemplo, --radius-sm no container e --radius-md no badge interno é permitido somente quando o badge é semanticamente distinto do container.