---
summary: Kit oficial de Kōdo, el agente de NUEVAUNO - logo de dos ojos, avatar por defecto, estados de trabajo y piezas del generador de avatares.
read_when: Al mostrar a Kōdo en cualquier pantalla, crear o elegir el avatar de un agente, o cambiar su marca.
updated: 2026-10-01
---

# Kōdo

El logo de Kōdo son dos ojos cuadrados: el izquierdo navy (blanco en fondo oscuro) y el derecho
naranja `#FE4A23`. Es un archivo, no se arma: se usa uno de estos.

| Uso | Archivo |
|---|---|
| Ícono sobre fondo claro | `/kodo/kodo-mark.svg` (animado: `kodo-mark.anim.svg`) |
| Ícono sobre fondo oscuro | `/kodo/kodo-mark-white.svg` (animado: `kodo-mark-white.anim.svg`) |
| Ícono de app / PWA | `/kodo/kodo-app-icon.svg`, `/kodo/kodo-app-icon-dark.svg` |
| Avatar por defecto | `/kodo/kodo-avatar-light.svg`, `/kodo/kodo-avatar-dark.svg` |
| Estado del trabajo (imagen fija) | `/kodo/kodo-estado-{escuchando,pensando,trabajando,necesita-aprobacion,listo,error}.svg` |
| Cara animada (pantallas) | `/kodo/kodo-face.js` → `<kodo-face>`; demostración en `/kodo/demo.html` |

## Avatares

Cada empresa crea sus Kōdo y les elige cabeza, ojos, boca, paleta y fondo (19.200
combinaciones). Las piezas están en `avatar-spec.json`: se dibujan en `viewBox 0 0 24 24` en el
orden fondo, cabeza, ojos, boca, reemplazando `{face} {stroke} {eye} {accent}` por los colores de
la paleta. Guardar el avatar como esos cinco valores, no como imagen.

Los estados de trabajo reemplazan sólo los ojos y usan siempre los ojos del logo, sea cual sea el
avatar: así "pensando" o "necesita tu aprobación" se ven igual en todos los Kōdo.

Todo sale de `scripts/generate-kodo-kit.mjs` (`pnpm run gen:kodo`). No editar a mano los
archivos generados.

## La cara animada: `<kodo-face>`

En toda pantalla (chat del motor, kodo.uno, sitio) Kōdo se muestra con este componente, no con
imágenes sueltas ni animaciones propias. Así se ve y se mueve igual en todos lados.

```html
<script type="module" src="https://branding.nuevauno.com/kodo/kodo-face.js"></script>
<kodo-face avatar="orejas.punto.cursor.miel" state="pensando" size="48" label="Kōdo Ventas"></kodo-face>
```

- `avatar`: `cabeza.ojos.boca.paleta` con los nombres de `avatar-spec.json`; `.sin-fondo` al final
  quita el fondo. Vacío o inválido = Kōdo por defecto (nunca se rompe).
- `state`: `reposo` (por defecto), `escuchando`, `pensando`, `trabajando`, `necesita-aprobacion`,
  `listo`, `error`. Se cambia con el atributo o con `elemento.state = "..."`.
- `size`: píxeles o cualquier medida CSS. `label`: nombre para lectores de pantalla.

Cómo se mueve:

- Reposo: muestra los ojos que eligió la empresa, parpadea a intervalos irregulares (a veces dos
  veces) y de vez en cuando mira a un lado.
- Escuchando: ojos del logo, parpadea.
- Pensando: ojos del logo girando. Trabajando: un ojo y el cursor naranja parpadeando.
  Necesita aprobación: los dos ojos naranjos, latiendo. Listo: sonríe y salta una vez.
  Error: se sacude una vez.
- Al cambiar de estado los ojos se achican y vuelven, para que el cambio se note.
- Con "reducir movimiento" activado en el sistema no anima; con la pestaña oculta se pausa.

Para correos, PDF o servidores sin navegador: `renderKodoFace(avatar, estado)` (exportado por el
mismo archivo) devuelve el SVG fijo.

Fuente: `scripts/kodo-face.src.js`; `pnpm run gen:kodo` lo publica con las piezas incrustadas.