Design System
Fundamentos visuais, componentes e padrões de interface usados em todas as telas do HaisFaturamento. Use esta referência antes de criar qualquer tela nova.
Fundamentos
Raio e espaçamento
Geometria consistente entre cards, campos e sobreposições.
Raio de borda
Quanto maior o bloco, maior o raio.
rounded-sm
6px
Chips pequenos
rounded-md
8px
Botões, inputs, itens de menu
rounded-lg
10px (--radius)
Ícones, chips
rounded-xl
14px
Blocos internos
rounded-2xl
16px
Cards e seções (SurfaceCard)
rounded-full
9999px
Badges e pills
Elevação
Sombra indica camada, nunca hierarquia de conteúdo.
shadow-xs
Cards e seções (padrão)
shadow-sm
Hover de cards, botões secundários
shadow-md
Dropdowns e popovers
shadow-lg
Modais
Espaçamento
Múltiplos de 4px. Seções sempre com 24px entre si.
gap-1
Ícone + texto em badges, listas compactas
gap-2
Ícone + texto, grupos de botões
gap-3
Campos relacionados, cabeçalho de card
gap-4
Grid de formulário e de cards
space-y-2
Rótulo + campo + mensagem
space-y-4
Entre campos de um formulário
space-y-6
Entre seções de uma página
p-4 / p-5 / p-6
Padding do SurfaceCard (sm / md / lg — padrão lg)
px-4 py-2
Células e linhas de tabela
p-6 pb-16
Área principal da página (main)
w-72 / w-16
Sidebar expandido / recolhido
h-14
Barra superior no mobile