NUEVAUNO OS

Kit de pantallas

Cómo se ve y se arma toda pantalla de NUEVAUNO OS. Cada patrón tiene su vista viva, sus reglas y el HTML exacto. Una app nueva parte de aquí y nace entendiendo el sistema.

Patrones24

Aprobados19

Propuestos5

Rechazados0

Para agentes y apps

Importa nuevauno-ui.css con un <link> y pon class="nu-ui" en la raíz de la app.
Copia el HTML del snippet del patrón; reemplaza los datos de ejemplo por datos reales (o quita la pieza si el dato no existe).
Iconos: <span class="nu-icono" data-icono="<nombre del manifest>"></span> con nuevauno-ui.js, o tu componente que pegue el SVG del kit en línea.
Logo: siempre el archivo del kit; nunca armado.
Antes de entregar: probar en 390×844, 820×1180 y 1440×900 sin scroll horizontal.

<link rel="stylesheet" href="https://branding.nuevauno.com/kit/nuevauno-ui.css">
<script src="https://branding.nuevauno.com/kit/nuevauno-ui.js" defer></script>
<body class="nu-ui">

Fuente legible por máquina: /kit/kit.json. Sólo se usan patrones aprobados; lo nuevo se propone y el founder lo aprueba o rechaza.

Marco del sistema · 8

Shell completoAprobado La estructura de TODA pantalla de NUEVAUNO OS. Una app nueva sólo llena el contenido central; el resto lo pone el shell. shell Menú lateralAprobado Navegación principal de la empresa: Principal (Inicio, Kōdo, Contactos), Tu negocio (apps instaladas) y abajo Ajustes y la persona. sidebar CabeceraAprobado Arriba de todo el contenido: dice dónde estás y deja a mano a Kōdo. header Selector de empresaAprobado El nombre de la empresa en la miga es a la vez el selector: abre la lista de empresas de la persona y cambiar recarga el sistema en la elegida. company-selector Fondo de puntosAprobado El fondo de toda el área de contenido. Las superficies blancas van encima. dotted-background Riel izquierdoAprobado Accesos globales que no dependen de la empresa (buscar, avisos, aprobaciones, ajustes, persona). Sólo escritorio ancho. rail PestañasAprobado Bajo la cabecera, para las partes de un registro (Ficha, Guías, Facturas, Actividad) o de una sección. tabs Barra inferiorAprobado Estado del sistema en una línea: conexión, empresa, Kōdo y versión. bottom-bar

Kōdo · 2

Panel de Kōdo con contextoAprobado Kōdo vive en cada empresa y se abre en cualquier pantalla. Sabe lo que estás viendo (la ficha 'Viendo') y lo usa sin que lo repitas. kodo-panel Tarjeta de aprobaciónAprobado Cuando Kōdo va a hacer algo que importa (emitir, publicar, borrar en masa, dinero) y necesita el sí de una persona. approval-card

Inicio · 4

Pídele algo a KōdoAprobado La caja grande del Inicio, justo después del saludo. ask-kodo Tarjetas de datosAprobado La franja de números del Inicio y de una ficha: número grande + etiqueta chica. stat-cards Tus appsAprobado La grilla de apps instaladas del Inicio. home-apps Actividad en vivoAprobado Lo que pasa en la empresa, estilo terminal, actualizándose solo sin recargar la página. live-activity

Pantallas completas · 2

InicioAprobado Lo primero que ve el cliente. home Asistente / instalaciónPropuesto Onboarding o procesos largos a pantalla completa. Sigue el modo de la interfaz (claro en claro, oscuro en oscuro) y se ve como una terminal. wizard

Registros · 3

Lista de registrosAprobado Contactos, guías, facturas: cualquier lista de una app. record-list Ficha de un registroPropuesto Un contacto, una guía, una factura. Kōdo está a un clic y sabe que estás aquí. record-detail Estado vacíoPropuesto Cuando una lista o sección aún no tiene nada. empty-state

Controles · 4

Menú desplegablePropuesto Acciones secundarias de un registro o una lista. dropdown BotonesPropuesto Acciones. buttons CamposAprobado Formularios. fields Etiquetas, chips y estadosAprobado Marcar tipo, estado o contadores. chips-and-states

Datos · 1

Barras de puntosAprobado Uso de cuota, avance, consumo: reemplazan barras de progreso y medidores. dot-bars