--- summary: Estilo de interfaz de NUEVAUNO (pantallas, apps, paneles, onboarding) tal como lo pide el founder; lo que un agente debe leer antes de diseñar o maquetar cualquier pantalla. read_when: vas a diseñar, maquetar o revisar una pantalla, app, panel, onboarding o componente visual de NUEVAUNO en cualquier repo. updated: 2026-10-02 --- # NUEVAUNO — estilo de interfaz Fuente legible por máquina: `https://branding.nuevauno.com/ui-tokens.json`. **Kit de pantallas: `https://branding.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/manifest.json`. 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. 8. **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. 9. **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. 10. **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. 11. **Logo visible:** en el menú el logo animado va grande (icono de 28–32 px de alto), nunca diminuto. 7. **Datos reales o nada:** si un dato no existe, la sección se oculta. Nunca cifras inventadas ni rellenos. Texto en español chileno (tú), 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. ## 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. Filas de 40–56 px, 6 apps por fila, listas de actividad de 48 px. Si un cliente tiene 30 apps, se ven sin bajar. - **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, 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 256 px, recogido 72 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 Chile`), 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: ": 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?