{ "_comment": "FUENTE DE VERDAD ÚNICA de la identidad NUEVAUNO. Publicado en https://nuevauno.com/branding/brand-spec.json — legible por humanos y agentes. De este archivo se GENERAN todos los archivos del logo (scripts/generate-logo-kit.mjs), el CSS canónico (/brand/lockup.css), la doc (/BRAND.md), la página /marca y el skill. Nadie más tiene números.", "version": "4.1.0", "updated": "2026-09-28", "rules": { "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.", "_note": "Reglas duras, en orden. Un agente que renderiza la marca las cumple todas; si una no se puede cumplir, NO renderiza y pide el archivo que falta al repo nuevauno-branding." }, "canonical": { "_note": "PRIMITIVAS. 'size' = altura de la caja del mark (viewBox 24). Todo lo demás es proporción de size. El wordmark va a font-size = size × wordFontSizeRel.", "colors": { "navy": "#11183a", "navyDeep": "#0A0E27", "orange": "#FE4A23", "cream": "#f5f3ec", "white": "#ffffff" }, "cursor": { "relativeTo": "markHeight", "width": 0.18, "height": 0.5, "marginLeft": -0.06, "cornerRadius": 0, "color": "#FE4A23", "verticalAlign": "middle", "blink": { "duration": "1.05s", "timing": "steps(1, end)", "keyframes": "0%,50%{opacity:1} 50.01%,100%{opacity:0}", "onMs": 525, "offMs": 525 } }, "lockup": { "_note": "Horizontal (el logo). mark → gap → wordmark → (gap + marginLeft del cursor) → cursor. Sin padding: la altura del archivo = size.", "wordFontSizeRel": 0.78, "markWordGap": 0.26, "wordFont": "Ubuntu Mono", "wordFontWeight": 400, "wordLetterSpacing": "-0.04em", "padding": 0 }, "vertical": { "_note": "Vertical (prendas, packaging, espacios cuadrados). mark centrado arriba; debajo wordmark + cursor centrados. Proporciones relativas a size del mark.", "wordFontSizeRel": 0.45, "markWordGap": 0.14, "padding": 0.1 } }, "mark": { "description": "Marca terminal: ventana con orejas + prompt >_ . El guion _ y el punto del cursor son naranja; el resto navy (o blanco en fondo oscuro).", "vector": "/logos/nuevauno-mark.svg", "vectorWhite": "/logos/nuevauno-mark-white.svg", "viewBox": "0 0 24 24", "tightViewBox": "3.5 3.5 17 16", "strokeWidth": 0.9, "strokeLinecap": "round", "strokeLinejoin": "round", "colorStroke": "#11183a", "colorAccent": "#FE4A23", "accentStrokeWidth": 1.6, "dotRadius": 0.6, "paths": [ "M5 7 7 4 8 7", "M19 7 17 4 16 7", "rect x=4 y=7 width=16 height=12 rx=2.4", "M7.5 11 9.5 13 7.5 15" ], "accent": { "underscore": "M11.5 15H15", "dot": "cx=9.5 cy=13 r=0.6" }, "optical": { "_note": "Versión óptica SOLO para favicon / PWA / icono de app (≤ 64px). Trazos más gruesos y chevron naranja para leerse chico. NO es el logo.", "vector": "/favicons/favicon.svg", "viewBox": "2.5 2.5 19 19", "strokeWidth": 0.9, "chevronStrokeWidth": 1.3, "accentStrokeWidth": 1.9, "dotRadius": 0.8 }, "_rule": "Usar el SVG tal cual. No redibujar ni cambiar grosores." }, "wordmark": { "text": "nuevauno", "font": "Ubuntu Mono", "fontFile": "/fonts/ubuntu-mono-400.woff2", "weight": 400, "letterSpacing": "-0.04em", "exploration": "La tipografía propia UNO (/fonts/uno-*.woff2) es exploración y vive SOLO en /demo. El kit publicado usa Ubuntu Mono." }, "assets": { "_note": "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 (correo): light sobre blanco, dark sobre navy profundo.", "byUse": { "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" }, "files": { "_note": "Todo lo que genera scripts/generate-logo-kit.mjs. Patrón: nuevauno-logo[-vertical]-{light|dark}[-{ancho}][.anim].{svg|png|gif}", "horizontal": { "svg": [ "/logos/nuevauno-logo-light.svg", "/logos/nuevauno-logo-dark.svg" ], "svgAnim": [ "/logos/nuevauno-logo-light.anim.svg", "/logos/nuevauno-logo-dark.anim.svg" ], "pngWidths": [ 360, 1024, 2048, 4096 ], "gifWidths": [ 360, 720 ] }, "vertical": { "svg": [ "/logos/nuevauno-logo-vertical-light.svg", "/logos/nuevauno-logo-vertical-dark.svg" ], "svgAnim": [ "/logos/nuevauno-logo-vertical-light.anim.svg", "/logos/nuevauno-logo-vertical-dark.anim.svg" ], "pngWidths": [ 1024, 2048, 4096 ] }, "gifBackground": { "light": "#ffffff", "dark": "#0A0E27" }, "cursorVector": "/brand/cursor.svg", "lockupCss": "/brand/lockup.css", "lockupHtml": "/brand/lockup.html" }, "legacyAliases": { "_note": "URLs viejas que siguen en código de otros repos. Se regeneran con el MISMO contenido que el canónico para que producción muestre el logo correcto sin tocar esos repos. Deprecadas: migrar al canónico cuando se toque ese código.", "/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" } }, "snippets": { "_note": "Formas EXACTAS de usar el kit. Copiar tal cual. `H` = altura del mark en px.", "img": "\"NUEVAUNO\"", "imgEmail": "\"NUEVAUNO\"", "css": "", "html": "\"\"nuevauno", "htmlDark": "\"\"nuevauno", "react": "import { BrandLogo } from \"~/components/BrandLogo\"; // envuelve el .anim.svg del kit" }, "derived": { "_note": "Calculado de canonical por scripts/generate-logo-kit.mjs (NO editar a mano). 'em' = relativo al mark (1em = size), como en /brand/lockup.css. 'emWord' = relativo al font-size del wordmark (valor / wordFontSizeRel).", "cursor_aspect_ratio": "1 : 2.78", "cursor_gap_word_to_cursor_rel_mark": 0.2, "cursor_em_mark": { "width": "0.18em", "height": "0.5em", "marginLeft": "-0.06em", "gapFromWord": "0.2em" }, "word_vertical_offset_em": 0.098, "cursor_em_word": { "width": "0.23em", "height": "0.64em", "marginLeft": "0.26em" }, "file_horizontal": { "viewBox": "0 0 2326 512", "aspect": 4.54, "markHeightIsFileHeight": true }, "file_gif_360": { "width": 360, "height": 79, "frames": 2, "frameMs": [ 520, 520 ], "_note": "GIF redondea a 10ms" } }, "consumers": { "_note": "Todo deriva de este JSON. Si cambia la geometría se cambia SOLO acá y se corre `pnpm run gen:brand`.", "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" } }