Kit de pantallas · v0.1.0
← Todos los patrones
Pantallas completas · home

Inicio

Aprobado2026-10-02 · Aprobado por el founder en la revisión visual.

Lo primero que ve el cliente.

Vista · datos de ejemplo
Viernes, 2 de octubre de 2026

Buenas tardes, Ana

Estás en Ejemplo SpA

Pídele algo a Kōdo
Usuarios 3activos
Archivos 0,2MB de 1 GB
IA de Kōdo 12% del mes
Para hoy 2pendientes Ver pendientes
Tus apps · 8
Actividad En vivo
  1. 14:32:08Guías
  2. 14:10:51Contactos
  3. 13:47:02Sitio web
  4. 12:05:19Facturas
Ver toda la actividad
Anatomía
  • Fecha + saludo con nombre real + empresa activa
  • Pídele algo a Kōdo
  • Tarjetas de datos
  • Tus apps
  • Actividad en vivo
Sí
  • Ancho de contenido ~1120 px
  • Todo dato real o se oculta
No
  • No agregues banners ni bienvenidas de cuenta nueva a clientes importados
HTML exacto
<main class="nu-fondo">
  <div class="nu-pagina">
    <div class="nu-saludo">
      <span class="nu-saludo__fecha">Viernes, 2 de octubre de 2026</span>
      <h1 class="nu-saludo__titulo">Buenas tardes, Ana</h1>
      <p class="nu-saludo__donde">Estás en <span class="nu-saludo__org">Ejemplo SpA</span></p>
    </div>
    <section class="nu-kodo" aria-label="Pídele algo a Kōdo">
      <div class="nu-kodo__encabezado">
        <img src="https://branding.nuevauno.com/kodo/kodo-mark.svg" alt="" width="16" height="16">
        <span class="nu-etiqueta">Pídele algo a Kōdo</span>
      </div>
      <form class="nu-kodo__fila">
        <span class="nu-kodo__cursor" aria-hidden="true"></span>
        <div class="nu-kodo__campo">
          <textarea class="nu-kodo__texto" rows="1" placeholder="¿Qué quieres saber o hacer hoy?"></textarea>
        </div>
        <button type="submit" class="nu-kodo__enviar"><span class="nu-kodo__enviar-texto">Enviar</span> →</button>
      </form>
      <div class="nu-fichas">
        <button type="button" class="nu-ficha">Busca un contacto</button>
        <button type="button" class="nu-ficha">¿Qué guías salen hoy?</button>
        <button type="button" class="nu-ficha">Clientes sin contacto hace 30 días</button>
        <button type="button" class="nu-ficha">¿Qué tengo pendiente hoy?</button>
      </div>
    </section>
    <div class="nu-franja" role="list">
      <div class="nu-dato" role="listitem">
        <span class="nu-dato__etiqueta">Usuarios</span>
        <span class="nu-dato__valor"><span class="nu-dato__numero">3</span><span class="nu-dato__unidad">activos</span></span>
      </div>
      <div class="nu-dato" role="listitem">
        <span class="nu-dato__etiqueta">Archivos</span>
        <span class="nu-dato__valor"><span class="nu-dato__numero">0,2</span><span class="nu-dato__unidad">MB de 1 GB</span></span>
        <span class="nu-puntos" aria-label="1 % usado">
          <span class="nu-punto" data-lleno="true"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span>
        </span>
      </div>
      <div class="nu-dato" role="listitem">
        <span class="nu-dato__etiqueta">IA de Kōdo</span>
        <span class="nu-dato__valor"><span class="nu-dato__numero">12</span><span class="nu-dato__unidad">% del mes</span></span>
        <span class="nu-puntos" aria-label="12 % usado">
          <span class="nu-punto" data-lleno="true"></span><span class="nu-punto" data-lleno="true"></span><span class="nu-punto" data-lleno="true"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span>
        </span>
      </div>
      <div class="nu-dato" role="listitem">
        <span class="nu-dato__etiqueta">Para hoy</span>
        <span class="nu-dato__valor"><span class="nu-dato__numero">2</span><span class="nu-dato__unidad">pendientes</span></span>
        <a class="nu-enlace" href="/approvals">Ver pendientes</a>
      </div>
    </div>
    <section class="nu-bloque" aria-label="Tus apps">
      <div class="nu-bloque__cabeza">
        <span class="nu-etiqueta nu-etiqueta--bloque">Tus apps · 8</span>
        <label class="nu-buscar-apps"><input type="search" placeholder="Buscar una app o un menú"></label>
      </div>
      <div class="nu-apps">
        <button type="button" class="nu-app"><img src="https://branding.nuevauno.com/kodo/kodo-mark.svg" alt="" width="20" height="20"><span class="nu-app__nombre">Kōdo</span></button>
        <button type="button" class="nu-app"><span class="nu-icono" data-icono="contacts"></span><span class="nu-app__nombre">Contactos</span></button>
        <button type="button" class="nu-app"><span class="nu-icono" data-icono="nuevauno_packing_lists"></span><span class="nu-app__nombre">Guías</span></button>
        <button type="button" class="nu-app"><span class="nu-icono" data-icono="account"></span><span class="nu-app__nombre">Facturas</span></button>
        <button type="button" class="nu-app"><span class="nu-icono" data-icono="nuevauno_certificates"></span><span class="nu-app__nombre">Certificados</span></button>
        <button type="button" class="nu-app"><span class="nu-icono" data-icono="nuevauno_website"></span><span class="nu-app__nombre">Sitio web</span></button>
        <button type="button" class="nu-app"><span class="nu-icono" data-icono="calendar"></span><span class="nu-app__nombre">Reservas</span></button>
        <button type="button" class="nu-app"><span class="nu-icono" data-icono="general_settings"></span><span class="nu-app__nombre">Ajustes</span></button>
      </div>
    </section>
    <section class="nu-actividad nu-actividad--vivo" aria-label="Actividad" data-kit-vivo>
      <div class="nu-actividad__cabeza">
        <span class="nu-etiqueta nu-etiqueta--bloque">Actividad</span>
        <span class="nu-vivo">En vivo</span>
      </div>
      <ol class="nu-actividad__lista" aria-live="polite">
        <li class="nu-suceso"><span class="nu-suceso__cuando">14:32:08</span><button type="button" class="nu-suceso__texto">Kōdo preparó la guía GD-00064 para Juanito SpA</button><span class="nu-suceso__area">Guías</span></li>
        <li class="nu-suceso"><span class="nu-suceso__cuando">14:10:51</span><button type="button" class="nu-suceso__texto">Ana Pérez agregó el contacto Comercial Sur Ltda.</button><span class="nu-suceso__area">Contactos</span></li>
        <li class="nu-suceso"><span class="nu-suceso__cuando">13:47:02</span><button type="button" class="nu-suceso__texto">Se publicó la página Servicios del sitio web</button><span class="nu-suceso__area">Sitio web</span></li>
        <li class="nu-suceso"><span class="nu-suceso__cuando">12:05:19</span><button type="button" class="nu-suceso__texto">Factura 000269 emitida y enviada al cliente</button><span class="nu-suceso__area">Facturas</span></li>
      </ol>
      <div class="nu-actividad__mas"><a class="nu-enlace" href="/activity">Ver toda la actividad</a></div>
    </section>
  </div>
</main>

Clases: .nu-pagina .nu-saludo · Fragmento: snippets/home.html