Spec: Ícones de Produtos Koder

1. Linguagem visual

• *onceito* O símbolo deve remeter à função do produto (cadeado = auth, envelope = mail, etc.). Sem texto — apenas símbolo gráfico.
• *or dominante* Cada produto tem cor própria derivada da paleta Koder. Manter consistência de saturação/luminosidade entre produtos.
• * forma É o ícone* Sem quadrado, círculo ou superelipse de fundo. A silhueta do conceito é preenchida com a cor dominante.
• *undo transparente* O SVG não tem retângulo de apoio. O símbolo funciona em fundos claros e escuros sem variante adicional.
• *stilo 3D* Gradientes, sombras internas, reflexos e iluminação direcional. Implementar via linearGradient, radialGradient, filter (feGaussianBlur, feDropShadow). Estilo macOS/iOS — não cartoon.
• *ímbolo interno mínimo* Poucos elementos brancos com opacidade 0.3–0.95. Legível em 32×32px.

2. Arquivo master

• *ormato* SVG vetorial, viewBox="0 0 512 512".
• *rquivo* icon.svg na raiz do repositório do produto.
• *entralização óptica* Bounding box com margens iguais nos 4 lados (tolerância ±4px). Verificar: abrir PNG 512 e medir margens — desvio > 8px reprova.
• *asterização base* rsvg-convert -w 512 -h 512 icon.svg -o icon-512.png e icon-256.png.

3. Export por plataforma

3.1 Android

Adaptive icon (API 26+ — obrigatório)

O Android aplica uma máscara (círculo, squircle, etc. — varia por OEM) ao adaptive icon. O conteúdo fora da *afe zone*é cortado.

Canvas total:    108 dp  → xxxhdpi = 432 px
Safe zone:        72 dp  → xxxhdpi = 288 px  (66,7 % do canvas)
Bleed zone:       18 dp por lado — pode ser exibido em alguns OEMs, clipado em outros

*egra obrigatória* todo conteúdo visual deve caber na safe zone (66,7 % central). Deixar pelo menos 16,7 % de margem em cada lado.

Tamanhos do foreground (canvas total, não safe zone):

Legacy icon (API < 26)

Tamanho 48 dp, sem camadas:

Google Play Store

• 512×512 PNG com canal alpha permitido.

Geração

# Gerar foreground com margem correta (artwork em 66,7 % do canvas)
# Usar SVG com viewBox ajustado ou transform="scale(0.667) translate(75,75)"
rsvg-convert -w 432 -h 432 icon-foreground.svg -o ic_launcher_foreground_xxxhdpi.png
# Redimensionar para demais densidades com ImageMagick
convert ic_launcher_foreground_xxxhdpi.png -resize 324x324 ic_launcher_foreground_xxhdpi.png
convert ic_launcher_foreground_xxxhdpi.png -resize 216x216 ic_launcher_foreground_xhdpi.png
convert ic_launcher_foreground_xxxhdpi.png -resize 162x162 ic_launcher_foreground_hdpi.png
convert ic_launcher_foreground_xxxhdpi.png -resize 108x108 ic_launcher_foreground_mdpi.png

3.2 iOS / iPadOS

Não aplicar cantos arredondados — o iOS faz isso automaticamente. *enhuma transparência*— usar fundo sólido.

*eração*

# A partir do icon-1024.png (fundo opaco)
for size in 20 29 40 58 60 76 80 87 120 152 167 180; do
  convert icon-1024.png -resize ${size}x${size} AppIcon-${size}.png
done

3.3 macOS

Empacotados em .icns:

mkdir MyIcon.iconset
# Copiar cada tamanho com nome correto: icon_16x16.png, icon_16x16@2x.png, ...
iconutil -c icns MyIcon.iconset

3.4 Windows

Win32 / instalador NSIS (.ico)

Um único .ico com múltiplas resoluções embutidas:

convert icon-512.png -define icon:auto-resize=256,128,64,48,32,24,16 icon.ico

UWP / MSIX / Windows Store

Fundo deve ser a cor de brand do produto; símbolo centrado com margem ≥ 16% em cada lado.

3.5 Linux (freedesktop)

Instalados em /usr/share/icons/hicolor/<size>x<size>/apps/<slug>.png:

Também: /usr/share/pixmaps/<slug>.png (48×48, legado).

Após instalar: gtk-update-icon-cache /usr/share/icons/hicolor.

3.6 Web / PWA

manifest.json mínimo:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

3.7 Koder Hub (.kpkg)

Ver specs/kpkg/format.kmd para o campo icon no kpkg.toml.

4. Safe zone por plataforma — resumo

5. Checklist de aprovação

• [ ] SVG master 512×512, fundo transparente
• [ ] Conteúdo centralizado opticamente (tolerância ±4px)
• [ ] Legível em 32×32px
• [ ] Android foreground: artwork dentro da safe zone de 66,7 %
• [ ] Android background: cor de brand (não branco)
• [ ] iOS: sem canal alpha, fundo opaco
• [ ] .ico Windows com resoluções 163248128256
• [ ] Linux: tamanhos 3248128256512 presentes
• [ ] Web: favicon.ico, apple-touch-icon.png (180), manifest 192+512