Visual
Iconografia
Um ícone é uma história visual simples — e a nossa é sempre contada do mesmo jeito: geometria limpa, o essencial do conceito e, no máximo, um detalhe amarelo por ícone. Consistência é a marca: nunca misture bibliotecas.
O conjunto próprio — referência de desenho
Os 13 especímenes abaixo definem o traço da casa: grid 24, 1.8 constante, terminais redondos e no máximo um acento amarelo. Eles são a régua de desenho — não os componentes que a UI importa (ver a seção seguinte).
Para-brisa
Troca de vidro
Reparo
Garantia
Ferramentas
Seguro
Telefone
Localização
Agendamento
Carro
Atendimento
Vidro limpo
Estes 13 ainda não são componentes. Nenhum arquivo do sistema os importa — eles vivem só nesta página, como especímenes. Enquanto isso, a UI de produção usa lucide-react no mesmo peso. Não é contradição: é dívida conhecida, e está na lista de /brand/pendencias.
O que roda hoje — lucide-react
A fonte real dos ícones da interface é o lucide-react, sempre com strokeWidth 1.8 pra bater com o traço da casa. O mapa slug→ícone dos serviços vive em components/site-alemao/ui.tsx (ICONES_SERVICO), não neste capítulo.
| Serviço (slug) | Ícone lucide | Tem equivalente próprio? |
|---|---|---|
| para-brisas | CarFront | Sim — “Para-brisa” |
| vigias | GalleryHorizontalEnd | Não |
| vidros-laterais | Car | Sim — “Carro” |
| vidros-de-porta | DoorOpen | Não |
| borrachas-e-frisos | Sparkles | Não |
| maquinas-de-vidro | Cog | Não (o “Ferramentas” é genérico) |
| fechaduras | KeyRound | Não |
| acessorios | Zap | Não |
O buraco é este: o conjunto próprio cobre 2 dos 8 serviços. Enquanto não cobrir os 8, o IconeServico continua em lucide — e está certo assim. Serviço novo entra no mapa de ui.tsx (senão cai no fallback Car e vira carro genérico sem ninguém perceber).
Anatomia e especificação
| Parâmetro | Valor |
|---|---|
| Grid | 24 × 24 px · área viva de 20 px (2 px de margem) |
| Traço | 1.8 constante — nunca engrossa com o tamanho |
| Terminais e cantos | Sempre arredondados (round cap / round join) |
| Cor | var(--az) sobre claro · branco sobre azul · monocromático sempre — nunca hex à mão |
| Detalhe amarelo | Opcional, no máximo UM por ícone — é o acento, não a base |
| Tamanho mínimo | 20 px (abaixo disso, simplifique ou use ponto/badge) |
| No sistema/site (UI) | Complementar com lucide-react no mesmo peso (strokeWidth 1.8) |
Fica de olho
O que mantém a marca inteira — e o que a quebra.
Sempre
- Foque no essencial do conceito — menos linhas, mais clareza
- Novos ícones nascem no mesmo grid 24 e traço 1.8
- Na interface, lucide-react com strokeWidth 1.8 conversa com o conjunto
Nunca
- Ícone preenchido misturado com ícone de traço
- Biblioteca de terceiros sem ajustar ao grid
- Mais de um detalhe amarelo — ou ícone colorido fora de azul + amarelo
- Emoji como ícone em peça oficial