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.
Padrões
Padrões de página
Cabeçalho, cards de seção, barra de ação, tabelas e estados de dados.
Card de seção
Bloco padrão de conteúdo: título, descrição e ações à direita.
Arquivos do contrato
Arquivos enviados para a operadora selecionada.
Conteúdo da seção.
Barra de ação
Pills de status do preenchimento seguidos da ação principal.
OperadoraArquivo
Estados de dados
Toda lista ou tabela cobre carregando, vazio e erro — nunca tela em branco.
Carregando
Nenhuma versão cadastrada
Envie um arquivo para começar.
Erro ao carregar
Tabela
Cabeçalho em maiúsculas discretas, status com o mesmo selo de Status da extração de Contratos.
| Prestador | Status da extração |
|---|---|
| Amil | Concluída |
| Unimed | Não extraída |
Faça
- • Usar tokens semânticos (bg-primary, text-muted-foreground)
- • Um card por assunto, com título e descrição curtos
- • Textos de interface em PT-BR, no infinitivo para ações
- • Ícones lucide-react com tamanho 16px em botões
Evite
- • Cores fixas como text-white, bg-black ou hexadecimais
- • Mais de uma ação primária na mesma tela
- • Tabela ou lista sem estado de carregando/vazio/erro
- • Criar variações de card ou botão fora deste guia