docs: add SVG design guide and update PDF and XML asset files

2026-10-12 13:40:07 -03:00
parent ef44d34944
commit 5551d9e667
8 changed files with 185 additions and 384 deletions
@@ -0,0 +1,86 @@
+# 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):
+
+```xml
+<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.