Biblioteca visual de elementos
01 Botões
Variações de ações principais, secundárias e estados.
01.1 — Botões principais
01.2 — Tamanhos
01.3 — Botão full width
02 Formulários e campos
Inputs sem risquinho esquerdo no foco, com sombra leve.
Campo padrão do sistema.
Campo validado com sucesso.
Documento inválido ou incompleto.
Switch
Checkbox
Radio
03 Cards
Cards para dashboard, resumo, módulos e conteúdos.Card simples
Modelo base para qualquer bloco interno do CRM.
Card branco
Ideal para listas, formulários e detalhes.
Card escuro
Destaque especial usando a cor principal.
Pedidos
348
Pagos
281
Pendentes
42
Cancelados
25
04 Listas
Listas no estilo do CRM, com ícone, conteúdo, meta e status.
Novo cliente cadastrado
Box Auto Center foi adicionado ao CRM.
Fatura marcada como paga
Pagamento confirmado automaticamente.
Pago
Novo ticket aberto
Cliente informou erro no formulário do site.
Aberto
Fatura atrasada
Envie uma cobrança ou lembrete por WhatsApp.
Atrasada
05 Tabelas
Tabela mais limpa e moderna, com avatar e linhas com hover.| Cliente | Categoria | Último acesso | Status | Ação |
|---|---|---|---|---|
|
B
Box Auto Center
contato@boxauto.com.br
|
Oficina | Hoje, 09:42 | Ativo | |
|
I
Instituto da Dor
contato@institutodador.com.br
|
Clínica | Ontem, 18:30 | Pendente | |
|
V
Vida Mais
contato@souvidamais.com.br
|
Benefícios | Há 3 dias | Suspenso |
06 Alertas e mensagens
Mensagens de erro, sucesso, aviso e informação.
Sucesso
Cliente cadastrado com sucesso no sistema.
Erro
Não foi possível salvar. Verifique os campos obrigatórios.
Atenção
Essa fatura está próxima do vencimento.
Informação
Você pode editar esses dados depois nas configurações.
07 Badges e chips
Status, categorias, filtros e marcadores.
07.1 — Badges
Ativo
Pendente
Atrasado
Novo
Rascunho
07.2 — Chips
WordPress
Hospedagem
Manutenção
Sistema
08 FAQ
Perguntas um abaixo do outro, separado por linha.
Clique em “Novo cliente”, preencha os dados principais, informe CPF ou CNPJ, telefone, e-mail e salve.
Acesse Faturas, clique em “Nova fatura”, escolha o cliente, defina o serviço, valor, vencimento e forma de pagamento.
Os tickets podem ser organizados por status: aberto, em andamento, aguardando cliente e resolvido.
Sim. A ideia é usar os mesmos componentes para manter padrão visual em todo o CRM.
09 Tabs
Abas para organizar conteúdo interno.
Conteúdo dos dados gerais do cliente, como nome, documento, telefone e endereço.
Conteúdo financeiro, incluindo faturas pagas, pendentes, atrasadas e histórico de cobranças.
Conteúdo de tickets, chamados abertos, conversas e solicitações técnicas.
10 Popup, modal e confirmação
Estrutura para ações importantes.11 Progresso
Barras para status, onboarding e tarefas.
Cadastro do cliente — 70%
Pagamento processado — 100%
Configuração pendente — 45%
12 Timeline
Histórico de ações e movimentações.
Cliente cadastrado
Hoje às 09:30 por Junio
Fatura criada
Hoje às 10:05 no valor de R$ 549,90
Ticket aberto
Solicitação enviada pelo cliente.
Pagamento confirmado
Baixa automática recebida pelo sistema.
13 Empty state
Quando não houver registros.
Nenhum registro encontrado
Quando houver dados disponíveis, eles aparecerão aqui.
14 Perfil de cliente
Resumo visual para página de detalhes.B
Box Auto Center
Cliente ativo desde 2026. Possui site institucional, manutenção mensal e suporte técnico.
Ativo
Oficina
WordPress
15 Card de fatura
Modelo para detalhes financeiros.
Fatura #1024
Paga
Box Auto Center • Vencimento 10/07/2026
Site institucional
Plano anual
Suporte extra
Ajustes técnicos
Total
R$ 669,90
16 Mensagens e comentários
Para tickets, histórico e conversas internas.17 Planos e preços
Cards para produtos, serviços e pacotes.
Básico
Landing Page
R$ 499
- ✓ Página única
- ✓ Formulário
- ✓ Responsivo
Mais usado
Site Completo
R$ 899
- ✓ Até 5 páginas
- ✓ SEO básico
- ✓ Integração WhatsApp
Avançado
Sistema
Sob consulta
- ✓ Área administrativa
- ✓ Banco de dados
- ✓ Recursos personalizados
18 Upload e anexos
Área para documentos, imagens e arquivos.
Arraste arquivos ou clique para enviar
PNG, JPG, PDF ou DOCX até 10 MB.
19 Paginação e breadcrumbs
Navegação entre páginas e localização dentro do sistema.
Breadcrumb
Paginação
20 Dropdown e ações rápidas
Menus de ação para tabelas e cards.21 Código / bloco técnico
Para tokens, logs, webhooks e exemplos técnicos.
POST /webhook/payment
{
"status": "paid",
"invoice_id": "1024",
"customer": "Box Auto Center"
}
{
"status": "paid",
"invoice_id": "1024",
"customer": "Box Auto Center"
}