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.
Componentes
Cards
SurfaceCard, SummaryCard e EmptyStateCard usados nas páginas.
SurfaceCard
Card padrão: título, descrição, ícone opcional e ações à direita. Tons default, muted e dashed.
Arquivos
Contrato e aditivos enviados.
Tom muted
Áreas de apoio e demonstração.
Tom dashed
Espaços reservados e áreas vazias.
SummaryCard
Resumo das páginas de detalhe (operadora em Contratos, versão da Base de precificação): rótulo acima, valor abaixo.
- Operadora
- Amil
- Validade do contrato
- 31/12/2026
- Aditivos
- 2
- Regras identificadas
- 14
EmptyStateCard
Listagem sem nenhum registro ou sem resultados para os filtros.
Nenhuma tabela encontrada
Ajuste os filtros para ver outros resultados.
- Quando usar
- • SurfaceCard para cada bloco de assunto da página
- • SummaryCard para dados-chave de um registro
- • EmptyStateCard no lugar da tabela quando não há itens
- Comportamento
- • Raio rounded-2xl e sombra shadow-xs em todos os cards
- • Valores numéricos e datas em fonte mono; ausência de valor como "—"
- • Durante o carregamento, valores do resumo usam Skeleton, nunca "—"
- Acessibilidade
- • Título do card é um <h2>; resumo usa lista de definição (dl/dt/dd)
- • Estado vazio anunciado com role="status"