Logomarcas/Logomarcas

O que Logomarcas faz?

3.797 logomarcas geométricas gratuitas por David Sherlock, todas desenhadas sob um mesmo padrão: https://logomarks.ai (CC0, domínio público). Esta habilidade ensina a projetar novas marcas que pertencem a esse conjunto e a verificar, editar e reutilizar as existentes. (Para escolher uma marca existente para um projeto e configurá-la, use a habilidade de seleção de Logomarcas.)

Conteúdo desta pasta:

• SKILL.md: este arquivo.
• scripts/kit.mjs: o kit de geometria com o qual o conjunto foi construído (formas, booleanos reais, tecelagem, cubos iso e sólidos iso). Requer npm install polygon-clipping (um package.json está incluído).
• scripts/fit.mjs: ajusta qualquer marca SVG ao padrão e a verifica. Sem dependências.
• scripts/examples.mjs: seis marcas reais do conjunto, reconstruídas com o kit.
• examples/: a saída delas, já ajustada.

Usando as marcas existentes

O site funciona como uma API estática. Nada para instalar:

• https://logomarks.ai/marks.json: nome, slug, arquivo, tags (redondo, quadrado, letra, número, simétrico, radial, sólido, leve, largo, alto, novo) e tamanho desenhado de cada marca.
• https://logomarks.ai/svg/<slug>.svg: a própria marca.
• https://logomarks.ai/marks/<slug>: sua página, com downloads de PNG, favicon e mock-ups de marca.
• https://logomarks.ai/logomarks.zip: todas elas.

Antes de projetar do zero, verifique se uma marca existente (ou uma remix dela) atende ao briefing. Busque marks.json e filtre por tags e nomes.

O padrão (innegociável)

• viewBox="0 0 512 512".

• O lado mais longo da marca é exatamente 448, centralizado: uma margem de 32, medida no contorno real. Uma marca larga tem 448 de largura e é mais curta; uma alta tem 448 de altura. Nunca dimensione a olho: execute fit.mjs.

• Meça a geometria, nunca a tela. Enquanto você constrói, uma marca pode ultrapassar 0-512 (sólidos iso e pilhas altas geralmente o fazem). Isso é aceitável, desde que a etapa de ajuste meça o contorno real. Não encontre os limites de uma marca renderizando-a dentro de seu viewBox: qualquer coisa fora é invisível para essa renderização, o "ajuste" então a deixa para fora e o arquivo final é cortado na borda. fit.mjs mede cada ponto e curva, portanto lida com marcas desenhadas em qualquer lugar; fit.mjs --check rejeita qualquer marca que ainda saia da tela.

• O arquivo completo:

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
    <path fill-rule="evenodd" d="…"/>
  </svg>
  

• Apenas caminhos preenchidos, em currentColor. Sem traços (expanda-os), <g>, transform, style, máscaras, clip paths, IDs ou texto. Buracos são buracos reais (evenodd ou winding reverso), nunca uma forma pintada em uma cor de fundo.

• Coordenadas com uma casa decimal.

Fluxo de trabalho

1. Leia o briefing. Nome, o que o negócio faz, a sensação (calmo, técnico, divertido, premium) e onde a marca será usada (ícone de aplicativo, favicon, sinalização). Uso em tamanhos pequenos favorece marcas ousadas com poucas partes.
2. Escolha uma família (abaixo). Não misture famílias em uma única marca.
3. Escreva 4–6 ideias de uma linha. Cada uma deve ser uma única ideia: "um disco dividido por um canal em forma de S", não "um disco com um S, um ponto e raios". Letreiras usam a inicial do nome.
4. Construa as 2–3 melhores com o kit: um pequeno script que combina primitivas com booleanos e chama write(). Apenas escreva dados de caminho manualmente para marcas muito simples (veja "Escrevendo caminhos manualmente").
5. Ajuste: node scripts/fit.mjs out/ ajusta todas ao padrão.
6. Revise de acordo com a lista de verificação. Observe cada uma renderizada, a 32 px e a 512 px. Corte qualquer uma que falhe e itere nas sobreviventes.
7. Entregue cada marca com um nome curto e único (uma ou duas palavras: "Janela Cubo", "Nascer da Lua"), sua ideia de uma linha e o SVG.

