Manual de marca

Componentes

Botões

Todos os botões são pílulas (rounded-full), com ícone e texto separados por 8px. Área de toque mínima de 44 × 44px no celular.

Emitir cobrançaImportar inquilinosCancelarFantasmaExcluirDesabilitado

Variação	Uso	Classes principais
Primário (CTA)	A ação principal da tela — uma por tela	bg-coral-500 hover:bg-coral-400 active:bg-coral-600 text-gray-900 font-semibold shadow-sm
Secundário	Ações de apoio	bg-white border border-brand-600 text-brand-600 hover:bg-brand-50
Neutro	Baixa ênfase (Cancelar, Voltar, Exportar)	bg-white border border-gray-200 text-gray-700 hover:bg-gray-50
Fantasma	Ações discretas	text-gray-600 hover:text-gray-900 hover:bg-gray-100
Perigo	Ações destrutivas	bg-atrasado-bg border border-atrasado/30 text-atrasado-text
Ícone	Botão só com ícone (sempre com aria-label)	círculo w-9 h-9 rounded-full

Tamanho	Padding	Fonte	Uso
sm	py-1.5 px-4	12px	Ações em cards e tabelas
md (padrão)	py-2.5 px-5	14px	Ações gerais
lg	py-3 px-6	14px	CTAs de destaque
full	w-full py-3	14px	Envio de formulários de login e cadastro

Estados: hover do primário em coral-400, do secundário em brand-50, do neutro em gray-50 · foco com anel brand-600 e offset · pressionado do primário em coral-600 · carregando com ícone Loader2 girando e texto no gerúndio ("Salvando…") · desabilitado opacity-50.

Migração

Muitas telas ainda usam bg-brand-600 text-white como botão primário (10,7:1, aceitável). Ao tocar numa tela, troque o CTA principal para o Amarelo Chave e as demais ações para secundário ou neutro.

Campos de formulário

Inputs usam cantos de 12px (rounded-xl) — pílula só para busca.

Nome *Imobiliária HorizonteTexto de ajuda em gray-500.

E-mailcontato@exemplo.comEm foco: borda e anel Verde Lar.

CPF *123.456Informe um CPF válido.

BuscaBuscar inquilino ou imóvel

Estado	Classes
Padrão	bg-white border-gray-300 text-gray-900
Foco	focus:border-brand-600 focus:ring-2 focus:ring-brand-600/25
Erro	border-atrasado focus:ring-atrasado/20 focus:border-atrasado
Sucesso	border-pago focus:ring-pago/20
Desabilitado	opacity-50 cursor-not-allowed bg-gray-50
Somente leitura	bg-gray-50 border-gray-200 text-gray-500 select-none

• Label em 14px peso 500; obrigatório com * em text-atrasado-text.
• Erro em 12px text-atrasado-text só depois que o campo foi tocado.
• Placeholder com exemplo real ("ex.: Rua das Acácias, 42"), nunca repetindo o label.
• Valores monetários e datas podem usar font-mono.
• Checkbox e rádio em text-brand-600; switch com trilho gray-200 → brand-600.

Cards

O card é o bloco fundamental: branco, cantos de 20px (rounded-2xl), borda sutil, sobre o fundo Gelo.

Contratos ativos

128

+6 este mês

Recebido no mês

R$ 83 mil

42 cobranças pagas

Aluguéis em atraso

R$ 13 mil

4 cobranças atrasadas

• Padrão: bg-white border border-gray-200 rounded-2xl p-5 shadow-sm.
• Interativo: acrescente hover:border-brand-300 hover:bg-brand-50 e anel de foco.
• Item interno: bg-gray-50 rounded-xl p-3.5.
• Cabeçalho de card: ícone em círculo Menta (bg-brand-100 text-brand-600), título em Bricolage e descrição curta.
• Card de marca (Verde Lar): um por tela, para o número mais importante ou um CTA. Texto branco, rótulo em brand-200, ícone amarelo sobre Verde Noite e telhado em chevron decorativo cortado na borda.
• KPI: ícone em quadrado, rótulo curto, um valor grande em Bricolage 800 e contexto opcional com status.

Badges e tags

PagoPendenteAtrasadoAdminDestaque8Residencial

Pílulas pequenas com fundo suave, ponto de marcação e texto escuro, sempre com texto. O contador usa Amarelo Chave com texto Tinta. Tags de categoria usam contorno gray-200. Em listas densas, use a variante compacta: só o ponto + texto -text, sem fundo.

Alertas

✓ Cobrança emitida.

⚠ A cobrança vence amanhã.

✕ Não foi possível salvar. Tente de novo.

ℹ Informativo em brand-50 com texto brand-900.

Navegação

PainelImóveisContratosFinanceiro

Itens de menu são pílulas (.nav-item); o ativo (.nav-item-active) é Verde Lar com texto branco. O logo horizontal positivo fica no topo da sidebar, com 36px de altura.

Outros padrões

Componente	Regra
Modal	Fundo gray-950/40 com desfoque; caixa branca rounded-3xl; ações [Cancelar (neutro)] [Confirmar (primário) ou Excluir (perigo)].
Toast	Card branco rounded-2xl com shadow-lg shadow-gray-900/10; ícone text-pago, text-atrasado, text-pendente-text ou text-brand-600.
Tabela	Cabeçalho em rótulo mono caixa-alta gray-500; valores e datas em mono; status com cor e texto; hover brand-50.
Abas	Sublinhado Verde Lar na aba ativa; alternativa segmentada em pílula bg-gray-100.
Vazio	Ícone em bg-brand-100 text-brand-600 rounded-2xl, título, descrição dizendo o que fazer e botão.
Carregando	Esqueleto bg-gray-100 rounded-xl animate-pulse ou ícone Loader2 girando em brand-600.
Paginação	Botões circulares w-8 h-8; página ativa bg-brand-600 text-white.
Avatar	Círculo 32/40/48px; sem foto: bg-coral-100 text-coral-700 com iniciais.