Guia de identidade visual Metalpex.
Uma só linguagem para o site e a loja: muito branco, painéis arredondados, títulos leves em duas vozes e o desenho técnico em 3D como assinatura.
Logo sempre como foi entregue.
Mesma tipografia, inclinação, proporção e cores. Ele não é redesenhado, contornado nem recolorido.
Rodapé, documentos e capa de catálogo.
Cabeçalhos. O arquivo tem fundo transparente; o contorno branco faz parte do desenho.
Direto sobre o grafite: o contorno branco do próprio logo separa o preto do fundo.
Cores
O verde vem do logo. Branco e névoa dominam; grafite e verde-noite fazem as seções de impacto.
Tipografia leve e precisa.
Geist, uma família só. Títulos em peso 400 e tamanho contido; a segunda linha em tom mais claro completa a frase. Texto base de 18 px, nunca menos de 16 px.
- Título 1
até 61 px, peso 400 - Metal cortado e dobrado com precisão.
- Título 2
até 45 px, peso 400 - Quatro frentes, a mesma fábrica.
- Título 3
24 px, peso 500 - Rack de agachamento RX-1
- Número
até 50 px, peso 300 - ± 0,5 mm
- Texto
18 px, entrelinha 1,6 - Cada lote é conferido contra o desenho antes de sair da fábrica.
Botões
Cantos de 14 px e um encaixe de seta: no hover, a seta sai pela direita e outra entra, e um brilho atravessa o botão como luz sobre a chapa. Uma ação principal por área.
Componentes
Alvos de 48 px ou mais, rótulo sempre acima do campo e status com cor, ícone e texto.
CEP incompleto. Digite os 8 números.
Painel de especificações.
Painel de dimensões.
Ilustrações técnicas em 3D de verdade.
Cada peça é montada em milímetros em compartilhado/metal3d.js: tubos de canto arredondado, chapas recortadas, furos, parafusos e recartilhado. A mesma peça vira ilustração, vitrine que gira e visualizador com medidas. Arraste qualquer uma.
Movimento com propósito.
Cada animação mostra algo da fábrica ou responde a uma ação. Com movimento reduzido ligado no sistema, tudo aparece pronto e parado.
| Herói do site | A dobradeira prensa a chapa em ciclo; os widgets leem o ângulo, a força, o desvio e o lote ao vivo. |
|---|---|
| Fabricação | Presa ao scroll: a chapa é cortada, dobrada, soldada e medida conforme a página rola. |
| Soluções | Cartões empilham ao rolar e a peça de cada um gira com a rolagem. |
| Empresa | Percurso de usinagem traçado passe a passe, com a fresa andando. |
| Loja | A peça gira no hover do cartão; na página de produto, arraste, troque a vista e mostre as medidas. |
| Botões | Encaixe da seta e brilho de chapa no hover, leve afundamento ao clicar. |
| Tempos | 150, 200 e 250 ms nas interações; curva cubic-bezier(0.2, 0.7, 0.2, 1). |