O que o conjunto favorece

Das revisões do proprietário: marcas sólidas e ousadas com uma ideia de espaço negativo e lacunas grossas e uniformes; sólidos iso e cubos; marcas detalhadas construídas a partir de um elemento repetido; marcas mínimas de pontos e pixels; animais fofos de cerâmica. Acima de tudo, qualquer coisa que pareça uma marca moderna de tecnologia, IA ou techwear: precisa, projetada, um pouco futurista. Faixas entrelaçadas, ladrilhos modulares (o favorito), desenhos monoline e multiline, cortes chanfrados e oblíquos, anéis e órbitas precisos, sistemas de grade, letras de estêncil e utilitárias, fatias de glitch, monogramas. Mas nunca um ícone de UI, rede, chip ou circuito, um gráfico de nós de rede neural, um cérebro ou qualquer coisa próxima a uma marca de IA conhecida (um nó hexagonal, um asterisco, um brilho de quatro pontas).

As famílias

Cada marca do conjunto pertence a uma família. Depois de escolher uma (etapa 2 do fluxo de trabalho), leia sua seção em references/families.md antes de construir: como é construída, seus números na tela 512, e o que foi testado e cortado. Seções que este arquivo nomeia entre aspas ("Sólidos Iso", "Edições Glitch") também estão lá.

As famílias: Espaço negativo ousado; Grade suíça; Letras estêncil; Monogramas; Letras e monogramas com serifa (lote 230); Emblemas de letras; Tecido; Cubos Iso; Sólidos Iso; Sobreposições (XOR); Linha (monoline); Multilinha (trilhas); Oblíquo; Grades de pontos; Animais; Animais nos estilos da casa; Folha e semente; Sólidos Meio-tom; Dither Taper (lotes 167, 186); Detalhado; Inflado; Fatias Glitch; Letras Shear e Wire (lotes 112–113); Letras Inline (lote 124); Letras Rail e Trace (lote 166); Letras Echo (lote 202); Marcas de tecnologia (lote 213); Modular; Órbitas; Símbolos de letras, símbolos, criaturas e formas ocultas (lote 168); Techwear (lote 107); Marcas industriais (lotes 95–97); Testado e descartado (lote 51); Dobrado (origami); Dobras e alças (lote 170); Iso · Planos (lote 215); Ousado · Emblemas (lote 216); Ousado · Y2K (lote 232); Letras · Blackletter e Ousado · Shatter (lote 231).

O kit (scripts/kit.mjs)

As formas são conjuntos de polígonos na tela 512 (y aponta para baixo, C = 256 é o centro).

