--- 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-06 --- # NUEVAUNO — estilo de interfaz Fuente legible por máquina: `https://nuevauno.com/branding/ui-tokens.json`. **Kit de pantallas: `https://nuevauno.com/branding/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_`, 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. 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 con tuteo (tú), formatos de la persona (fechas, números) y la moneda y zona del workspace, 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: ": 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?