Visual · composição-assinatura
Key Visual
O key visual é a cena pronta da marca — a composição que repetimos em apresentações, posts, banners e no site até virar reflexo: viu o azul profundo cortado pelas diagonais amarelas com o Seu Alemão apresentando, sabe que é a gente. Abaixo, as duas peças-mestre tal como existem no site, renderizadas pelos mesmos componentes que estão no ar.
Este capítulo não tem cópias. O emblema, o selo, os pilares e a faixa de serviços aqui são os componentes de components/site-alemao; os dados vêm de data.ts e as cores de tokens.ts. Se algo mudar no site, muda aqui sozinho — é assim que o manual para de mentir. Nunca copie dado de arte de referência: as artes antigas foram geradas por IA e traziam telefone e e-mail fictícios.
O hero-mestre
A cena completa: fundo azul profundo com o ponto de luz do gradiente, diagonais amarelas em −14°, selo de origem, headline em caixa alta com o remate amarelo, pilares e o Seu Alemão em recorte adesivo — a faixa de serviços fecha embaixo.
Vidro novo,
segurança sempre.
Excelência em auto vidros com qualidade, agilidade e confiança.
- Qualidade
- Agilidade
- Confiança
- Para-brisas
- Vigias (vidro traseiro)
- Vidros laterais
- Vidros de porta
- Borrachas
- Conserto de fechaduras
- Recondicionamento de máquinas de vidro
- Acessórios
Espécime estático: parallax, facho de vidro e título rotativo são do capítulo Motion e vivem no SiteShell — a estrutura e os tokens aqui são os do site.
O emblema
O selo circular da marca — anel azul com origem e cidade, o Seu Alemão no centro coroado pelo símbolo, cartões de apoio nas laterais e a logo cruzando a base. Uso: capa de perfil, abertura de vídeo, adesivo, carimbo de apresentação.
Peça única e indivisível: tudo (anel, texto em arco, mascote, logo e os dois cartões) vive dentro de um <svg viewBox="0 0 600 600">, em coordenadas SVG — nunca em porcentagem. Escala como um bloco só e não refluí em nenhum tamanho de tela. Não redesenhe: importe <Emblema />.
A fórmula
Sete ingredientes, sempre os mesmos. A variação entre peças está no formato e na dose — nunca na receita.
| # | Elemento | Regra |
|---|---|---|
| 1 | Fundo escuro | O key visual nasce no escuro. Gradiente radial com o ponto de luz no alto à direita: --az-eletrico no centro, --az-vivo a 42%, --az na borda. Azul elétrico é luz, nunca fundo chapado nem texto. |
| 2 | Diagonais amarelas | Faixas em skew −14° (a inclinação do “A”), sempre na mesma direção e sempre entrando por um lado só. Uma diagonal larga + uma fina de apoio. Nunca cruzar duas nem variar o ângulo na mesma peça. |
| 3 | Padrão e marca-d’água | O padrão gráfico cobre o fundo inteiro em baixa opacidade e o símbolo gigante sangra num canto a ~6%. Ambos atrás de tudo — nunca por cima de texto ou do mascote. |
| 4 | Headline do KV | “Vidro novo, segurança sempre.” — extrabold (800), caixa alta, entrelinha fechada. O remate em amarelo sobre o azul. Sem itálico, nunca. |
| 5 | Selo de origem | Pílula bicolor amarelo+azul “★ Desde 1998 · Osasco · SP”. Abre a peça, acima da headline. |
| 6 | Seu Alemão adesivo | O mascote ancora um dos lados, sempre inteiro, apresentando o conteúdo — com o contorno branco de 3px do recorte adesivo (SELO_STICKER) e sombra de apoio no chão. É a assinatura da marca sobre o mascote: o contorno é obrigatório, não opcional. |
| 7 | Faixa de serviços | Marquee amarelo fechando a cena: serviços em caixa alta separados por estrela, rolando em 28s contínuos e pausando no hover/foco. Sempre na base, sempre amarelo com texto azul. |
As peças isoladas
Cada ingrediente também vive sozinho — em cards do site, slides, stories e no rodapé de qualquer material.
Selo de origem — bicolor, canto arredondado, sempre em caixa alta
- Qualidade
- Agilidade
- Confiança
Pilares em fundo claro — ícone azul, rótulo tinta
- Qualidade
- Agilidade
- Confiança
Pilares em fundo rico — ícone amarelo, rótulo branco
- (11) 3691-4754
- alemaoauto.com.br
- Osasco · SP
- Seg a Sex, 8h às 17h · Sáb, 8h às 12h
Barra de contato — pills com disco amarelo, dados sempre de data.ts
- Para-brisas
- Vigias (vidro traseiro)
- Vidros laterais
- Vidros de porta
- Borrachas
- Conserto de fechaduras
- Recondicionamento de máquinas de vidro
- Acessórios
Fileira de serviços — os 8 serviços de data.ts, cada um com o ícone do mapa IconeServico, que vive em components/site-alemao/ui.tsx e hoje usa lucide-react no traço da casa (1.8). Nunca escreva a lista à mão.
- Para-brisas
- Vigias (vidro traseiro)
- Vidros laterais
- Vidros de porta
- Borrachas
- Conserto de fechaduras
- Recondicionamento de máquinas de vidro
- Acessórios
Marquee — a mesma faixa que fecha o hero. Roda a 28s no site (a animação vem do SiteShell); aqui aparece parada.
Mensagens: assinatura × headline
As frases convivem — cada uma no seu posto.
| Frase | Papel | Onde |
|---|---|---|
| “Vidro novo, segurança sempre.” | Headline do key visual — abre a cena | Hero do site, capa de apresentação, topo de banner e post |
| “Seu para-brisa em boas mãos, você sempre em frente.” | Mensagem de apoio — o benefício em uma linha | Faixa central de banners e posts; segunda dobra do site |
| “Excelência em auto vidros com qualidade, agilidade e confiança.” | Apoio da headline | Uma linha abaixo da headline, peso 500, nunca sozinha |
| “Visão limpa, viagem segura.” | Assinatura da marca — fecha, não abre | Rodapés, bio, fim de vídeo, verso de cartão |
Fica de olho
O que mantém a marca inteira — e o que a quebra.
Sempre
- Uma diagonal por peça, sempre em −14° — o corte organiza, não decora
- Headline extrabold em caixa alta, com o remate amarelo sobre o azul
- Mascote inteiro, apoiado, apresentando o conteúdo — sempre com o contorno adesivo branco
- Amarelo como texto só sobre azul ou escuro
- Dados de contato e serviços importados de data.ts, nunca digitados
Nunca
- Itálico em qualquer lugar — o cliente baniu, o site não usa, o key visual não tem
- Copiar telefone/endereço/ano de artes de referência (as antigas eram geradas por IA)
- Usar Montserrat/Oswald das referências — a tipografia oficial é Plus Jakarta Sans
- Cruzar duas diagonais ou inclinar em ângulos diferentes na mesma peça
- Redesenhar o emblema à mão em vez de usar <Emblema /> — dois emblemas, uma marca
- Padrão ou marca-d’água por cima de texto ou do mascote
Recursos
Use sempre os arquivos oficiais — nunca redesenhe.