Função	O que faz
circle(cx, cy, r), ellipse(cx, cy, rx, ry, deg)	Discos
rect(x, y, w, h), rr(x, y, w, h, r | [tl, tr, br, bl])	Retângulos, arredondados ou parcialmente arredondados
squircle(cx, cy, R, n)	Uma superelipse: o quadrado suave de emblemas (n 4.5)
regular(cx, cy, r, sides, deg), roundPoly(points, cut)	Polígonos regulares; qualquer polígono com cantos arredondados
poly([[x, y], …])	Qualquer polígono
annulus(cx, cy, r, w)	Um anel de largura w; r é a linha central, não a borda externa
sector(cx, cy, r, a0, a1), arcBand(cx, cy, r, w, a0, a1, round)	Uma fatia de torta; um arco grosso, opcionalmente com pontas redondas
lens(cx, cy, length, width, deg)	Uma vesica / folha
drop(centre, r, tip)	Uma gota
pill(a, b, w), bar(a, b, w)	Uma linha com pontas redondas ou quadradas, para formas ou para cortar lacunas
stroke(points, w), sample(f, t0, t1, n)	Uma polilinha grossa (largura variável permitida) e pontos ao longo de uma curva
weave(strands, w, gap), ring(cx, cy, r)	Fios sobre-sub
iso(edge), cubes(list, edge, ox, oy, gap)	Pontos isométricos; arranjos de cubos
isoPrism, isoBlock, isoRing, isoPile	Sólidos iso (veja "Sólidos Iso")
dedupe(points)	Remove pontos repetidos antes de stroke()
grow(shape, d), soften(shape, r1, r2)	Um deslocamento redondo verdadeiro (negativo encolhe); arredonda cantos internos por r1 e externos por r2 (formas inchadas)
robust()	Chame uma vez no topo de um script: cada booleano então tenta novamente com um pequeno jitter quando polygon-clipping lança exceção
grown(shape, w), over(back, front, w)	A forma mais uma faixa 2w (subtraia para cortar uma parte livre); front na frente de back, cortado livre por w
egg(cx, cy, rx, ry, deg, k)	Um ovo, para corpos de figurinhas
slices(shape, cuts, shifts, { deg, g })	Fatias glitch: corte em faixas por lacunas g, cada faixa deslizada ao longo do corte
BADGE, knockout(kind, letter), clearance()	As sete formas de emblema; uma letra centralizada e recortada, encolhida se chegar a menos de 50 da borda
PIX7, pixels(rows, p), checker(rows)	O alfabeto grosso de 8 bits; um glifo de pixel como um sólido; quaisquer contatos apenas de canto
dsegs(segments, t, g)	Segmentos de exibição com pontas pontiagudas, separados por uma lacuna uniforme
SKEL, skelSolid(k, H, T)	Um sem serifa geométrico como linhas centrais; sólido traçado com pontas quadradas
tracks(pts, { n, pitch, w }), fillet(pts, r), balloon(pts, w0, w1)	Trilhas paralelas; uma polilinha com cantos arredondados; um traçado balão
filletClosed(pts, r), trackLoop(pts, { n, pitch, w })	Um polígono fechado com cada canto arredondado (r por canto permitido); três trilhas em torno de um contorno fechado (pitch 42 para animais)
walk(at, deg, steps)	Um caminho de tartaruga: passos ['L', length] e ['A', turn°, radius], arcos de raio exato (animais de trilha aberta)
seeded(str)	Um Math.random com semente: defina por marca para que o jitter de robust() e o lote regenerem byte-idênticos
svgShape(svgText), pathRings(d)	Leia o SVG de uma marca (ou dados de caminho) de volta para uma forma: curvas e arcos amostrados, buracos evenodd ou nonzero honrados
glitchMark(svgText, { kind, cuts, shift, deg })	Uma edição glitch de uma marca existente (veja "Edições Glitch")
U, D, I, X	União, subtração, interseção, exclusão
rot(shape, deg, cx, cy), rotN(shape, n), move, scale, flipX	Transformações; rotN repete em torno do centro
polar(r, deg, cx, cy)	Um ponto em um ângulo (0° = direita, 90° = baixo)
segmentLines(lines, { t, box }), segments(nodes, strokes, o)	Letras de segmento: cada traço seu próprio segmento, juntas separadas ao longo das bissetrizes
isoPieces(pieces, u)	Peças de cubo unitário com faces contínuas, lacunas apenas entre peças e em dobras (Iso Lock)
blocks(list, W, H), nest(W, H, n, sides, cut)	Um retângulo lado a lado por blocos sólidos com uma lacuna uniforme (Golden e os Blocos); uma subdivisão descascada
linkage(bars, pins)	Cápsulas unidas, cada uma sobre as anteriores
write(file, shape), svg(shape)	Saída

Corte lacunas subtraindo bar()s (ou um annulus() fino) da largura da lacuna. Faça uma parte flutuar em um fosso subtraindo uma cópia ampliada dela, depois adicionando a parte de volta (Hex Gem). Se polygon-clipping lançar "Unable to complete output ring", as formas compartilham uma borda exata: desloque uma por 0.01. Se isso não for suficiente, tente novamente toda a construção com um pequeno jitter no contorno e na profundidade (algumas tentativas de 1e-4 até ~0.02), ou redesenhe a face como um contorno limpo em vez de uma união de retângulos. "Degenerate segment at [NaN, NaN]" significa que uma polilinha tem um ponto repetido: use dedupe(). Os ajudantes do kit (stroke(), pill(), grown()) também chamam os booleanos, então um jitter em seu próprio código não pode alcançá-los: chame robust() uma vez, e as falhas dentro deles tentam novamente por conta própria.

