LOBO23-PO/logo-design

Design de Logotipo

Crie logotipos como um designer de identidade profissional: entenda a marca primeiro, explore conceitos genuinamente diferentes e refine um deles em uma marca escalável e pronta para produção. O resultado é SVG escrito à mão, que é preciso, editável e independente de resolução.

Regras básicas

• Originalidade. Nunca reproduza, trace ou imite de perto o logotipo, mascote ou marca registrada de uma empresa real, mesmo que peçam "faça parecido com X". Você pode emprestar um estilo geral (ex.: "geométrico plano como marcas de tecnologia modernas"), mas a marca em si deve ser nova. Se o usuário fornecer seu próprio logotipo existente, você pode refiná-lo ou redesenhá-lo.
• Vetorial primeiro. Cada marca é construída com SVG a partir de geometria simples (rect, circle, path, polygon). Nenhuma imagem raster embutida, nenhum filtro ou desfoque para a marca principal, nenhuma fonte externa no entregável final (consulte Tipografia).
• Funciona em uma cor. Um logotipo que só funciona com gradientes não está completo. Sempre verifique uma versão monocromática.
• Funciona em tamanho pequeno. Verifique a marca em 16 px e 32 px. Se ela ficar irreconhecível, simplifique.

Fluxo de trabalho

1. Briefing (pergunte apenas o que não puder inferir)

Colete, da conversa ou com um breve conjunto de perguntas:

Item	Por que é importante
Nome (ortografia exata, capitalização) e slogan, se houver	Orienta o wordmark e as composições
O que o negócio faz, para quem	Fonte de conceitos
3 adjetivos de personalidade (ex.: acolhedor, artesanal, confiável)	Orienta linguagem formal, tipo, cor
Cores preferidas / proibidas	Restrições
Onde será usado (sinalização, ícone de app, embalagem, avatar de rede social, bordado)	Orienta o nível de detalhe
Preferência de tipo de logotipo, se houver (veja abaixo)	Restringe a exploração
Logotipos de que gostam ou não gostam, e por quê	Calibração de gosto (não os copie)

Se o usuário der pouca informação, faça suposições razoáveis, declare-as em uma ou duas linhas e prossiga. Não pare em um questionário.

2. Exploração de conceitos (3–4 conceitos)

Produza 3–4 conceitos que sejam significativamente diferentes, não apenas trocas de cor. Varie ao longo destes eixos:

• Tipo de logotipo: wordmark, lettermark/monograma, marca pictórica, marca abstrata, emblema/insígnia, marca combinada (símbolo + wordmark).
• Ideia: literal (o que fazem), metafórica (o que representam), tipográfica (jogo com as formas das letras), truque de espaço negativo.
• Linguagem formal: geométrica vs. orgânica, arredondada vs. angular, pesada vs. leve.

Para cada conceito, escreva uma frase de justificativa: a ideia e por que se encaixa no briefing. Consulte references/concepts.md para técnicas de geração de ideias.

Apresente os conceitos lado a lado (uma página HTML ou um único SVG composto) para que o usuário possa compará-los e, em seguida, pergunte qual direção desenvolver. Se o usuário pediu um único logotipo finalizado e nenhuma opção, escolha você mesmo o conceito mais forte e diga por quê.

3. Refinamento

No conceito escolhido:

1. Construa sobre uma grade. Use um viewBox como 0 0 512 512 para símbolos; alinhe pontos-chave a números inteiros ou a um módulo consistente (ex.: múltiplos de 8 ou 16).
2. Correções ópticas. Círculos e pontos ultrapassam levemente bordas planas (≈1–3 %) para parecerem do mesmo tamanho; traços horizontais parecem mais grossos que traços verticais de mesma largura, então os afine um pouco.
3. Simplifique. Remova todo elemento que não sobreviver a 32 px ou que não carregue a ideia.
4. Equilibre a composição. A altura do símbolo normalmente é ≈ 1.5–2.5× a altura da caixa alta em composições horizontais; o espaço entre símbolo e wordmark é ≈ 0.5–1× a largura de um agrupamento de traços de letra-chave. Centralize opticamente, não matematicamente.
5. Cor. Comece em preto. Adicione cor apenas quando a forma funcionar. Consulte references/color-and-type.md.

4. Validação

Execute o script de pré-visualização e olhe os PNGs (use a ferramenta de Leitura nas imagens) e corrija o que vir:

node <skill-dir>/scripts/preview.mjs path/to/logo.svg [more.svg ...] --out previews/

