# pephealth · brand kit

Enxoval completo da marca — 60 SVGs vetoriais + 188 PNGs em resoluções múltiplas + favicon.ico multi-resolução. 249 arquivos no total.

## Estrutura

```
brand-kit/
├── 01-logos/                           # Logos em todas as variações
│   ├── svg/                            # 20 SVGs · fonte vetorial
│   └── png/                            # 80 PNGs · 256, 512, 1024, 2048px
├── 02-favicon-and-app-icons/           # Ativos de navegador e mobile
│   ├── favicon.svg                     # Favicon moderno em SVG
│   ├── favicon-minimal.svg             # Versão simplificada (sem cadeia)
│   ├── favicon-16/32/48.png            # Favicons PNG clássicos
│   ├── favicon-minimal-16/32.png       # Versão simplificada
│   ├── favicon.ico                     # ICO multi-resolução (16+32+48)
│   ├── apple-touch-icon-180.png        # iOS
│   ├── android-chrome-192/512.png      # Android
│   └── maskable-icon-512.png           # PWA maskable icon
├── 03-pia-avatar/                      # Avatar da PIA (coral)
│   ├── svg/                            # Estados: default, pensando
│   └── png/                            # 64, 128, 256, 512, 1024px
├── 04-graphic-elements/                # Elemento gráfico da cadeia peptídica
│   ├── svg/                            # Cadeia 3/9/15, divisor, progresso, pattern
│   └── png/                            # 1x, 2x, 3x
├── 05-ui-icons/                        # 8 ícones da biblioteca de UI
│   ├── svg/                            # Midnight default + verde (estado ativo)
│   └── png/                            # 24, 48, 96px
└── 06-social-media/                    # Ativos de redes sociais
    ├── social-avatar-{green|midnight|cream}-bg-1080.png
    ├── og-default-1200.png             # Open Graph default (1200×630)
    └── linkedin-banner-1584.png        # LinkedIn cover (1584×396)
```

## Guia rápido de uso

### Qual logo usar quando

| Cenário | Arquivo recomendado |
|---|---|
| Site em fundo Cream | `logo-symbol-color-on-cream.svg` ou `lockup-horizontal-color.svg` |
| Site em fundo Midnight | `logo-symbol-color-on-midnight.svg` |
| App em fundo branco puro | `logo-symbol-color-transparent.svg` (fundo herda do contexto) |
| Impressão preto e branco | `logo-symbol-mono-black.svg` |
| Impressão em fundo escuro | `logo-symbol-mono-white.svg` |
| Vídeo com fundo genérico | `lockup-horizontal-color-transparent.svg` |
| Apresentação corporativa | `lockup-vertical-color.svg` (mais espaço vertical) |

### Qual favicon usar quando

| Tamanho de exibição | Arquivo |
|---|---|
| 16×16 e 32×32 (tab do navegador) | `favicon-minimal-*.png` (cadeia vira borrão nesse tamanho — a versão minimal tem um ponto central limpo) |
| 48×48 e acima | `favicon-48.png` ou `favicon.svg` (completo, com cadeia) |
| iOS home screen | `apple-touch-icon-180.png` |
| Android | `android-chrome-192.png` e `android-chrome-512.png` |
| PWA maskable | `maskable-icon-512.png` (safe zone respeitada, fundo verde sólido) |
| Fallback universal | `favicon.ico` |

### Tag HTML recomendada

```html
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-minimal-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-minimal-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
<link rel="manifest" href="/manifest.webmanifest">
```

Exemplo de `manifest.webmanifest`:

```json
{
  "name": "pephealth",
  "short_name": "pephealth",
  "theme_color": "#00D084",
  "background_color": "#F7F4ED",
  "icons": [
    { "src": "/android-chrome-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/maskable-icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}
```

### Avatar da PIA no código

A PIA tem dois estados visuais:

- `pia-avatar.svg` — default, sorrindo, com os 3 pontos do sorriso formando uma cadeia peptídica implícita
- `pia-avatar-thinking.svg` — estado "pensando" (pontos maiores, sorriso menos definido) — para quando a IA está processando resposta

Em produção, combinar o `pia-avatar-thinking.svg` com a animação `.anim-thinking` de `pephealth-animations.css` pra ter o efeito de "reticências vivas".

### Avatar social (redes)

Usar sempre uma das 3 variações em `06-social-media/social-avatar-*`:

- **Verde (Pep)** para perfil primário em redes — alta reconhecibilidade
- **Midnight** para momentos editoriais ou campanhas que pedem autoridade
- **Cream** quando a rede tem fundo muito colorido e a marca precisa respirar

Nunca editar o avatar social — usar o SVG direto ou o PNG 1080px (tamanho universal para Instagram, Twitter/X, LinkedIn, YouTube).

## Regras não-negociáveis de uso

- ❌ **Nunca esticar ou inclinar** o logo. Proporção é fixa.
- ❌ **Nunca recolorir** com cores fora da paleta (verde, midnight, cream, preto, branco).
- ❌ **Nunca adicionar sombra, brilho ou efeito 3D.**
- ❌ **Nunca usar o logo em fundos de baixo contraste** (midnight sobre midnight com 10% de opacidade = ilegível).
- ❌ **Nunca substituir a cadeia peptídica por outro elemento** (coração, cruz, onda).
- ✅ **Sempre respeitar a área de proteção** ao redor do logo (margem = diâmetro de 1 aminoácido).
- ✅ **Sempre usar a variação correta** para o fundo (cor vs mono, claro vs escuro).

## Acessibilidade

Contraste dos principais pares testado contra WCAG:

| Combinação | Razão de contraste | Status |
|---|---|---|
| Midnight (#0B1D26) sobre Cream (#F7F4ED) | ~15.3:1 | ✅ AAA |
| Pep green (#00D084) sobre Midnight (#0B1D26) | ~8.1:1 | ✅ AAA |
| Cream (#F7F4ED) sobre Midnight (#0B1D26) | ~15.3:1 | ✅ AAA |
| Pep green (#00D084) sobre Cream (#F7F4ED) | ~1.9:1 | ⚠️ Não usar pra texto · apenas elementos gráficos |
| Sunrise (#FF7A59) sobre Cream (#F7F4ED) | ~3.1:1 | ⚠️ Apenas elementos gráficos ou texto em tamanho grande |

Em avisos de precaução (Sunrise), o texto vai em `#993C1D` (sunrise-strong) sobre `#FFF1EC` (sunrise-subtle) — razão ~6.4:1, AA para corpo.

## Workflow recomendado

**Para design digital.** Importar os SVGs direto no Figma/Sketch. Nunca rasterizar em programas de design.

**Para web.** Usar SVG sempre que possível (favicon.svg, logo-symbol-*.svg inline ou referenciado). PNGs apenas para fallback em navegadores muito antigos ou emails.

**Para impressão.** Usar SVG exportado para PDF/EPS/AI. PNGs 2048px servem em emergências, mas vetorial sempre quando viável.

**Para redes sociais.** Usar diretamente os PNGs em `06-social-media/`. Já estão nos tamanhos certos.

## Versionamento

Este kit é v1.0. Qualquer alteração (nova variação, cor ajustada, tipografia atualizada) gera nova versão (v1.1, v1.2, v2.0) com changelog. Nunca editar PNGs diretamente — sempre regenerar a partir do SVG fonte.

O script de geração vive no repositório principal em `scripts/generate-brand-kit.py` — rodá-lo produz o kit inteiro a partir das primitivas parametrizadas.

## Licença

Uso exclusivo da pephealth. Nenhum uso comercial por terceiros sem autorização expressa.