# PhilGood · Guia para criar ícones

> Use este guia (e os ícones de exemplo em `/icones`) para criar novos ícones no mesmo estilo, à mão ou com IA.
> Versão 1.0 · setembro de 2026

---

## O estilo em uma frase

**Traço de nanquim feito à mão, uma cor só, sobre um círculo suave de cor pastel.**

## Especificação

| Item | Regra |
|---|---|
| Grade | 64 × 64, com área útil de 8 a 56 |
| Traço | 2,4 px (na grade 64), pontas e junções **arredondadas** |
| Cor do traço | Tinta `#23262D` (nunca preto puro) |
| Preenchimento | Nenhum. Só pequenos pontos sólidos (r ≈ 1,4) como detalhe |
| Linhas | **Levemente tortas**: retas viram curvas suaves (C/Q), cantos quase nunca a 90° perfeitos |
| Detalhes | No máximo 4 a 6 traços por ícone. Menos é mais |
| Círculo de fundo | Forma orgânica (quase círculo), em Sol `#F7DC8A`, Broto `#CFE6C8` ou Areia `#EAD9C4`. Ícone ocupa ~60% do círculo |
| Alternar | Em listas, alterne as três cores de círculo na ordem Sol → Broto → Areia |

## No site (animação)

- O ícone **se desenha** quando entra na tela (traço aparece como uma caneta).
- O círculo **flutua** devagar (7 s, ±4 px, ±2,5°).
- No hover, o traço **"ferve"** (tremido de animação feita à mão) e o ícone balança.

## Como desenhar um ícone novo

1. Comece pela **metáfora mais simples** do assunto (ex.: automação = três caixas ligadas por setas).
2. Desenhe na grade 64 com traço 2,4 px arredondado.
3. **Entorte** as retas: troque `L` por curvas com 1 a 2 px de desvio.
4. Tire tudo o que não for essencial.
5. Teste em 24 px: se não der para reconhecer, simplifique mais.

## Prompt para gerar com IA (ChatGPT / Midjourney)

```
Create a single hand-drawn icon of [ASSUNTO], in the style of a quick
black ink sketch made with a fine brush pen: one continuous-looking line
weight (about 2.5px at 64px), round caps and joins, slightly imperfect and
wobbly lines, no fill, no shading, very minimal (4 to 6 strokes max).
Ink color #23262D. Behind the icon, a soft, slightly irregular circle in
pale butter yellow #F7DC8A (or pale sage green #CFE6C8, or sand #EAD9C4),
the icon taking about 60% of the circle. Flat, centered, square 1:1,
transparent or warm cream background (#F6F1E7). No text.
```

Depois de gerar, vetorize (Illustrator > Rastreamento de imagem, ou vectorizer.ai) e ajuste o traço para 2,4 px na grade 64.

## Ícones de exemplo (pasta `/icones`)

| Arquivo | Uso |
|---|---|
| `site` | Sites institucionais |
| `landing-page` | Landing pages |
| `wordpress` | WordPress & Elementor |
| `sistema` | Micro SaaS, dashboards |
| `app` | Apps & PWA |
| `automacao` | Automação & IA (Make, n8n) |
| `identidade` | Identidade visual |
| `cuidado` | Hospedagem & manutenção, saúde |
| `conversa` | Mensagem, WhatsApp, Slack |
| `call` | Call, Meet, reunião |
| `escopo` | Escopo, checklist, etapas |
| `comemoracao` | Entrega, lançamento, "a gente comemora" |

Cada ícone vem em duas versões: `nome.svg` (só o traço) e `nome-circulo.svg` (com o círculo de fundo).