Reglas de uso

Reglas de la marca

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 <img> = 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 de la librería (brand/ de nuevauno/enterprise) 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.

• BRAND.md
• brand-spec.json

Interfaz

NUEVAUNO — estilo de interfaz

Fuente legible por máquina: https://ui.nuevauno.com/ui-tokens.json.

**Kit de pantallas: https://ui.nuevauno.com/kit/ (vista viva, reglas y HTML exacto de cada patrón) y /kit/kit.json** (lo mismo para agentes, con el estado de cada patrón: approved, proposed o rejected). Una app nueva importa /kit/nuevauno-ui.css, usa SÓLO patrones aprobados y propone lo que falte como proposed para que el founder lo apruebe o rechace. El logo, los iconos y los colores base siguen mandando desde /brand-spec.json y /BRAND.md: esta guía dice cómo se ARMA una pantalla con esas piezas.

La idea en una línea

Pantallas tranquilas y densas: neutros claros, un solo acento naranja, números grandes que cuentan el estado, etiquetas chicas de sistema, todo cuadrado, y Kōdo siempre a mano. Se siente como un sistema operativo, no como un formulario.

Reglas duras

1. Tipografía: Urbanist 400 para todo, incluso títulos y botones. Nunca negrita (ni 500). La jerarquía se hace con tamaño y color, jamás con peso.
2. Etiquetas de sistema (nombres de bloque, fechas, contadores, estados como "EN VIVO", "03 / 03", "INSTALANDO · 3 DE 7"): Ubuntu Mono 400, MAYÚSCULAS, 10–13 px, letter-spacing 0.12–0.14 em, gris. Es la letra del logo: conecta la interfaz con la marca.
3. Cuadrado: radio 0 en todo (botones, tarjetas, chips, inputs, menús, avatares, modales).
4. Un solo acento: naranja #FE4A23 sólo para lo que debe llamar la atención (acción principal, estado activo, dato que importa, barra de progreso, alerta). El resto: navy #11183a, grises y blanco. Nada de azul, morado ni degradados.
5. Logo e iconos sólo del kit: logo animado oficial (/logos/nuevauno-logo-light.anim.svg en claro, -dark en oscuro, isotipo /logos/nuevauno-mark.svg cuando no hay espacio); iconos de apps e interfaz desde /icons/nu/manifest.json (nombres nu_<inglés>, p. ej. nu_kodo). Nunca iconos del motor ni emojis.
6. El cursor naranja del logo (bloque que parpadea) es el hilo de la marca: puede aparecer al final de un título grande, en el campo de Kōdo vacío o en la línea que se está procesando. Nunca más de uno visible a la vez.
7. URLs en inglés: toda ruta es en inglés, corta y semántica (/system, /start, /welcome); nunca en español. Si una cambia, 301 desde la vieja.
8. Un mismo lenguaje en toda la app: dentro del sistema todo usa el estilo claro del Inicio (contenido sobre el fondo de puntos, cabecera y menú blancos, superficies blancas). Todo sigue un solo modo: si la interfaz está en claro, todo es claro (incluido el asistente); si está en oscuro, todo es oscuro.
9. Todo en español: ningún texto visible en inglés; lo que la fuente trae sin traducir se traduce en un módulo nuestro.
10. Logo visible: en el menú el logo animado va grande (icono de 28–32 px de alto), nunca diminuto.
11. Datos reales o nada: si un dato no existe, la sección se oculta. Nunca cifras inventadas ni rellenos. Texto en español con tuteo (tú), formatos de la persona (fechas, números) y la moneda y zona de la empresa, en lenguaje de persona, sin términos internos ("tenant", "máquina", nombres técnicos) ni HTML crudo.

Cómo se ve un dato

