Forma

Raios, espaçamento e tamanhos de controle. Tudo deriva de uma base e acompanha a densidade.

Raio

rounded-2xs2px

Setas de tooltip e marcadores de gráfico — fixo, não acompanha a base

rounded-xscalc(var(--radius) * 0.3)

~4px — checkbox, chips minúsculos

rounded-smcalc(var(--radius) * 0.6)

~8px

rounded-mdcalc(var(--radius) * 0.8)

~11px

rounded-lgvar(--radius)

14px — botões, inputs, cards pequenos (mais usado)

rounded-xlcalc(var(--radius) * 1.4)

~20px — cards

rounded-2xlcalc(var(--radius) * 1.8)

~25px — painéis, modais

rounded-3xlcalc(var(--radius) * 2.2)

rounded-4xlcalc(var(--radius) * 2.6)

rounded-glass20px

Vidro do coisas.space (container)

rounded-glass-input24px

Campo dentro do vidro

Espaçamento

Uma base (--spacing) multiplicada: p-4 = 4 × base. Na densidade compacta a base encolhe e tudo acompanha.

base0.25rem

steps-14px

steps-28px

gap padrão (mais usado)

steps-312px

steps-416px

padding de card / px de botão grande

steps-520px

steps-624px

steps-832px

steps-1040px

steps-1248px

steps-1664px

steps-2080px

respiro de seção (landing)

steps-0.52px

steps-1.56px

gap entre ícone e texto

steps-2.510px

Tamanhos de controle e ícone

--size-control-xs1.5rem

24px

--size-control-sm1.75rem

28px

--size-control-md2rem

32px — padrão

--size-control-lg2.25rem

36px — também a floating bar

--size-icon-xs0.75rem

--size-icon-sm0.875rem

--size-icon-md1rem

padrão

--size-icon-lg1.25rem