cybercore-signer/docs/svg-design-guide.md

Guia de Padrão Visual e Design System SVG — CyberCore Signer

Este documento estabelece a especificação oficial de design, geometria, tokens de cores e regras de compatibilidade para todos os ícones e elementos gráficos vetoriais (SVG) do ecossistema CyberCore Signer.

---

1. Princípios de Design

1. Clareza e Precisão: Cada ícone deve comunicar imediatamente sua função técnica (PDF, XML, assinatura embutida, validação, credenciais).
2. Minimalismo e Geometria Pura: Evitar ruídos visuais, nós desnecessários, filtros proprietários ou imagens bitmap embutidas (<image>).
3. Consistência de Traço e Escala: Espessuras de contorno previsíveis e alinhadas ao grid de 48x48 pixels.
4. Interoperabilidade: Totalmente compatível com editores vetoriais modernos (Inkscape, Figma, Adobe Illustrator) e com o parser nativo de JavaFX em AssetManager.

---

2. Grid e Canvas Canônico

Propriedade	Valor Padrão	Descrição
ViewBox	0 0 48 48	Padrão obrigatório para ícones da grade de ações e ferramentas laterais.
Dimensões Base	width="48" height="48"	Dimensões nominais 1:1.
Área Segura	4px de margem interna	O conteúdo vetorial deve se concentrar entre (4, 4) e (44, 44).
Raio de Canto Padrão	rx="3" ou rx="6"	Arredondamentos harmônicos em cantos de janelas e etiquetas.

---

3. Paleta de Cores e Tokens Visuais

Os ícones utilizam uma paleta de cores corporativa baseada em Material Design e Tailwind Modern, com alto contraste sobre fundos claros e escuros:

Token	Hexadecimal	Papel / Significado
color-brand-primary	#0288d1	Azul CyberCore. Traço padrão de folhas, botões principais e XML.
color-brand-deep	#01579b	Azul escuro para dobras e acentos de profundidade.
color-paper-fold	#b3e5fc	Preenchimento suave da dobra superior do documento padrão.
color-pdf-accent	#d32f2f	Vermelho institucional do formato Adobe PDF.
color-pdf-fold	#ffcdd2	Preenchimento suave da dobra do documento PDF.
color-success	#10b981 / #2e7d32	Verde esmeralda para assinaturas válidas e verificações.
color-gold-seal	#f59e0b / #d97706	Dourado e âmbar para selos notariais e certificação digital.
color-paper-lines	#b0bec5 / #cfd8dc	Linhas de texto representativas e divisórias neutras.
color-console-bg	#1e293b	Fundo de janelas de terminal (Logs).
color-danger-exit	#d32f2f	Seta e alertas de encerramento do agente.

---

4. Anatomia dos Ícones de Documentos

Para documentos com dobra (como PDF, XML, Atachada e Validador):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
  <!-- 1. Folha de documento com dobra -->
  <path d="M 8 4 L 32 4 L 42 14 L 42 44 L 8 44 Z" 
        fill="#ffffff" stroke="[COR_BORDA]" stroke-width="2.5" stroke-linejoin="round"/>
        
  <!-- 2. Dobra de canto superior direito -->
  <path d="M 32 4 L 32 14 L 42 14 Z" 
        fill="[COR_FUNDO_DOBRA]" stroke="[COR_BORDA]" stroke-width="2" stroke-linejoin="round"/>
        
  <!-- 3. Linhas de texto representativas -->
  <line x1="13" y1="18" x2="27" y2="18" stroke="#b0bec5" stroke-width="2" stroke-linecap="round"/>
  <line x1="13" y1="22" x2="35" y2="22" stroke="#b0bec5" stroke-width="2" stroke-linecap="round"/>
  <line x1="13" y1="26" x2="35" y2="26" stroke="#b0bec5" stroke-width="2" stroke-linecap="round"/>
  
  <!-- 4. Elemento distintivo inferior (Etiqueta, Caneta, Clipe ou Checkmark) -->
  <rect x="11" y="31" width="28" height="11" rx="3" fill="[COR_BADGE]"/>
  <text x="25" y="39" font-family="'Segoe UI', Arial, sans-serif" 
        font-size="8px" font-weight="bold" fill="#ffffff" text-anchor="middle">[TEXTO]</text>
</svg>

---

5. Boas Práticas para Exportação no Inkscape / Figma

Ao criar ou editar ícones nas ferramentas vetoriais externas:

1. Escolha a opção "SVG Simples" (Plain SVG) no Inkscape:
   • No Inkscape: Arquivo → Salvar Como... → SVG Simples (*.svg).
   • Isso elimina metadados de sessão (sodipodi:namedview, guias, zoom e histórico).
2. Nunca incorpore imagens bitmap (<image> base64):
   • O aplicativo desktop deve conter exclusivamente geometria vetorial limpa (path, rect, circle, line, polygon, polyline, text).
3. Suporte a style="..." inline:
   • O parser do CyberCore Signer (AssetManager) suporta tanto atributos XML puros (fill="#...") quanto estilos inline em CSS (style="fill:#...;stroke:#...").
4. Mantenha o ViewBox Quadrado:
   • Preserve sempre viewBox="0 0 48 48" para garantir alinhamento perfeito nos botões e painéis da interface.