Foundation
Iconografia
A Hogrid não mantém uma fonte de ícones própria. A UI usa Lucide, biblioteca geométrica de traço aberto, consistente com a precisão da bancada. Um único jogo, uma única gramática de traço, sempre a serviço da leitura.
Biblioteca: Lucide
Traço geométrico de 1.75–2px, cantos limpos, sem preenchimento. Importados de lucide-react. Abaixo, um recorte dos ícones mais usados no produto e na comunicação da Hogrid.
Traço & Tamanho
A consistência de traço é obrigatória: um mesmo peso em toda a interface. Misturar espessuras quebra o sistema mais rápido que qualquer cor fora de lugar.
Espessura de traço
Todos os ícones compartilham stroke 1.75–2px. Nunca misture pesos na mesma tela.
Escala de tamanho
Três degraus cobrem o produto. Alinhe o ícone à métrica do texto ao lado dele.
| 16px | Inline em texto, badges, itens densos de tabela |
| 20px | Botões, campos, navegação: o tamanho padrão de UI |
| 24px | Destaques, cards de serviço, cabeçalhos de bloco |
Cor Segue o Contexto
Ícones herdam a cor do texto ao redor via currentColor. Em ações de dados, assumem o token semântico correspondente, nunca o Volts, que é reservado à ação primária.
Ações em tabela
Ícones de ação assumem cor semântica: info para inspecionar, foreground para editar/duplicar, destructive para excluir.
| Projeto | Status | Ações |
|---|---|---|
| App Braza | Em produção | |
| Portal Enterprise | Staging | |
| Landing SEO | Rascunho |
Símbolo de Marca não é Ícone de UI
O símbolo e o logotipo da Hogrid são assets de marca, com regras próprias de espaçamento e cor. Nunca devem ser redesenhados, redimensionados ad-hoc ou usados como ícone funcional na interface.
Assets de marca são intocáveis
Os SVGs em /public/brand (símbolo, logotipo, wordmark) e os ícones de serviço do site são identidade, não fazem parte do jogo de ícones de UI. Para função na interface, sempre um ícone Lucide.
Do & Don't
Do
- Usar exclusivamente Lucide com traço consistente de 1.75–2px.
- Deixar o ícone herdar a cor do contexto via currentColor.
- Aplicar cor semântica (info, destructive) em ações de dados.
- Escolher 16/20/24px conforme a densidade e a métrica do texto vizinho.
Don't
- Misturar espessuras de traço ou bibliotecas de ícones diferentes.
- Pintar ícones de UI com o Volts: ele é reservado à ação primária.
- Redesenhar o símbolo ou o logotipo Hogrid como ícone de interface.
- Tratar os ícones de serviço da marca como ícones funcionais genéricos.