logo

Logotipo

Crie um logotipo que identifica em vez de explica: uma ideia clara, construída em SVG limpo, comprovada em 16 px e em uma cor, entregue como arquivos que um desenvolvedor e uma gráfica possam usar. A saída é uma marca recomendada, mais as evidências de que funciona.

Quando usar

• Um novo logotipo, wordmark, lettermark, monograma, símbolo ou emblema para uma empresa, produto ou projeto.
• Um ícone de aplicativo, favicon ou avatar social, novo ou a partir de uma marca existente.
• Uma crítica, comparação ou atualização de um logotipo existente ("parece ruim quando pequeno", "parece datado").
• Variantes de entrega e um pequeno guia de uso para uma marca que já existe.

Quando não usar

• Cores, fontes, tokens, tom de voz, DESIGN.md, "mostre-me opções para o site": lll:design-system.
• Telas, componentes, ilustrações dentro da interface do produto: lll:ui.
• Nomear o negócio, posicionamento, conselhos de marca registrada: lll:business; uma busca de marca registrada precisa de um profissional.
• Posts em redes sociais, campanhas, criativos de anúncio: lll:marketing.
• Ativos de marca em foto, vídeo ou 3D: fora do escopo; informe.

Modos

Orientação (padrão). Briefing, conceitos, crítica e conselhos no chat. Os SVGs conceituais são desenhados em uma pasta temporária fora do repositório, renderizados, observados e exibidos (SVG colado ou uma imagem); nada é escrito no projeto. Sem subagentes. Pare no ponto de verificação de conceito.

Completo. Somente depois que o proprietário escolher uma direção e solicitar o kit (ou pedir uma execução completa de ponta a ponta). Escreve os arquivos finais na pasta de marca do projeto (brand/logo/, ou a pasta que o projeto já usa): arquivos mestres, variantes, conjuntos de favicon e ícones de aplicativo, folha de teste, miniguia. Lista de entrega e nomes de arquivo: references/delivery.md. Subagentes são opcionais; no máximo um briefing amplo para tarefas de renderização e exportação (../../shared/agents.md).

Tarefas

Tarefa	Gatilho	Ler
design	novo logotipo	references/brief.md, references/mark-types.md, references/concepts.md
build	transformar um conceito em SVG	references/svg-construction.md, references/optical-refinement.md
critique	feedback sobre um logotipo existente	references/critique-redesign.md, references/testing.md
redesign	modernizar ou substituir	references/critique-redesign.md, depois design
assets	variantes, favicon, ícones de aplicativo	references/delivery.md, references/app-icons.md
present	mostrar conceitos, escrever um guia	references/presentation-guide.md

Regras rígidas

1. Um logotipo é um identificador, não uma explicação. Uma ideia, dita em uma frase. Uma frase que poderia descrever o logotipo de um concorrente não é um conceito.
2. Aprenda antes de desenhar: a grafia exata do nome, o que o negócio faz, para quem, três a cinco adjetivos, concorrentes, restrições. A identidade visual existente (cores, formas que as pessoas conhecem) é respeitada, a menos que o proprietário diga o contrário.
3. Construa em preto primeiro. A cor vem depois que a forma funciona. Sem gradientes, sombras ou efeitos para salvar uma forma fraca.
4. Observe seu trabalho. Desenhar SVG às cegas é a principal fonte de marcas ruins. Renderize e veja cada iteração.
5. Nunca trace, imite ou "atualize" uma marca existente reconhecível. Se parecer familiar e não for do cliente, é de outra pessoa.
6. Os arquivos finais são vetoriais: texto convertido em contornos, traços expandidos, sem raster, sem filtros, sem scripts.
7. Nunca reivindique liberação de marca registrada ou cobertura de licença de fonte. Diga quais fontes você assumiu e que o proprietário deve verificar a marca com uma busca profissional.
8. Pare no ponto de verificação de conceito. Mostre três conceitos e uma recomendação, depois aguarde. Construa o kit completo apenas para a direção escolhida. Pule a pausa apenas quando o proprietário disser para não verificar.
9. Testes são resultados, não intenções: relate o que passou, o que você mudou e o que resta para o proprietário.
10. Escreva apenas conteúdo genérico. Nunca coloque nomes ou marcas de outros clientes em uma entrega.

Passos