• Número grande + etiqueta chica: 1 de 5, 0,5 MB de 1 GB, 12 % del mes, 24 min. El número en Urbanist 28–40 px navy; la unidad en 13–15 px gris al lado.
• Barras de puntos: filas de cuadrados de 6 px (20 pasos), llenos en naranja según el porcentaje, vacíos en #e8e6e0. Reemplazan barras de progreso y medidores.
• Gráficos: hechos de puntos, rayas o bloques, finos, sobre fondo claro. Sin sombras, sin 3D, sin tortas de colores.
• Estado: cuadrado de 7–8 px de color (naranja activo/alerta, verde #2f9e5b en línea, gris inactivo) junto a una etiqueta de sistema.
• Colores de aviso (color.feedback de /ui-tokens.json, cada uno con valor para fondo claro y para fondo oscuro): éxito #16a34a / #1DC959, información #0ea5e9 / #6AB5FB, advertencia #f59e0b / #FBB56A y error #dc2626 / #FF5757. Sólo para insignias, alertas y estados; son estados, no acentos: el único acento de la marca sigue siendo el naranja. No son marca: nunca en logos, botones principales ni superficies grandes. Se usan cuando algo salió bien, informa, requiere atención o falló.

Cómo se arma una pantalla

• Fondo del contenido: #f8f9fa con una grilla de puntos #e1e5e8 de 1 px cada 18 px (el de la plataforma 20; decisión del founder 2026-10-02). Cabecera y menú lateral blancos. Superficies blanco #ffffff con borde de 1 px #e8e6e0. Sombras sólo en lo que flota (menú desplegado, modal). El gris cálido #f4f4f1 queda sólo para fondos de marca e imágenes de relleno, nunca para el contenido de una pantalla del sistema.
• Grillas con separador de 1 px (el borde se hace con gap: 1px sobre fondo #e8e6e0): así se ven las franjas de datos y las grillas de apps, pegadas y ordenadas.
• Densidad: mucha información sin sentirse apretada. En las pantallas de trabajo (listas, fichas, apps), con mouse: texto de 14 px, títulos de 24 px, botones y campos de 32 px y filas de tabla de ~40 px. Con pantalla táctil (pointer: coarse), todo lo que se toca mide 44 px. En el teléfono, los campos usan texto de 16 px (iOS no hace zoom). Inicio: 6 apps por fila y listas de actividad de 48 px; si un cliente tiene 30 apps, se ven sin bajar. Valores exactos: density en /ui-tokens.json.
• Un ancho de contenido de ~1120 px centrado en escritorio; en teléfono, columna única con 16 px de margen y sin scroll horizontal.
• Botón principal: naranja lleno, texto blanco o navy; 44–64 px de alto en el Inicio y en los asistentes, y el alto de control (density) dentro de una app; con flecha si lleva a otro paso. Secundarios: borde de 1 px o sólo texto naranja. Nunca dos principales juntos.
• Inputs: fondo blanco y borde de 1 px, o sólo línea inferior en pantallas tipo asistente.

Responsivo (obligatorio)

Toda pantalla funciona al 100 % en teléfono, tablet y escritorio, y se prueba en un navegador real en los tres antes de darla por terminada (mínimo 390×844, 820×1180 y 1180×820, 1440×900).

• Nunca scroll horizontal; nada cortado ni superpuesto; objetivos táctiles de 44 px o más.
• Teléfono: menú lateral como panel deslizable con botón; una columna; apps 2–3 por fila; franja de datos en 2 columnas; botón principal a lo ancho.
• Tablet: menú recogido por defecto; apps 4 por fila; franja de datos en 3 columnas.
• Escritorio: menú abierto (se recuerda por persona); apps 6 por fila; contenido de ~1120 px.
• Probar con pocos y con muchos elementos (1 y 30 apps, textos largos, nombres de empresa largos).

Patrones aprobados

La lista viva (con vista, HTML y estado) está en /kit/kit.json; esto es el resumen.

Marco (aprobado 2026-10-02)

• Cabecera blanca de 56 px; la miga empieza SIEMPRE con el nombre de la empresa, que es a la vez el selector de empresa; después / + icono + sección.
• Kōdo vive en cada empresa: botón en la cabecera y Ctrl+J abren el panel derecho, que sabe qué pantalla y qué registro estás viendo ("Viendo: Contactos · Juanito SpA").

Inicio (lo primero que ve el cliente)

1. Fecha en etiqueta de sistema naranja, saludo grande con el nombre real y la empresa activa.
2. Pídele algo a Kōdo a lo ancho, justo después del saludo: campo grande con el cursor naranja, botón Enviar naranja lleno y 3–4 sugerencias de un clic según sus apps.
3. Tarjetas de datos: plan, usuarios, archivos, IA de Kōdo y pendientes (los atrasados en un bloque navy con el número destacado).
4. Apps en grilla densa: icono del kit + nombre en la misma fila, 6 por fila, buscador arriba.
5. Actividad en vivo, estilo terminal: hora en Ubuntu Mono, qué pasó en lenguaje de persona, área; "EN VIVO" y los eventos nuevos entran solos sin recargar; 6 líneas y "Ver toda".

Menú lateral

• Abierto 232 px con filas de 30 px (272 px y filas de 44 px en pantalla táctil), recogido 64 px (sólo iconos e isotipo); se recuerda por persona.
• Arriba el logo animado; buscador con atajo Ctrl K en teclas de sistema.
• Secciones con etiqueta de sistema: PRINCIPAL, TU NEGOCIO, EQUIPO.
• Activo: fondo naranja muy suave #fff1ec + línea naranja de 2 px a la izquierda.
• Submenús en árbol con líneas finas grises; recogido, salen al costado en un panel flotante.
• EQUIPO: personas con foto (o iniciales en cuadrado) y cuadrado de presencia.
• Abajo la tarjeta de perfil: nombre, y en etiqueta de sistema su rol y empresa.

Asistente / instalación (onboarding, procesos largos)

• Pantalla completa que sigue el modo de la interfaz (claro en claro, oscuro en oscuro), con el logo animado del modo y el fondo de puntos.
• Se ve como una terminal: registro en Ubuntu Mono con $, ok en verde y cursor naranja en el paso actual.
• Una sola pregunta por pantalla, título enorme con cursor naranja, contador "01 / 03".
• Mientras algo se instala: título con el paso real, registro tipo sistema en Ubuntu Mono (ok plan de cuentas de tu país), línea de progreso naranja de borde a borde, y a un costado algo útil que hacer mientras tanto ("crea tu clave"). Cada paso es un evento real, nunca un porcentaje inventado.
• Al terminar: "<Nombre de fantasía>: todo listo." y Kōdo saluda escribiendo en vivo.

Nombres del cliente

Siempre tres, sin mezclarlos: la persona de contacto, la razón social (va en facturas) y el nombre de fantasía (lo que ven sus clientes y el que usa Kōdo).

Referentes (qué se toma de ellos)

Paneles de logística, salud y operación con estética de instrumento: neutros claros, un acento cálido, números grandes y finos con su unidad chica, visualizaciones de puntos y rayas, ilustraciones técnicas de línea, tablas densas con etiquetas en mayúsculas espaciadas, y tarjetas pegadas unas a otras. Se toma la estructura y la densidad; NO se toma el azul, las esquinas redondeadas ni las negritas de esos referentes.

Antes de entregar una pantalla

• ¿Usa sólo patrones approved de /kit/kit.json? Lo nuevo va como proposed.
• ¿Hay negrita, radio, azul, verde fuera de estados, emoji o un icono que no sea del kit? Fuera.
• ¿Alguna URL en español o texto en inglés? Fuera.
• ¿La pantalla usa el mismo lenguaje que el Inicio (un solo modo en todo, también en el asistente)?
• ¿Algún dato inventado, término interno o HTML crudo a la vista? Fuera.
• ¿Kōdo está a un clic desde donde está la persona?
• ¿Se probó en teléfono, tablet y escritorio en un navegador real, sin scroll horizontal y con muchos elementos (30 apps)?
• ¿Se probó en un navegador real antes de decir que se ve bien?

• UI.md

Texto y tono

Cómo escribe NUEVAUNO en toda superficie: pantallas, correos, documentos, el sitio y los mensajes. Junta lo que dicen handbook/company y AGENTS.md de nuevauno/org y public/BRAND.md. nu_brand usa esta misma lista para cambiar los textos visibles del motor.

Idioma

• Español de Chile con "tú", claro y corto. La marca es global: nada que sólo entienda un país.
• Los textos visibles nunca van fijos en el código: van por la capa de traducción (catálogos por idioma).
• Fechas, números y monedas en el formato de la persona, nunca uno fijo.

Palabras

Forma

• Sin negritas en ningún lado: Urbanist 400. La jerarquía va por tamaño y color.
• Datos reales o nada: si no hay dato, se oculta la sección. No se inventan ejemplos que parezcan reales.
• Número grande con etiqueta chica.
• Sin términos internos, nombres técnicos ni HTML crudo frente a la persona.
• Sin nombres de clientes ni conversaciones internas en lo que se publica.
• El origen se dice así: "hecho con amor en Chile, para el mundo".