Manual de marca

Fazer e não fazer

✅ Fazer

• Fundo Gelo (gray-50), cards brancos rounded-2xl, bordas sutis.
• Amarelo Chave + Tinta no CTA principal; Verde Lar em navegação, links, foco e card de marca.
• Abrir páginas com eyebrow mono + título Bricolage.
• Números de destaque em Bricolage 800; valores e datas em IBM Plex Mono.
• Status com cor e texto, usando os tokens pago, pendente e atrasado.
• Logo sempre do arquivo oficial, com área de proteção.
• Conferir o contraste ao combinar cores.

❌ Não fazer

• Amarelo como texto em fundo claro, ou texto branco sobre amarelo.
• Recriar o logo com fonte, mudar cores, aplicar sombra ou efeitos.
• Gradientes entre cores da marca, em qualquer lugar.
• Mais de um CTA amarelo por tela.
• Vermelho de status em peças de marketing.
• Caixa-alta fora da fonte mono; "URGENTE"; frases inteiras em maiúsculas.
• Telas do sistema geradas por IA em materiais.
• Sombras pretas puras, shadow-2xl em cards comuns, mais de duas sombras empilhadas.
• Fonte menor que 12px, remover o anel de foco, !important.
• Cores fora desta paleta (exceto o verde do WhatsApp no site).

Logo

✅ Arquivo oficial

❌ Logo recriado com texto

ImobHapi

Combinações

✅ Permitido	Uso
text-gray-900 + bg-coral-500	CTA principal, contador
text-white + bg-brand-600	Nav ativo, filtro, card de marca
text-brand-600 + bg-brand-100	Ícone em círculo, badge
text-coral-500 + bg-brand-600 / bg-brand-800	Ícone ou destaque em superfície escura
text-coral-700 + bg-white / bg-coral-100	Texto de destaque em fundo claro

❌ Proibido	Problema
text-white + bg-coral-500	1,8:1
text-coral-500 em fundo claro	1,7–1,8:1
text-gray-400 como texto de conteúdo	2,6:1
text-pago / text-atrasado como texto	3,4 / 3,9:1

Tom de voz

✅ Prefira	❌ Evite
aluguel em aberto, pagamento atrasado	inadimplente, inadimplência, devedor
lembrete	aviso de cobrança, notificação extrajudicial
painel	dashboard, sistema
Emitir cobrança	Clique aqui · Saiba mais

Camadas

Camada	Cor	Uso
Fundo da página	gray-50 (Gelo)	Base de tudo
Cards e painéis	branco	Conteúdo principal
Itens internos	gray-50	Itens e linhas dentro de cards
Hover	gray-50 / brand-50	Feedback
Marca	brand-600 (Verde Lar)	Navegação ativa, card de marca
Ação	coral-500 (Amarelo)	CTA principal
Apoio	brand-100 (Menta)	Ícones, badges

Antes de criar ou alterar uma tela

1. Já existe em shared/components/?
2. O padrão já está neste manual?
3. As cores de texto passam no contraste da página de Acessibilidade? O amarelo não virou texto em fundo claro?
4. O status aparece com cor e texto, usando os tokens de status?
5. Os textos seguem o tom de voz (sem "inadimplente", "dashboard", "clique aqui")?
6. O padrão novo foi documentado aqui?