Documentação

Radius & Sombras

Design System v3.1: Arredondamentos generosos e camadas modernas.

Radius

Escala completa de arredondamentos baseada no padrão shadcn/ui.

8px

--radius-sm

Checkbox, badges pequenos, tooltips

10px

--radius-md

Inputs, selects, popovers, dropdowns

12px

--radius-lg

Cards, botões, sidebar (padrão geral)

16px

--radius-xl

Cards grandes

9999px

--radius-full

Pills, avatares, FAB

Escala de elevação com valores explícitos para profundidade e hierarquia.

--shadow-xs

0 0 0 1px rgba(0, 26, 51, 0.06)

Bordas decorativas, separações sutis

--shadow-sm

0 4px 12px rgba(2, 28, 54, 0.10)

Cards padrão, hover de elementos clicáveis

--shadow-md

0 6px 22px rgba(2, 28, 54, 0.20)

Botões primários elevados, popovers

--shadow-lg

0 16px 48px rgba(0, 0, 0, 0.15)

Modais, dropdowns importantes

--shadow-xl

0 -4px 30px rgba(0, 26, 51, 0.10)

Bottom sheets, FABs, elementos flutuantes

Tokens especiais para indicar foco em inputs e elementos interativos. Não são elevação — são feedback de interação.

--shadow-focus

Focus ring padrão (cor cyan da marca)

0 0 0 3px rgba(6, 206, 243, 0.14)

--shadow-focus-error

Focus ring quando o input está em estado de erro

0 0 0 3px rgba(239, 69, 101, 0.15)