1. Conheça o projeto. Leia o básico de ../../shared/stack-detect.md, depois procure logotipos existentes (public/, assets/, brand/, *.svg, conjuntos de ícones de aplicativo, manifest.json), DESIGN.md, README e texto da página inicial. Anote o nome exato, plataformas (web, iOS, Android, desktop), cores já em uso.
2. Briefing. Preencha o briefing (references/brief.md): nome, oferta, público, adjetivos e anti-adjetivos, concorrentes, restrições, onde a marca deve funcionar. Fast track: no máximo cinco perguntas em uma mensagem, ou declare suposições e vá em frente. Adjetivos são a entrada mais valiosa.
3. Varra a categoria. Liste os clichês (fintech: escudos e setas para cima; café: grãos e vapor; IA: brilhos e cérebros). Considere-os como proibidos, a menos que você dê a eles uma forma nova. Observe as marcas dos concorrentes com as ferramentas do navegador quando permitido, somente leitura.
4. Conceitos. Escreva de 8 a 12 conceitos de uma frase em pelo menos dois tipos de marca (references/mark-types.md, references/concepts.md). Pontue-os quanto a clareza da ideia, distinção, simplicidade, relevância e força em tamanho pequeno. Mantenha os três mais fortes e mais diferentes. Barato para escrever, caro para construir: construa apenas três.
5. Construa SVG em preto primeiro para cada um dos três (references/svg-construction.md). Descreva a construção em palavras (primitivas, raios, ângulos, unidade de grade), depois escreva o SVG. Salve cada iteração (a-v1.svg, a-v2.svg).
6. Verifique e refine, pelo menos dois ciclos.
   • node scripts/svg-check.mjs check a.svg relata estrutura, cores, traços, ângulos próximos e centralização.
   • node scripts/svg-check.mjs sheet a.svg -o sheet-a.html constrói uma folha de teste: escala de tamanhos, 16 px e 32 px, uma cor, invertido, fundos, olho semicerrado, espelho, guia do favicon, bloco do aplicativo, corte do avatar.
   • Abra a folha com uma ferramenta de navegador e observe. Corrija o que falhar (references/testing.md, references/optical-refinement.md). Repita.
7. Ponto de verificação. Mostre os três conceitos lado a lado em escala de cinza em tamanhos grande e pequeno, uma linha cada, uma recomendação com um risco honesto por conceito (references/presentation-guide.md). Ofereça o kit. Aguarde a resposta. Se quiserem alterações, volte ao passo 5.
8. Kit (Modo completo, após aprovação). Geometria final e corte para tamanho pequeno; cor (uma ou duas cores, versões em uma cor e invertidas, references/colour-type.md); tipo e lockups (horizontal, empilhado, símbolo sozinho, wordmark sozinho); arquivos de entrega (references/delivery.md); ícones de aplicativo (references/app-icons.md); miniguia (references/presentation-guide.md). Faça cópias em preto, branco e monocromáticas com node scripts/svg-check.mjs variants logo.svg, telas de ícone de aplicativo com node scripts/svg-check.mjs icon logo.svg --kind ios -o ios.svg, e empacote tamanhos de favicon com node scripts/svg-check.mjs ico 16.png 32.png 48.png -o favicon.ico.
9. Encerramento. Execute a lista de verificação final (references/testing.md). Liste itens em aberto para o proprietário: busca de marca registrada, licença de fonte, prova de impressão, correspondência de cores.

Qual tipo de marca, em uma tabela

Tipo	Escolha quando	Cuidado
Wordmark	nome distinto, mais visto em texto	fraco em 16 px; precisa de um companheiro compacto
Lettermark / monograma	nome longo, iniciais conhecidas ou curtas	genérico a menos que a forma da letra seja personalizada
Símbolo pictórico	um objeto simples e próprio se encaixa na ideia	literalidade, clichês
Marca abstrata	oferta ampla ou intangível	precisa de significado construído ao longo do tempo
Emblema / distintivo	herança, artesanato, instituições	detalhes finos morrem quando pequenos
Combinação	a maioria das novas marcas; símbolo mais wordmark em lockups	deve funcionar separadamente e juntos
Dinâmico / sistema	muitos pontos de contato ou produtos	precisa de um núcleo rígido; não para marcas pequenas

Guia de raciocínio e decisão: references/mark-types.md.

Saída

• Orientação: briefing e suposições, três conceitos (imagem renderizada ou SVG colado, uma linha cada), recomendação, resultados de teste até agora, itens em aberto. Nada escrito no repositório.
• Completo: pasta de arquivos finais com um manifesto, a folha de teste, o miniguia, a saída real do svg-check para cada mestre e a lista do que o proprietário ainda precisa fazer.
• Diga o que não foi executado: sem renderização, sem teste de dispositivo, sem prova de impressão, sem busca de marca registrada.
• Próximos passos: dois a quatro marcadores (escolha uma direção, realize uma busca de marca registrada, aplique a marca no site e no aplicativo com lll:ui, defina cores da marca com lll:design-system).