Kit Tipo

kit-tipo — decidir o tipo, e poder entregá-lo

Antes de qualquer comando: resolva o SKILL_DIR

Todo comando abaixo roda um script que viaja junto desta skill, em SKILL_DIR/scripts/. Defina SKILL_DIR como o caminho absoluto da pasta que contém ESTE SKILL.md que você acabou de ler — o seu harness informou esse caminho no resultado da leitura. Funciona em qualquer hospedeiro, sem depender de variável de ambiente de nenhum agente específico:

~/.claude/plugins/cache/cannonball/cannonball/<v>/skills/<nome>/SKILL.md
~/.codex/skills/<nome>/SKILL.md
~/.gemini/skills/<nome>/SKILL.md
~/.agents/skills/<nome>/SKILL.md

Em todos, SKILL_DIR é a pasta do SKILL.md, e SKILL_DIR/scripts/ está ao lado.

A kit-cor existe porque o acervo tem cor demais e decisão de menos. Aqui o problema é o inverso, e é mais grave: o acervo nomeia 389 fontes diferentes, 341 delas usadas uma única vez (87%).

python "${SKILL_DIR}/scripts/tipo.py" --vies

Isso não é variedade. É a lista de compras de outras marcas. Os design systems foram extraídos de sites reais, e site de marca paga por tipo: Aeonik, Roobert, GT Standard, Suisse Int'l, Söhne, PP Neue Montreal, Lausanne — todas comerciais, com licença web cobrada por pageview ou por domínio.

Dois padrões que definem o trabalho desta skill, e que aparecem em qualquer acervo montado a partir de site real:

• Design system nomeia a fonte e não diz onde carregá-la. Ele diz "use ES Allianz" e para. Nenhum traz licença, origem ou substituto — isso é trabalho seu.
• Prompt de página puxa de db.onlinewebfonts.com e de outros sites que redistribuem fonte comercial sem licença. Entregar isso ao cliente é entregar o problema junto.

Quantas peças do seu acervo estão em cada caso:

python "${SKILL_DIR}/scripts/tipo.py" --vies
python "${SKILL_DIR}/scripts/tipo.py" --classificar

Cor é de graça. Tipo não é. Essa é a diferença que organiza tudo aqui.

0. Escala não é decoração — é tempo

Antes da mecânica, o que a escala está fazendo: tamanho, posição, contraste e espaçamento são timing. A manchete funciona de longe; a frase de apoio recompensa quem se aproximou. Isso é hierarquia como sequência, não como enfeite (${SKILL_DIR}/references/fundamentos-visuais.md §3).

Monte em três degraus, não em sete:

E a ressalva que quase ninguém faz: o maior nem sempre é o mais importante. Em página de produto, sim, o produto é o herói. Em página de evento ou serviço, o hook pode ser a imagem ou uma frase enquanto a informação que converte (data, preço, endereço) é o menor elemento — porque quem chegou até ela já decidiu procurar.

Depois de gerar a escala com --escala, confira: dá para apontar o hook, o secundário e o finisher na tela? Se três coisas disputam o papel de hook, não há hook.

1. Antes de gostar, confira se pode usar

Sempre o primeiro passo, e quase nunca o que se faz primeiro:

python "${SKILL_DIR}/scripts/tipo.py" --licenca "Aeonik"

Três situações, e a do meio é a que pega:

A categoria "restrita" existe por um caso concreto: SF Pro não pode ir para a web. A licença da Apple cobre interface de app nas plataformas dela, não site. Ela aparece 4 vezes no acervo, está instalada em todo Mac, e é por isso que passa despercebida. Segoe UI tem o mesmo problema no Windows. As duas servem como fallback na pilha, nunca como escolha.

Nunca baixe de db.onlinewebfonts.com nem de espelho parecido. São redistribuições sem licença — e quem entrega isso passa o problema para o cliente, que é quem responde.

Se a licença comercial for o caminho, avise o custo antes de desenhar com ela. Descobrir depois que a fonte custa por pageview é retrabalho caro.

2. Substitua por desenho, não por aparência

python "${SKILL_DIR}/scripts/tipo.py" --substituir "Roobert"

O script devolve substituto livre com o critério explícito. O critério é desenho — largura, altura-x, contraste, terminações — não "achei parecido".

Alguns que resolvem a maior parte do acervo:

