Personagem
Mascote — Seu Alemão
Nosso garoto-propaganda oficial. Ele não é ilustração decorativa: é a personalidade da marca em pessoa — o dono simpático, experiente e de confiança que recebe cada cliente. Este capítulo é o sistema completo do personagem.
Quem é ele
Físico. ~55 anos, rosto redondo, sorriso largo, cabelo grisalho penteado pra trás, olhos azuis, corpo atarracado e acolhedor.
Figurino fixo. Polo azul com a logo no peito, calça preta, botas de trabalho, cordão dourado fino e óculos de leitura na gola. Uma pulseira de prata bem fina somente no pulso direito; aliança pequena e discreta somente no anelar esquerdo.
Tom emocional. Acolhedor, bem-humorado na medida, orgulhoso do ofício. Ele tranquiliza — nunca debocha, nunca dramatiza.
Linguagem corporal. Postura aberta: mãos explicando, joinha, apresentando. Nunca braços fechados, nunca dedo em riste.
Render. 3D estilo Pixar, luz de estúdio suave, texturas realistas. Nunca migrar pra cartoon 2D chapado.
Banco de poses
Poses novas são geradas por IA sempre a partir da imagem-mestre (nunca “de memória” — o rosto muda). Expressões permitidas: sorriso aberto, concentrado, surpresa boa. Proibidas: raiva, deboche, tristeza, medo.
Seis poses para usar. Preserve o rosto e a pele suave da referência inicial. Evite regenerações sucessivas, manchas, vermelhidão e acessórios exagerados. A ventosa aparece sozinha, sem para-brisa artificial. Não espelhe as imagens: isso trocaria a aliança e a pulseira de lado.
Escala, proteção e convivência
| Regra | Especificação |
|---|---|
| Tamanho mínimo | 120 px de altura (digital) · 30 mm (impresso) — abaixo disso, use só a logo |
| Área de proteção | Livre ao redor = altura da cabeça dele; texto nunca sobrepõe o rosto |
| Posição | Entra por uma lateral ou canto — nunca centralizado esmagando o conteúdo |
| Sombra | Elíptica suave no chão (assenta o personagem); jamais sombra dura |
| Com a logo | A logo manda: mascote no máx. 2× a altura da logo na mesma peça |
| Com objeto 3D de acento | Escolha um: mascote OU prop 3D — nunca os dois competindo |
O contorno adesivo — a assinatura dele
Sobre fundo rico, o Seu Alemão sai recortado com um contorno branco grosso, feito figurinha colada no vidro. Não é efeito opcional: é a assinatura do personagem na marca, e é assim que ele aparece no hero do site, no CTA final e dentro do emblema circular.
| Onde | Especificação real |
|---|---|
| HTML/CSS | Constante SELO_STICKER em components/site-alemao/ui.tsx — quatro drop-shadow brancos de 3px (±X e ±Y) formando o contorno, mais drop-shadow(0 18px 22px rgba(4,16,44,.4)) de assentamento. Importe a constante; nunca reescreva os filtros à mão. |
| SVG | Filtro #emb-sticker em emblema.tsx — feMorphology dilate radius=4 → flood branco → merge, mais feDropShadow dy=12 stdDeviation=12 (#04102c a 32%). Dentro do SVG é feMorphology, não CSS. |
| Aplicado em | Mascote no hero e no CTA final da home; símbolo, mascote e logo dentro do emblema circular |
| Fundo | Só sobre azul, gradiente, foto ou padrão — é onde o contorno branco existe. Sobre branco/gelo ele some, e aí o recorte vai limpo, sem contorno |
| Sombra | Faz parte do mesmo filtro. Não empilhe outra sombra por cima |
Contorno é regra, não enfeite. Versões antigas deste hub proibiam “contorno no recorte” — a regra estava errada e proibia a própria identidade. O contorno adesivo é o padrão sobre fundo rico. O que continua proibido é sombra dura embaixo dele: a sombra de chão é elíptica e suave.
Como ele se comporta no site
No site ele não é figura parada. Duas coisas dão vida a ele — e as duas têm regra.
| Comportamento | Especificação real |
|---|---|
| Balão de fala | Balão branco, cantos arredondados com um canto quebrado, texto curto em negrito na cor de tinta, sombra funda. Fica todo ACIMA da cabeça — nunca sobre o rosto — com o rabinho descendo na direção da testa. Uma frase, primeira pessoa, voz dele. No site: “Manda uma foto no zap que eu te passo o valor na hora.” (hero) e “Resolve cedo que sai mais barato.” (CTA final) |
| Segue o mouse | Componente SegueMouse (ui.tsx) — ele e o balão deslocam alguns pixels acompanhando o cursor (intensidade 14 no hero; o eixo Y anda 60% do X). Desliga sozinho em pointer: coarse (celular) e em prefers-reduced-motion. É sutil de propósito: sinal de vida, não brinquedo. |
| Entrada | .entra-subindo com atraso — ele sobe primeiro (150ms), o balão fala depois (420ms). Nessa ordem: a pessoa vê quem está falando antes de ler a fala. |
| Acessibilidade | Ele é decorativo: img com alt vazio e aria-hidden — a informação nunca depende dele. A fala é texto de verdade no HTML (jamais escrita dentro da imagem): no hero ela é lida por leitor de tela; no CTA final o bloco inteiro é aria-hidden, então tudo que o balão diz ali já está no título e no botão ao lado |
Onde ele aparece — e onde não
Aparece
- Série “O Alemão explica” — dicas e educação
- Boas-vindas, promoções, stories e capas
- Figurinhas e saudação do WhatsApp
- Página 404 e estados vazios do site/app
- Totem, adesivo e materiais de loja
Não aparece
- Comunicação séria: reclamação, incidente, nota oficial
- Documentos fiscais, orçamentos, contratos
- No lugar da logo — ele é coadjuvante, não assinatura
- Cena de risco (sem cinto, sem EPI)
Fica de olho
O que mantém a marca inteira — e o que a quebra.
Sempre
- Gerar poses novas anexando a imagem-mestre na IA
- Recortar o fundo verde antes de aplicar
- Em close, cobrir o texto do peito com a logo real (IA borra letra pequena)
- Cortar a marca-d'água do gerador
Nunca
- Distorcer, girar, recolorir ou trocar a roupa
- Gerar “de memória”, sem a imagem-mestre
- Sombra dura embaixo dele (a do chão é elíptica e suave)
- Mudar idade, cabelo ou migrar pra 2D
Nome de trabalho. “Seu Alemão” aguarda confirmação do cliente — ver pendências.
Recursos
Use sempre os arquivos oficiais — nunca redesenhe.