grow() antes do lote 64 não fazia nada útil: simplificava cada anel com seu primeiro ponto repetido no final, o que colapsava o anel naquele único ponto, então apenas adicionava ou removia um círculo ali. Corrigido; se uma cópia do kit for anterior a isso, grow(rect(0, 0, 100, 100), -10) mostra.

Verifique grande, em ambos os fundos. Miniaturas pequenas claras no escuro enganam: uma abertura pode parecer preenchida, ou uma lasca pode se esconder. Antes de cortar ou enviar uma marca, renderize-a a 400 px, escuro sobre claro.

Escrevendo caminhos manualmente

Para uma marca simples, você pode escrever o caminho diretamente:

• Um círculo são dois arcos: M cx-r cy a r r 0 1 0 2r 0 a r r 0 1 0 -2r 0 z.
• Um anel são dois círculos em um caminho com fill-rule="evenodd". O interno se torna um buraco.
• Com evenodd, partes sobrepostas também se tornam buracos. Para sólidos sobrepostos, mescle-os no kit ou use a regra nonzero padrão com cada sólido desenhado no sentido horário e cada buraco no sentido anti-horário.
• Em seguida, execute fit.mjs. Não tente acertar 448 manualmente e não corte a tela: se parte do desenho estiver fora de 0-512, fit.mjs traz de volta.

Lista de verificação de revisão

Corte ou retrabalhe qualquer marca que falhe em um destes:

• Uma ideia, descrita em uma frase sem "e".
• Lê-se a 32 px: lacunas não fecham, nada vira uma bagunça. Nada mais estreito que 10 unidades.
• Uma largura de lacuna e um peso de traço (ou uma proporção clara de 1:2) em toda a marca. Mantenha a lacuna do conjunto (22 unidades entre partes separadas): os controles Lacuna, Peso e Suavizar do site medem as partes e lacunas de cada marca e funcionam melhor quando são uniformes. A única exceção é uma costura de dobra ou sobreposição de 11 (marcas Crease e Strap, em "Dobras e alças"), e apenas onde a silhueta sozinha se lê a 32 px.
• Nunca lê como um ícone. Esta é a regra que as marcas mais falham. Pergunte: ela se encaixaria confortavelmente em um conjunto de ícones (Material, Lucide, SF Symbols)? Se sim, corte-a, por mais bem desenhada que seja. Uma logomarca é um signo abstrato ou estilizado que pertence a uma única marca, não um pictograma de uma coisa ou ação. Especificamente, não é um ícone de UI: sem setas, play, home, engrenagem, porca, sino, cadeado, download, copiar, balão de bate-papo, alfinete de mapa, arcos Wi-Fi, gráficos (fatias de torta também), imagem/montanha-e-sol, barra "proibido", anéis de pontos tipo spinner, caixa de pacote. Desenhos de linha de objetos do dia a dia deslizam rapidamente para ícones: copo, garrafa, óculos, troféu, cartola, foguete, bicicleta e gema todos leem como ícones.
• Não é uma parte do corpo por acidente: cuidado com formas de amêndoa e lente entre anéis sobrepostos.
• Não é um símbolo com significado: sem símbolos religiosos, políticos ou ocultos (hexagrama, pentagrama, cruz, crescente-e-estrela, triquetra, torii, tomoe, suástica em qualquer orientação, estrela de Davi, Om, yin-yang, flor da vida, árvore da vida, chakra, Olho da Providência, pirâmide com olho). Estes não são apenas inadequados: eles são imediatamente detectados por humanos e LLMs e danificam a utilidade do conjunto.
• Não é uma letra única, a menos que seja um monograma legível com duas letras ou mais. Uma única letra como marca é genérica e não pode ser pesquisada. Uma letra inicial em uma forma de emblema funciona se a forma for distintiva.
• Não depende de renderização para ser compreendido. A marca deve ser reconhecível como um contorno de uma só cor: sem gradientes, transparência, sombras ou efeitos que apenas um renderizador específico mostra. A maneira infalível de verificar: visualize-a como currentColor em um SVG mínimo.
• Simétrico ou deliberadamente assimétrico. Assimetria acidental (um eixo ligeiramente desalinhado, um canto com 0,5 px a mais que outro) é cortada.
• As curvas são suaves. Sem cantos vivos onde uma curva encontra uma linha reta, a menos que seja um chanfro ou um corte deliberado.
• O nome não descreve a forma. "Cubo" para uma marca que parece um cubo é muito genérico e não pode ser pesquisado. "Janela Cubo" funciona porque adiciona uma ideia.
• O SVG não tem espaços em branco desnecessários, comentários ou dados de caminho não otimizados. fit.mjs não otimiza caminhos: cada comando, espaço e decimal é seu, então escreva dados de caminho limpos e você mesmo.