Ele renderiza cada SVG em 16, 32, 64, 128 e 512 px sobre fundo branco, preto e tom médio, além de uma folha de contato previews/<name>-sheet.png. Verifique:

• Legível e reconhecível em 16 px e 32 px
• Funciona em fundos claro e escuro (forneça uma versão invertida se necessário)
• Versão monocromática se mantém
• Nenhuma forma acidental ou leitura indesejada (gire-a, aperte os olhos)
• Não se assemelha a um logotipo conhecido
• Texto escrito exatamente como fornecido

5. Entrega

Produza um pequeno kit com nomes adequados (adapte ao que foi solicitado):

<marca>-logo/
  <marca>-primary.svg            # combinação de marca colorida / composição principal
  <marca>-horizontal.svg         # símbolo à esquerda, wordmark à direita
  <marca>-stacked.svg            # símbolo acima do wordmark
  <marca>-symbol.svg             # apenas o símbolo (avatares, ícone de app)
  <marca>-wordmark.svg           # apenas o nome
  <marca>-mono-black.svg
  <marca>-mono-white.svg
  <marca>-favicon.svg            # símbolo simplificado, viewBox quadrado
  png/                           # exportações do preview.mjs (ex.: 512, 1024)
  brand-sheet.html               # uma página: marcas, espaço de respiro, cores (hex/RGB/CMYK aprox.), tipo

scripts/export.mjs renderiza qualquer SVG em PNG nos tamanhos escolhidos:

node <skill-dir>/scripts/export.mjs logo.svg --sizes 512,1024 --out png/

Termine com uma breve nota: a justificativa do conceito, a paleta com valores hex, a tipografia usada e o espaço de respiro e tamanho mínimo recomendados.

Regras de criação de SVG

• Elemento raiz: <svg xmlns="http://www.w3.org/2000/svg" viewBox="…"> sem width/height fixos no arquivo principal (adicione apenas em exportações que precisem).
• Inclua <title> com o nome da marca para acessibilidade.
• Use fill nas formas; evite stroke em arquivos finais sempre que possível (converta traços em preenchimentos mentalmente desenhando o caminho do contorno), porque traços escalam de forma imprevisível em algumas ferramentas. Traços são aceitáveis durante a exploração.
• Mantenha IDs únicos e prefixados (acme-grad-1) para que vários logotipos possam ser incorporados em uma página.
• Defina cores uma vez: coloque as cores da marca em um <style> com classes, ou repita valores hex exatos. Nada de currentColor no arquivo principal; use currentColor em uma variante de ícone separada se o usuário quiser ícones adaptáveis a temas.
• Coordenadas arredondadas para no máximo 2 casas decimais.
• Nada de <image>, <foreignObject>, nem scripts.

Tipografia

Texto em SVG depende da fonte estar disponível no visualizador, portanto:

• Exploração: <text> com uma pilha de fontes robusta é aceitável (font-family="Inter, Helvetica, Arial, sans-serif"), e você pode carregar fontes do Google Fonts em uma página de comparação HTML.
• Wordmark final: prefira desenhar as letras como paths (lettering personalizado combina bem com logotipos), ou converta texto em outlines se houver uma ferramenta disponível (ex.: fonttools/opentype.js — veja scripts/text-to-path.mjs). Se nenhuma for possível, mantenha <text>, mas nomeie a fonte exata e a licença na nota de entrega e forneça uma fonte de licença aberta (fontes SIL OFL do Google Fonts são padrões seguros).
• Ajuste o espaçamento entre letras (tracking) a olho; wordmarks em caixa alta geralmente precisam de +2 % a +10 % de tracking, caixa baixa geralmente 0 a −2 %. Corrija pares problemáticos (AV, To, LT, ry).

Modos comuns de falha a evitar

• Conceitos que são a mesma ideia em quatro cores.
• Literalismo de clip-art (uma xícara de café para uma cafeteria, uma casa para um corretor) sem um toque especial. Se for literal, encontre um ângulo inesperado ou um espaço negativo inteligente.
• Muitos detalhes, gradientes, sombras projetadas ou traços muito finos.
• Texto muito pequeno dentro de um emblema para ser lido em tamanhos reais.
• Efeitos da moda que datam rapidamente, a menos que o usuário os solicite.
• Desequilíbrio: um símbolo pesado ao lado de um wordmark esguio (ou vice-versa). Combine as espessuras dos traços.

Referências

• references/concepts.md — técnicas de geração de ideias e guia de tipos de logotipo
• references/color-and-type.md — psicologia das cores, construção de paletas, contraste, combinação de tipos
• examples/ — SVGs de exemplo mostrando estrutura e convenções (marcas fictícias)