# Logo Oden — Spec oficial

**Última actualización:** 2026-05-27
**Master canonical:** [`docs/design/brand/logo/master-mark-512.png`](./brand/logo/master-mark-512.png) (512×512, RGBA transparent)
**Estado:** activo · todas las apps deben usar las variantes de esta carpeta

---

## El símbolo

El logo Oden es un **ensō japonés con flama**:
- **Ensō** (`円相`) — círculo de un solo trazo a pincel, símbolo de iluminación, fortaleza, vacío, presencia. Trazo imperfecto a propósito (es lo que lo hace humano).
- **Flama brush** saliendo del lado superior-derecho del ensō — sugiere movimiento, energía, vida, lo que sale del círculo cerrado.
- **Color** sage green (`#5DB075` aprox, con variaciones brush por la textura del trazo).

**No es:** un círculo geométrico, una O sans-serif, un logo vectorial limpio. La textura imperfecta del brush es la marca; al "limpiarla" se pierde la identidad.

---

## Las 11 variantes oficiales

Todas viven en `docs/design/brand/logo/`. Organizadas en 3 carpetas + master:

### Master
- **`master-mark-512.png`** (512×512 transparent) — la fuente. **No usar directamente** en publicaciones; usar una de las variantes derivadas. Solo modificar este archivo si cambia el logo entero.

### `mark/` — solo el símbolo, cuadrado, sin texto
| Archivo | Tamaño | Background | Cuándo usar |
|---|---|---|---|
| `mark-dark-1080.png` | 1080×1080 | `#0F1419` dark | **Profile pic** Facebook/IG/Twitter, app icon dark mode, og:image dark |
| `mark-light-1080.png` | 1080×1080 | `#FFFFFF` white | Papel membretado, documentos imprimibles, presentaciones light, embed en sitios light |
| `mark-transparent-1080.png` | 1080×1080 | Transparente | Overlay sobre cualquier fondo (cuidado con fondos verdes que canibalizan) |

### `mono/` — versiones monocromas
| Archivo | Color | Cuándo usar |
|---|---|---|
| `mark-white-transparent.png` | Blanco sobre alpha | Watermark sobre fotos oscuras, overlay en videos, mark sobre fondo dark de color |
| `mark-black-transparent.png` | Negro sobre alpha | Print mono (factura, ticket), faxes, low-color, stamps, sello |

### `wordmark/` — símbolo + palabra "oden"
| Archivo | Layout | Background | Cuándo usar |
|---|---|---|---|
| `wordmark-horizontal-dark.png` | mark izq + "oden" der | Dark | Header de email dark, banners dark, signature dark |
| `wordmark-horizontal-light.png` | mark izq + "oden" der | White | Header de email light, papel membretado, banners light |
| `wordmark-horizontal-transparent-white.png` | mark izq + "oden" der | Transparente, texto blanco | Overlay sobre fotos/videos, watermark sobre fondo oscuro |
| `wordmark-stacked-dark.png` | mark arriba + "oden" abajo | Dark | Profile pic con texto, cards dark, splash screen |
| `wordmark-stacked-light.png` | mark arriba + "oden" abajo | White | Profile pic con texto en producto, cards light |

**Tipografía:** Inter Bold (weight 700). El TTF vive en `apps/website/src/app/fonts/Inter-Bold.ttf` y en `apps/mobile/assets/fonts/` (Cabinet Grotesk también, pero Inter es el oficial del logo).

**Palabra:** "oden" en lowercase, siempre. Nunca "ODEN", "Oden POS" o "Oden WhatsApp" como parte del logo (esos son nombres de producto, no marca).

---

## Reglas de uso

### Do ✅
- Usar las variantes pre-generadas. Si necesitas un tamaño distinto, redimensiona la 1080 con sips/magick (`sips -Z 256 in.png -o out.png`).
- Respetar el clear space mínimo: al menos **¼ del tamaño del mark** alrededor (en las variantes `mark-*-1080` ya viene con padding correcto).
- Sobre fondos sólidos: dark `#0F1419` o blanco `#FFFFFF`. Para fondos color, usar la mono blanca o negra según contraste.
- Mantener el ratio. No estirar.

### Don't ❌
- **No recrear el ensō en vectorial limpio.** El brush es la marca.
- **No usar el SVG viejo** `apps/website/public/whatsapp/assets/oden-mark.svg` (es el logo geométrico anterior, deuda visual a remover).
- No cambiar el color del verde a otro tono.
- No agregar drop shadow, glow, gradiente diferente al original.
- No usar sobre fondos verdes/turquesa (el mark se pierde).
- No rotar más de 5°.
- No usar tamaños menores a 64×64 píxeles (el brush se pierde).

---

## Deuda visual existente

Estos archivos siguen siendo el logo viejo geométrico (versión incorrecta) y deben migrarse en su próximo touch:

| Archivo | Acción sugerida |
|---|---|
| `apps/website/public/whatsapp/assets/oden-mark.svg` | Reemplazar por export del master-mark-512.png o eliminar y usar referencia directa al PNG |
| `apps/website/public/whatsapp/assets/oden-favicon.png` | Reemplazar por export 32×32 del master |
| `apps/website/public/social-posts/oden-profile.png` | Reemplazar por copia de `mark/mark-dark-1080.png` |
| `apps/storefront/public/oden-logo.png` (512×512 dark) | Considerar deprecar a favor de `mark/mark-dark-1080.png` (mejor resolución) |

No es bloqueante; migrar oportunisticamente cuando se toque cada surface.

---

## Generación / regeneración

Las variantes son **derivables** del master mediante ImageMagick:

```bash
# Pre-requisitos
MASTER=docs/design/brand/logo/master-mark-512.png
INTER=apps/website/src/app/fonts/Inter-Bold.ttf

# Mark sobre dark
magick "$MASTER" -background "#0F1419" -gravity center -extent 1080x1080 mark-dark-1080.png

# Mark sobre light
magick "$MASTER" -background white -gravity center -extent 1080x1080 mark-light-1080.png

# Mono blanco (alpha-preserving recolor)
magick "$MASTER" -alpha extract /tmp/alpha.png
magick -size 512x512 xc:white /tmp/alpha.png -alpha off -compose CopyOpacity -composite mark-white-transparent.png

# Wordmark horizontal dark (mark 400px + "oden" 240pt Inter Bold)
magick -size 1600x500 xc:'#0F1419' \
  \( "$MASTER" -resize 400x400 \) -gravity West -geometry +120+0 -composite \
  -font "$INTER" -pointsize 240 -fill white \
  -gravity West -annotate +600+0 "oden" \
  wordmark-horizontal-dark.png

# Wordmark stacked dark (mark 600px arriba + "oden" 180pt abajo, en 1080x1080)
magick -size 1080x1080 xc:'#0F1419' \
  \( "$MASTER" -resize 600x600 \) -gravity North -geometry +0+150 -composite \
  -font "$INTER" -pointsize 180 -fill white \
  -gravity South -annotate +0+180 "oden" \
  wordmark-stacked-dark.png
```

Si se actualiza el `master-mark-512.png` por una versión nueva (mejor resolución, ajuste del trazo, etc.), **re-correr estos comandos** regenera todas las variantes de forma determinística. No requiere IA.

---

## Origen

El ensō + flama es el logo Oden establecido. Las exploraciones originales viven en `docs/design/logo.pen` (archivo de Pencil, requiere la app para abrir). El master 512 transparent fue exportado de esas exploraciones.

Variantes generadas en sesión Claude del 2026-05-27 con ImageMagick (mark + mono) + Inter Bold para los wordmarks.
