Manual de marca

Identidade e logo

Logo

Nunca recrie o logo com fonte ou CSS. Use sempre os arquivos oficiais, com o texto convertido em contorno.

• O nome é escrito em minúsculas, como uma palavra só: "imob" peso 500 + "hapi" peso 800. Em texto corrido, escreva ImobHapi.
• Símbolo: a casa que sorri — telhado em chevron Amarelo Chave e sorriso branco sobre quadrado Verde Lar, raio de 25% do lado.
• Altura no cabeçalho: 32 a 40px.
• Tamanhos mínimos em tela: horizontal 96px de largura · símbolo 24px · favicon 16px. Abaixo de 96px, use só o símbolo.
• Área de proteção: metade da altura do símbolo, nos quatro lados.

Arquivo (em public/brand/)	Uso
imobhapi-logo-horizontal-positivo.svg	Versão principal. Sidebar, login, site, documentos (fundo claro)
imobhapi-logo-horizontal-negativo.svg	Fundos Verde Lar, Verde Noite e escuros
imobhapi-simbolo.svg	Cabeçalho mobile, ícones, avatar de marca — quando o nome já aparece por perto

As demais versões (vertical, com slogan, uma cor, PNG e PDF) ficam no repositório do manual, em logos/.

No portal Angular, use NgOptimizedImage:

<img ngSrc="brand/imobhapi-logo-horizontal-positivo.svg" width="140" height="36" alt="ImobHapi" priority />

Não fazer

Não distorcer, girar, trocar cores ou fonte, aplicar sombra, brilho ou contorno, mudar o espaçamento, adicionar elementos, cortar ou inverter o sorriso. Não usar sobre fundos conflitantes nem branco sobre Menta.

Endosso FastGivr

"uma solução FastGivr", só em texto: rodapé, termos de uso, propostas. Nunca dentro do logo nem nas telas de operação do portal.

Favicon e ícones de app

Os arquivos-mestre ficam no repositório do manual, em logos/redes-sociais/web/. São publicados em public/ com os mesmos nomes no portal e no site.

Arquivo publicado	Origem no manual	Uso
favicon.ico	web/favicon.ico (16, 32, 48)	Favicon
favicon.svg	svg/imobhapi-simbolo.svg	Favicon vetorial
favicon-96x96.png	web/app-icon-512x512.png reduzido	Favicon PNG
apple-touch-icon.png	web/apple-touch-icon-180x180.png	iOS
icon-192.png	web/android-icon-192x192.png	PWA
icon-512.png	web/app-icon-512x512.png	PWA
icon-maskable-512.png	símbolo sobre quadrado Verde Lar sólido, conteúdo dentro de 80%	PWA maskable

site.webmanifest: name e short_name ImobHapi, theme_color #12463B, background_color #F6F8F5. A meta theme-color também é #12463B. Não crie ícones diferentes por projeto.

Elementos gráficos

• Telhado em chevron — traço grosso (5.5 em viewBox 64), pontas arredondadas, o mesmo ângulo do símbolo. Use cortado nas bordas do card ou da seção, no máximo três por composição e só um em amarelo. No portal, só no card de marca.
• Traço de destaque — barra amarela curta abaixo de números e títulos.
• Ilustrações — planas, geométricas, no máximo três cores da paleta (casas, chaves, calendário, envelope, sino). Sem mascotes.
• Sem gradientes entre as cores da marca. Superfícies de marca são sólidas: Verde Lar ou Verde Noite.

128

contratos ativos

<svg viewBox="0 0 64 34" fill="none" stroke="currentColor" stroke-width="5.5"
     stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <path d="M8 28 L32 6 L56 28" />
</svg>

Fotografia

• Luz natural e suave, ambientes claros e organizados, pessoas reais e diversas em ações do dia a dia.
• Correção de cor puxando levemente para o verde.
• Recorte com cantos arredondados (rounded-3xl).
• Evitar: pessoas desesperadas com contas, dinheiro em espécie, despejo ou conflito, mansões, filtros saturados.

Mockups de produto

• Nunca use telas do sistema geradas por IA. Use prints reais com dados fictícios ou exemplos montados em código (como o PainelPreview do site).
• Prints publicados precisam estar na identidade ImobHapi — refaça os que mostram a marca antiga. As capturas desta documentação são geradas por npm run screenshots.