# Kit de pantallas

> Toda pantalla de NUEVAUNO se arma con patrones aprobados: cada uno tiene su página de ejemplo con el HTML exacto para copiar.

URL: https://nuevauno.com/branding/kit

Una pantalla nueva usa sólo patrones aprobados; lo que falte se propone para que el founder lo apruebe.


## Patrones

- Shell completo (marco, [object Object]): La estructura de TODA pantalla de NUEVAUNO OS. Una app nueva sólo llena el contenido central; el resto lo pone el shell.
- Menú lateral (marco, [object Object]): Navegación principal de la empresa: Principal (Inicio, Kōdo, Contactos), Tu negocio (apps instaladas) y abajo Ajustes y la persona.
- Cabecera (marco, [object Object]): Arriba de todo el contenido: dice dónde estás y deja a mano a Kōdo.
- Selector de empresa (marco, [object Object]): 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.
- Fondo de puntos (marco, [object Object]): El fondo de toda el área de contenido. Las superficies blancas van encima.
- Riel izquierdo (marco, [object Object]): Accesos globales que no dependen de la empresa (buscar, avisos, aprobaciones, ajustes, persona). Sólo escritorio ancho.
- Pestañas (marco, [object Object]): Bajo la cabecera, para las partes de un registro (Ficha, Guías, Facturas, Actividad) o de una sección.
- Barra inferior (marco, [object Object]): Estado del sistema en una línea: conexión, empresa, Kōdo y versión.
- Panel de Kōdo con contexto (kodo, [object Object]): 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.
- Tarjeta de aprobación (kodo, [object Object]): Cuando Kōdo va a hacer algo que importa (emitir, publicar, borrar en masa, dinero) y necesita el sí de una persona.
- Pídele algo a Kōdo (inicio, [object Object]): La caja grande del Inicio, justo después del saludo.
- Tarjetas de datos (inicio, [object Object]): La franja de números del Inicio y de una ficha: número grande + etiqueta chica.
- Tus apps (inicio, [object Object]): La grilla de apps instaladas del Inicio.
- Actividad en vivo (inicio, [object Object]): Lo que pasa en la empresa, estilo terminal, actualizándose solo sin recargar la página.
- Inicio (pantalla, [object Object]): Lo primero que ve el cliente.
- Lista de registros (registros, [object Object]): Contactos, guías, facturas: cualquier lista de una app.
- Ficha de un registro (registros, [object Object]): Un contacto, una guía, una factura. Kōdo está a un clic y sabe que estás aquí.
- Estado vacío (registros, [object Object]): Cuando una lista o sección aún no tiene nada.
- Menú desplegable (controles, [object Object]): Acciones secundarias de un registro o una lista.
- Botones (controles, [object Object]): Acciones.
- Campos (controles, [object Object]): Formularios.
- Etiquetas, chips y estados (controles, [object Object]): Marcar tipo, estado o contadores.
- Barras de puntos (datos, [object Object]): Uso de cuota, avance, consumo: reemplazan barras de progreso y medidores.
- Asistente / instalación (pantalla, [object Object]): 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.

Source: [/kit/kit.json](/kit/kit.json)