# NUEVAUNO — Marca (fuente de verdad) · v4.1.0 · 2026-09-28
> **El logo es un ARCHIVO, no una receta.** Nadie (persona o agente) arma el logo
> poniendo icono + `nuevauno` + cursor a mano. Se usa el archivo del kit que
> corresponde al contexto (tabla de abajo). Eso es lo único que garantiza que el
> header, el login, la firma, un PDF y una app muestren exactamente el mismo dibujo.
Fuente legible por máquina: **https://nuevauno.com/branding/brand-spec.json**. Todo lo demás (los archivos
del kit, el CSS canónico, el badge, la página `/brand/rules`, este markdown, el skill) se
**genera** de ese JSON con `pnpm run gen:brand`. Se cambia en **un solo lugar**.
## Reglas duras (en orden)
1. El logo NO se compone: se usa un ARCHIVO del kit. Nunca se arma a mano icono + texto 'nuevauno' + cursor (en HTML, CSS, React, QWeb, Astro, PDF ni en ningún lado). Armarlo a mano es lo que hace que cada sitio salga distinto.
2. El archivo se elige por contexto en la tabla `assets.byUse` de esta spec (o en /BRAND.md). Solo esas URLs; nada fuera de la tabla.
3. Tamaño = altura del = altura del mark (la caja del icono). Ancho automático (`width:auto`). Nunca fijar ancho y alto a la vez, nunca estirar.
4. Animado (cursor parpadeando) en pantalla: header, login, web, firma de correo, apps. Estático en PDF, impresión, OG/social, favicon y donde no haya animación.
5. Color: `light` (navy + naranja) sobre fondos claros; `dark` (blanco + naranja) sobre fondos oscuros. El lockup nunca va sobre naranja; sobre tile naranja solo el mark blanco.
6. Única excepción al archivo: cuando el logo DEBE ser texto vivo (currentColor, selección, SSR sin imágenes), se usa /brand/lockup.css con el HTML de `snippets.html` TAL CUAL, sin cambiar ningún valor ni clase. Nada más.
7. Los alias legacy (`assets.legacyAliases`) sirven el MISMO archivo que el canónico (byte a byte); están deprecados: no usarlos en código nuevo.
8. Espacio libre mínimo alrededor del logo = 0.5 × altura del mark. Altura mínima del mark: 20px en pantalla, 6mm impreso.
9. Si el kit no tiene el archivo que necesitas (otro tamaño, otro fondo, otro formato), se agrega al generador en nuevauno-branding y se publica. No se improvisa un render local.
10. Favicon / icono de app / PWA (cuadrados ≤ 64px) usan la versión ÓPTICA del mark (`mark.optical`), que engorda trazos para leerse chico. Esa versión NO es el logo y no se usa en tamaños grandes ni junto al wordmark.
11. El wordmark (las letras) tiene una exploración tipográfica (fuente UNO) que vive SOLO en /demo. Lo que se publica y se usa es el kit: Ubuntu Mono 400. No mezclar.
12. Interfaz (pantallas, apps, paneles, onboarding): el estilo vive en /UI.md y /ui-tokens.json (Urbanist 400, etiquetas de sistema en Ubuntu Mono, radio 0, un solo acento naranja, número grande + etiqueta chica, datos reales o nada, Kōdo a un clic). Un agente que diseña una pantalla los lee antes de maquetar.
## Qué archivo va dónde
Base: `https://nuevauno.com/branding`. `light` = navy sobre fondo claro · `dark` = blanco sobre fondo oscuro.
Los `.anim.svg` parpadean solos dentro de ``. Los GIF tienen fondo sólido
(blanco el light, navy `#0A0E27` el dark) porque son para correo.
| contexto | archivo |
|---|---|
| web-header-claro | `/logos/nuevauno-logo-light.anim.svg` |
| web-header-oscuro | `/logos/nuevauno-logo-dark.anim.svg` |
| login-y-pantallas-app | `/logos/nuevauno-logo-light.anim.svg` |
| firma-de-correo | `/logos/nuevauno-logo-light-360.anim.gif` |
| correo-html-transaccional | `/logos/nuevauno-logo-light-360.anim.gif` |
| pdf-e-impresion | `/logos/nuevauno-logo-light.svg` |
| og-social-preview | `/logos/nuevauno-logo-light-2048.png` |
| presentaciones-y-docs | `/logos/nuevauno-logo-light-2048.png` |
| fondo-oscuro-estatico | `/logos/nuevauno-logo-dark.svg` |
| prendas-packaging-cuadrado | `/logos/nuevauno-logo-vertical-light.svg` |
| solo-icono | `/logos/nuevauno-mark.svg` |
| solo-icono-fondo-oscuro | `/logos/nuevauno-mark-white.svg` |
| solo-icono-animado | `/logos/nuevauno-mark.anim.svg` |
| favicon | `/favicons/favicon.svg` |
| pwa-apple-touch | `/logos/nuevauno-pwa.png` |
| avatar-redes | `/avatars/nuevauno-avatar-light.png` |
| avatar-claw | `/avatars/claw-avatar-light.png` |
| badge-powered-by | `/footer/nuevauno.js` |
| texto-vivo-excepcion | `/brand/lockup.css` |
## Cómo se usa (copiar tal cual)
**Pantalla** (header, login, web, apps). `H` = alto del icono en px; el alto del
archivo ES el alto del icono, el ancho es automático:
```html
```
**Correo** (firma, transaccional). GIF 2 frames, 2x:
```html
```
**Única excepción — texto vivo** (currentColor, SSR sin imágenes). CSS canónico y HTML
exacto; `1em` = alto del icono. No se cambia ningún valor ni clase:
```html
nuevauno
```
Fondo oscuro: `nuevauno`
**React (este repo):** `import { BrandLogo } from "~/components/BrandLogo"; // envuelve el .anim.svg del kit`
## Todos los archivos del kit
Patrón `nuevauno-logo[-vertical]-{light|dark}[-{ancho}][.anim].{svg|png|gif}`.
- Horizontal: `/logos/nuevauno-logo-light.svg`, `/logos/nuevauno-logo-dark.svg`, `/logos/nuevauno-logo-light.anim.svg`, `/logos/nuevauno-logo-dark.anim.svg`, PNG anchos 360/1024/2048/4096, GIF anchos 360/720.
- Vertical: `/logos/nuevauno-logo-vertical-light.svg`, `/logos/nuevauno-logo-vertical-dark.svg`, `/logos/nuevauno-logo-vertical-light.anim.svg`, `/logos/nuevauno-logo-vertical-dark.anim.svg`, PNG anchos 1024/2048/4096.
- Icono suelto: `/logos/nuevauno-mark.svg`, `/logos/nuevauno-mark-white.svg`, `/logos/nuevauno-mark.anim.svg`.
- Cursor suelto: `/brand/cursor.svg` · CSS texto vivo: `/brand/lockup.css` · referencia: `/brand/lockup.html`.
- Versión óptica del icono (favicon / PWA / app icon ≤ 64px, **no es el logo**): `/favicons/favicon.svg`.
### Alias legacy (deprecados)
Siguen en código de otros repos. Sirven **el mismo archivo** que el canónico (copia byte
a byte hecha por el generador). No usarlos en código nuevo.
| alias | canónico |
|---|---|
| `/logos/nuevauno-logo-lockup.png` | `/logos/nuevauno-logo-light-1024.png` |
| `/logos/nuevauno---footer.png` | `/logos/nuevauno-logo-light-1024.png` |
| `/logos/nuevauno---footer-blanco.png` | `/logos/nuevauno-logo-dark-1024.png` |
| `/signature/nuevauno-firma-logo.gif` | `/logos/nuevauno-logo-light-360.anim.gif` |
| `/signature/nuevauno-firma-logo.png` | `/logos/nuevauno-logo-light-360.png` |
## Colores
| token | hex |
|---|---|
| navy | `#11183a` |
| navy profundo | `#0A0E27` |
| naranja | `#FE4A23` |
| cream | `#f5f3ec` |
| blanco | `#ffffff` |
## Geometría (referencia — de acá se generan los archivos)
`size` = alto de la caja del icono (viewBox 24). Todo es proporción de `size`.
| pieza | valor |
|---|---|
| wordmark | `Ubuntu Mono` 400, `font-size = 0.78 · size`, letter-spacing `-0.04em` |
| separación icono→palabra | `0.26 · size` |
| cursor ancho × alto | `0.18 · size` × `0.5 · size` (proporción 1 : 2.78) |
| separación palabra→cursor | `0.2 · size` (gap 0.26 + margen -0.06) |
| esquinas del cursor | radio `0` — **rectas, sin redondeo** |
| color del cursor | `#FE4A23` |
| alineación del cursor | `middle` (centrado en la palabra, NO baseline) |
| parpadeo | `1.05s steps(1, end)` · `0%,50%{opacity:1} 50.01%,100%{opacity:0}` |
| vertical | wordmark `0.45 · size`, separación `0.14 · size`, padding `0.1 · size` |
| archivo horizontal | viewBox `0 0 2326 512` (aspecto 4.54); alto del archivo = size |
En em del wordmark (para el badge y consumidores viejos): ancho `0.23em`,
alto `0.64em`, margen-izq `0.26em`.
## Marca terminal (icono)
Marca terminal: ventana con orejas + prompt >_ . El guion _ y el punto del cursor son naranja; el resto navy (o blanco en fondo oscuro).
- Vector (usar tal cual, no redibujar): **https://nuevauno.com/branding/logos/nuevauno-mark.svg** · blanco: **https://nuevauno.com/branding/logos/nuevauno-mark-white.svg**
- viewBox `0 0 24 24` · trazo `0.9` · acento (`_` y punto) naranja grosor `1.6`, punto r `0.6`.
- viewBox ajustado para chips/cuadrados: `3.5 3.5 17 16`.
- Óptico (favicon/PWA/app icon): `/favicons/favicon.svg` — trazos 1.3/1.9, punto r 0.8. Solo ≤ 64px.
## Wordmark (las letras)
La tipografía propia UNO (/fonts/uno-*.woff2) es exploración y vive SOLO en /demo. El kit publicado usa Ubuntu Mono.
## Consumidores (todos derivan del JSON)
- **logoKit**: scripts/generate-logo-kit.mjs → static/logos/*, static/brand/*, static/signature/*, bloque del badge en static/footer/nuevauno.js
- **markdown**: /BRAND.md (scripts/generate-brand-spec-doc.mjs)
- **react**: app/components/BrandLogo.tsx ( = del kit) · app/lib/brand-cursor.tsx (, solo para /demo y /marca)
- **wallpapers**: scripts/wallpapers/lockup.py lee este JSON
- **humanPage**: /marca
- **skill**: .claude/skills/nuevauno-brand
- **check**: scripts/check-brand-kit.mjs (CI): el kit se regenera igual, los alias son idénticos, nadie compone el logo a mano
nuevauno
```
**Correo** (firma, transaccional). GIF 2 frames, 2x:
```html
```
**Única excepción — texto vivo** (currentColor, SSR sin imágenes). CSS canónico y HTML
exacto; `1em` = alto del icono. No se cambia ningún valor ni clase:
```html
nuevauno`
**React (este repo):** `import { BrandLogo } from "~/components/BrandLogo";