Edições Glitch

Uma edição glitch pega uma marca existente do conjunto e a fatia em bandas horizontais ou verticais, deslocando cada banda. A função glitchMark(svgText, { kind, cuts, shift, deg }) no kit faz isso:

• kind: "horizontal" ou "vertical".
• cuts: número de cortes (2-10).
• shift: deslocamento máximo em unidades (0-100).
• deg: rotação em graus (opcional).

A saída é um SVG no mesmo formato do conjunto (viewBox 512, preenchimento currentColor, mesmo estilo). Execute fit.mjs na saída: o deslocamento pode empurrar partes para fora da tela.

As edições Glitch são uma família separada (veja "Fatias Glitch") e devem ser revisadas quanto à legibilidade a 32 px: as fatias podem fazer partes finas desaparecerem. O nome deve terminar com "Glitch", como "Cubo Janela Glitch".

Sólidos Iso

Sólidos iso são formas 3D desenhadas em projeção isométrica, usando as funções isoPrism, isoBlock, isoRing e isoPile. Eles são uma família separada (veja "Sólidos Iso") e devem ser construídos com o kit, não desenhados manualmente. As regras:

• Use iso(edge) para obter pontos isométricos básicos.
• isoPrism(w, h, d) faz um prisma retangular.
• isoBlock(w, h, d, [faces]) faz um bloco com faces opcionais.
• isoRing(w, h, d, t) faz um anel.
• isoPile(blocks) empilha blocos.

Execute fit.mjs na saída: sólidos iso geralmente ultrapassam 0-512 e precisam ser trazidos de volta.

Animais

Os animais do conjunto (veja "Animais" e "Animais nos estilos da casa") são construídos com o kit usando trackLoop() e walk(). Eles são uma família separada e devem ser revisados quanto à legibilidade a 32 px. As regras:

• Use trackLoop(pts, { n, pitch, w }) para contornos fechados.
• Use walk(at, deg, steps) para contornos abertos.
• O pitch para animais é 42.
• O nome deve descrever o animal, como "Raposa", "Coruja", "Coelho".

Glossário

• Logomarca: Uma marca geométrica abstrata ou estilizada (símbolo, letreiro ou monograma) que pertence a uma única marca.
• Letreiro: Uma marca feita de letras, geralmente o nome ou iniciais da marca.
• Monograma: Duas ou mais letras entrelaçadas ou combinadas.
• Espaço negativo: O espaço ao redor e entre as partes de uma marca, usado para criar formas ou letras.
• Família: Um grupo de marcas que compartilham um estilo de construção (por exemplo, Cubos Iso, Tecido, Órbitas).
• Kit: O kit de geometria (scripts/kit.mjs) que constrói formas.
• Ajuste: O processo de dimensionar uma marca para o padrão (lado mais longo = 448, centralizado).
• Glitch: Uma edição que fatia e desloca bandas de uma marca.
• Iso: Projeção isométrica.
• Pixel: Uma abordagem de grade grossa de 8 bits para formas.

---

Para obter ajuda sobre funções específicas, veja o código-fonte ou execute node scripts/kit.mjs --help.