Substituto nunca é idêntico, e tudo bem. O que precisa sobreviver é o papel da fonte na identidade: se ela existia para parecer técnica, o substituto tem que parecer técnica.

3. Duas famílias. Três é indecisão

python "${SKILL_DIR}/scripts/tipo.py" --par "Instrument Serif"

Um display e um corpo. Mono só entra se houver rótulo técnico, número ou código de verdade — não como enfeite.

A regra que mais se quebra: serifa de display de alto contraste é só título. Cormorant, Playfair Display, Libre Caslon, Instrument Serif — os traços finos delas somem em 16px e em tela sem retina. Toda uma delas pede uma sans robusta no corpo.

E o caso oposto: fonte de peso único constrói hierarquia por TAMANHO, não por peso. Anton tem um peso só; pedir semibold dela faz o navegador sintetizar negrito, que é aquele borrão gordo que denuncia amadorismo.

Combinação segura quando o brief não pede nada: uma serifa editorial no display com uma sans neutra no corpo. É reliable, não é original — e reconhecer a diferença faz parte.

4. A escala é calculada, não escolhida a olho

python "${SKILL_DIR}/scripts/tipo.py" --escala --base 17 --razao 1.25

Base e razão, e o resto sai. Duas travas que o script avisa:

• Base abaixo de 16px é problema real, não preferência. 16px é o padrão do navegador, e abaixo disso o iOS dá zoom automático em input — o que desmonta o layout de qualquer formulário. Se o site tem agendamento ou contato, isso é entrega quebrada.
• Razão a partir de 1.5 abre buraco entre corpo e subtítulo. Passa bem em landing de uma tela; em site de conteúdo, fica faltando degrau. Para conteúdo, 1.2 a 1.333.

Arredonde para o meio pixel ao escrever o token: fração longa não muda nada na tela e só polui o CSS.

5. Peso carregado é peso na primeira pintura

Cada peso é um arquivo. Quatro pesos de duas famílias são oito requisições no caminho crítico, e o sintoma é o texto piscando de fallback para a fonte real.

• Carregue só os pesos que você usa. Se o design tem regular e bold, são dois — não os nove que o Google Fonts oferece.
• Prefira a variável quando precisar de faixa ampla: um arquivo cobre tudo.
• font-display: swap para o texto aparecer antes da fonte chegar. Sem isso, o parágrafo fica invisível durante o carregamento.
• Em Next.js, next/font faz self-host e elimina a requisição a terceiro — ganha em performance e em privacidade, porque o Google Fonts como CDN entrega IP do visitante.

Se a fonte vier por @font-face local, os arquivos precisam existir no projeto. É a armadilha já registrada no unwind-hero: o prompt assume que os WOFF da PP Mori estão lá, e não estão.

6. Só então escolha o design system

Com licença resolvida, par definido e escala pronta, a busca muda de natureza:

python "${SKILL_DIR}/scripts/buscar.py" "<caráter>" --familia design-system

O design system vai trazer a escala tipográfica dele e o nome da fonte dele. Trate o nome como sugestão, não como requisito — confira a licença antes de adotar, e substitua sem culpa. A identidade do design system está na escala, no espaçamento e no contraste, não no arquivo da fonte.

Se o MCP do GetLayers estiver ligado, getlayers_fonts traz 15 tipos curados, cada um já com o stack CSS exato e a importUrl — todos livres, e com pairsWith para o par display + corpo. Ver ${SKILL_DIR}/references/getlayers.md.

7. Grave a decisão

Na receita (passo 9 da kit-montar), registre as duas famílias, a base, a razão e a situação de licença. Especialmente quando houver substituição: sem isso, o próximo projeto tenta usar a fonte comercial de novo, porque é ela que está escrita no design system.

Se uma fonte quebrar em algum lugar — peso sintetizado, arquivo faltando, zoom no iOS — registre:

python "${SKILL_DIR}/scripts/armadilhas.py" --add <id-da-peça> \
  --texto "o que quebrou e em que tamanho/peso" --origem <receita> --grau alta

O que esta skill não faz

Não avalia se uma fonte é "bonita", não gera fonte, e não conhece todas: o catálogo cobre as que aparecem no acervo mais as livres que valem a pena. Para nome fora dele, o script diz que não sabe em vez de chutar — e nesse caso a resposta certa é conferir a fundição, não assumir que é livre.

Marca conhecida quase sempre significa fonte paga.