Alemão Auto Vidros · Brand Hub

Visão limpa, viagem segura.

Estas são as diretrizes oficiais da nossa marca. Tudo que a Alemão Auto Vidros publica — site, sistema, posts, uniforme, fachada — nasce daqui. Somos uma empresa de vidro: nossa identidade é azul, cinematográfica e direta, e este hub existe pra qualquer pessoa (ou IA) aplicar a marca com confiança.

28 anos de estradaOsasco · SPv3.0 · Design System
Documento vivo. Alguns dados aguardam confirmação do cliente — veja a lista de pendências que estamos revisando juntos (acesso do dono e da equipe Apol).

Fundamentos

O que toda peça usa, antes de existir componente.

CoresA paleta oficial com uso e contraste — fonte única em tokens.ts.TipografiaPlus Jakarta Sans — do outdoor ao aplicativo.Espaçamento & gridEscala, container, breakpoints e a regra de grid que evita quebra no mobile.Elevação & superfícieSombras, raios e quando a superfície é sólida, vidro ou só sombra.Materiais de vidroCristal, laminado, fosco e fumê: as camadas da marca e o fundo que cada uma pede.IconografiaGrid 24, traço 1.8, um detalhe amarelo.MotionVidro deslizando: timing, easing e a vinheta da marca.

Identidade

Os ativos que fazem a marca ser reconhecida de longe.

A MarcaQuem é o Alemão, o que prometemos e como falamos.LogotipoA família da marca, o sistema de aplicação e os cuidados.Padrão gráficoO símbolo em campo: a textura oficial de superfícies grandes.FotografiaO vidro limpo é o herói. Luz natural, gente de verdade.Key VisualA cena pronta da marca: corte diagonal, selo, pilares e o Seu Alemão.MascoteSeu Alemão — o garoto-propaganda oficial e suas regras.

Componentes

As peças construídas sobre os fundamentos — tudo que existe no sistema.

Primitivas & padrõesBotão, campo, cartão, badge e os padrões compostos do admin — com props e estados.Componentes da marcaAs peças do site público: selo, pilares, emblema, CTAs e o motion da marca.Inventário do sistemaO catálogo completo, módulo a módulo — nenhum componente de fora.PlataformaDocumento interno da equipe Apol.

Aplicação & trabalho

A marca no mundo, os arquivos e o que ainda está aberto.

AplicaçõesFachada, uniforme, redes, sistema e site — a marca no mundo.Recursos & downloadsTodos os arquivos oficiais + kit para usar com IA.PendênciasO que ainda aguarda confirmação do cliente — documento vivo, com acesso do dono e da equipe Apol.

Como este documento se mantém vivo

Um DS morre quando o código anda e a documentação não. Estas são as três amarras que impedem isso aqui.

Cor vem de uma fonte só

A paleta vive em components/site-alemao/tokens.ts e o capítulo Cores importa dela. Ninguém digita hex à mão — foi assim que o hub já divergiu do site uma vez (documentava #0B2470 enquanto o site usava #0B2A7E).

O inventário é gerado

Os 500+ componentes não são digitados: saem de components/** por script. Depois de criar ou apagar componente, rode node scripts/gerar-inventario-ds.mjs. Assim “nenhum de fora” é garantia, não diligência.

Capítulo entra em dois lugares

NAV_GROUPS em _nav.tsx (a sidebar) e o índice desta página. Esquecer um dos dois faz o capítulo existir sem ninguém achar — o aviso está no topo do _nav.tsx.

Regra de ouro: tudo aqui existe ao redor da marca oficial — nunca o contrário. Em dúvida, pergunte qual registro a peça pede: abertura (hero, capa, topo de post) é azul escuro e cinematográfica; corpo, que é pra ler, é claro e com respiro. Nunca os dois na mesma superfície.