Icones do Sistemas
A coleção será remasterizada a partir dos ícones existentes.
Cada desenho deve preservar a metáfora, a silhueta, peso visual do original, também devera seguir a nova palheta de cores e o contraste adequado.
Objetivo
Este documento estabelece a identidade visual, a paleta de cores, as escalas, os formatos de entrega e os critérios dos ícones usados nos Formulários, nas ToolStrips, na ToolBar principal e nos botões do ERP.
Padrão resumido
| Aplicação | Tamanho visual | Arquivo | Observação |
| ToolStrip dos formulários | 24 × 24 px | PNG 24 | Padrão principal aprovado |
| Toolbar principal do MDI | 24 × 24 px | PNG 24 ou quadro ICO 24 | Mesma identidade dos formulários |
| Botão compacto | 16 × 16 px | PNG 16 | Controles entre 22 e 24 px de altura |
| Botão padrão | 20 × 20 px | PNG 20 | Botões com texto entre 26 e 31 px de altura |
| Botão destacado | 24 × 24 px | PNG 24 | Ações principais |
| Ícone do formulário | ICO multirresolução | 16, 24, 32 e 48 px | Título, Alt Tab e toolbar configurável |
Regra central
O tamanho do controle e o tamanho do desenho são propriedades diferentes. Um botão de 30 × 24 px não deve receber automaticamente uma imagem de 30 × 24 px. A imagem segue esta escala e mantém margem óptica para não parecer maior que os demais ícones.
Todos os ícones devem ser desenhados em vetor e exportados exatamente no tamanho em que serão exibidos. Redimensionar uma imagem grande durante a execução costuma borrar detalhes e alterar a percepção de tamanho.
Durante a inspeção foi encontrado controles com dimensões variadas. Esta especificação define o destino padronizado; a migração deve ocorrer por componente e ser validada em execução.
Prompt utilizado para criação
Utilizado ChatGPT Codex
Crie um ícone profissional para um sistema ERP desktop representando “[FUNÇÃO DO ÍCONE]”.
Faça uma remasterização moderna do símbolo tradicional de “[METÁFORA VISUAL]”. Preserve uma metáfora clara, intuitiva e reconhecível, com silhueta forte e leitura imediata mesmo para pessoas que não conhecem o sistema.
Direção visual:
- ilustração digital moderna e profissional;
- aparência detalhada, sem parecer desenho infantil;
- múltiplas cores usadas de forma controlada;
- volume discreto e acabamento levemente tridimensional;
- bordas limpas e bem definidas;
- contraste alto em tamanho pequeno;
- sombras suaves e curtas;
- reflexos muito discretos;
- sem brilho excessivo;
- sem efeito cristal;
- sem aparência de Windows XP;
- sem bordas grossas;
- sem sombras exageradas;
- sem texto, letras, siglas ou etiquetas;
- sem moldura externa;
- fundo totalmente transparente.
Paleta padronizada:
- azul principal: #1976D2;
- azul escuro: #174A7E;
- azul claro: #42A5F5;
- cinza grafite: #455A64;
- cinza claro: #CFD8DC;
- branco gelo: #F5F7FA;
- bege: #D8C3A5;
- verde de confirmação: #2EAD63;
- vermelho de exclusão ou cancelamento: #D94747;
- amarelo de atenção: #F2B134;
- laranja de ação: #E98232.
Use azul, cinza e branco como base. Utilize verde somente para confirmar, concluir ou aprovar; vermelho para excluir, cancelar ou bloquear; amarelo ou laranja para alertas e ações especiais.
Composição:
- objeto principal centralizado;
- ocupar aproximadamente 85% da tela;
- margens transparentes uniformes;
- peso visual equilibrado;
- nenhum detalhe importante próximo das bordas;
- formas e detalhes suficientemente grossos para continuarem legíveis em 24×24 px;
- não inserir pequenos elementos decorativos que desapareçam na redução.
Entregue:
- PNG com transparência;
- composição quadrada;
- versão principal em alta resolução;
- versão final otimizada manualmente para 24×24 px;
- preservar nitidez, contraste e identificação visual na versão de 24 px.
O ícone deve representar claramente: [DESCREVA A FUNÇÃO].
Metáfora visual sugerida: [DESCREVA OS OBJETOS E A COMPOSIÇÃO].
Cor de destaque: [COR RELACIONADA À AÇÃO].