# Kluppy — Brand pack

Pack de identidad de marca generado el 21-07-2026 (v1.0) a partir del logo canónico
(`web/public/logo.png`, 4000×2000). El wordmark está **vectorizado del original**
(fidelidad 99,76 % píxel a píxel). La fuente del logotipo es **Coolvetica**
(Typodermic Fonts, corte regular, tracking −1%, punto sustituido por el cuadrado azul)
— verificado por superposición de píxeles contra los .otf instalados en esta máquina.

**Empieza por aquí →** [`guidelines/KLUPPY_BRAND_GUIDELINES.pdf`](guidelines/KLUPPY_BRAND_GUIDELINES.pdf) (10 págs, A4).

**Página web de marca** (estilo Firebase): `web/src/pages/brand.astro` → `/brand` en el
site de marketing, con descargas servidas desde `web/public/brand/` (incluye
`kluppy-brand-pack.zip` con todo este directorio). Pendiente de deploy.

## Contenido

```
brand/
├── guidelines/           Guía de identidad (HTML editable + PDF)
├── logo/
│   ├── svg/              Maestros vectoriales — USA SIEMPRE ESTOS
│   │   ├── kluppy-logo.svg               Principal (negro + cuadrado azul)
│   │   ├── kluppy-logo-inverso.svg       Blanco + cuadrado azul (fondos oscuros)
│   │   ├── kluppy-logo-negro.svg         Monocromo negro (1 tinta)
│   │   ├── kluppy-logo-blanco.svg        Monocromo blanco (1 tinta)
│   │   ├── kluppy-icon.svg               Icono "k." — baldosa azul
│   │   ├── kluppy-icon-redondeado.svg    Ídem con esquinas redondeadas (avatares)
│   │   └── kluppy-marca-k(-blanca).svg   La "k." suelta, sin baldosa
│   ├── png/              Exportaciones transparentes 512–4096 px
│   └── favicon/          favicon.ico (16/32/48) · favicon.svg · apple-touch-icon
│                         (180) · icon-192/512 (Android/PWA) y demás tamaños
├── social/               PNG finales listos para subir + fuentes en social/src/
│   ├── og-image-1200x630.png             Open Graph (web, WhatsApp, Slack…)
│   ├── linkedin-banner-1584x396.png
│   ├── x-header-1500x500.png
│   ├── instagram-post-1080x1080.png      (plantilla con copy de ejemplo)
│   └── instagram-story-1080x1920.png     (plantilla con copy de ejemplo)
└── email/
    ├── email-header-1200x360.png         Cabecera para emails (usar a 600×180)
    ├── firma-email.html                  Firma corporativa estática (plantilla con placeholders)
    └── generador-firmas.html             ★ Generador de firmas: rellena datos → copia y pega
```

**Firmas de email (uso interno):** abre `email/generador-firmas.html` en el navegador,
rellena nombre/cargo/email/teléfono, elige estilo (con logo o solo texto) y pulsa
**Copiar firma** → pégala en Gmail/Outlook/Apple Mail. El logo de la variante «con logo»
se sirve desde el hosting de marketing (no requiere adjuntar imagen). Herramienta 100% local,
no desplegada.

## Datos clave

| | |
|---|---|
| Azul corporativo | **#2E77A0** · RGB 46/119/160 · CMYK aprox. 71/26/0/37 |
| Tipografía corporativa | **Outfit** (Google Fonts, variable 400–900) — autohospedada en `web/public/fonts/` |
| Métricas / cifras | **Roboto Mono** 400 |
| Primario UI producto | #4F46E5 (índigo) — no confundir con el azul de marca |
| Proporción del logo | ~3,08:1 |

## Cómo regenerar / editar

- Las **plantillas HTML** (`social/src/`, `guidelines/*.html`) llevan la fuente y el logo
  incrustados: ábrelas en un navegador, edita el texto y captura al tamaño exacto del `<body>`.
- Los scripts de generación (trazado del vector, exports PNG, renders y PDF) viven en el
  scratchpad de la sesión de Claude que creó el pack; pídele a Claude regenerar cualquier
  pieza y lo hará a partir de estos maestros.
- La URL del logo en `firma-email.html` apunta al hosting de marketing
  (`kluppy-marketing-2b5fe.web.app`); cámbiala cuando el dominio definitivo esté activo.
