Pantallas completas · wizard

Asistente / instalación

Propuesto2026-10-02 · Rechazado por el founder: debe seguir el modo (claro en claro, oscuro en oscuro) y verse como terminal. Rediseñado así; vuelve a revisión.

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.

Vista · datos de ejemplo

02 / 03

Instalando lo de tu empresa

Instalación · Empresa de ejemplo2 de 3

ok datos de la empresa
ok contactos traídos · 124
guías y folios

Mientras tanto, crea tu clave

Anatomía

Logo del modo actual y contador '02 / 03'
Título enorme (el cursor naranja va en la terminal: uno solo visible)
Terminal: barra de título y registro en Ubuntu Mono con '$', 'ok' en verde y cursor naranja en el paso actual
Línea de progreso naranja al pie de la terminal
Algo útil que hacer mientras tanto

Sí

Cada paso es un evento real
Una pregunta por pantalla
Mismo modo que el resto del sistema

No porcentajes inventados
No un fondo navy en modo claro

HTML exacto

<section class="nu-asistente">
  <div class="nu-asistente__cabeza">
    <img class="nu-solo-claro" src="https://branding.nuevauno.com/logos/nuevauno-logo-light.anim.svg" alt="nuevauno" height="28">
    <img class="nu-solo-oscuro" src="https://branding.nuevauno.com/logos/nuevauno-logo-dark.anim.svg" alt="nuevauno" height="28">
    <span class="nu-asistente__contador">02 / 03</span>
  </div>
  <h1 class="nu-asistente__titulo">Instalando lo de tu empresa</h1>
  <div class="nu-terminal">
    <div class="nu-terminal__barra"><span>Instalación · Empresa de ejemplo</span><span>2 de 3</span></div>
    <ol class="nu-asistente__registro">
      <li><span class="ok">ok</span>  datos de la empresa</li>
      <li><span class="ok">ok</span>  contactos traídos · 124</li>
      <li class="ahora">guías y folios</li>
    </ol>
    <div class="nu-asistente__progreso"><span style="width:66%"></span></div>
  </div>
  <label class="nu-campo nu-campo--linea" style="max-width:520px">
    <span class="nu-campo__etiqueta">Mientras tanto, crea tu clave</span>
    <input class="nu-campo__control" type="password" placeholder="Tu clave">
  </label>
</section>

Clases: .nu-asistente .nu-asistente__titulo .nu-terminal .nu-terminal__barra .nu-asistente__registro .nu-asistente__progreso .nu-solo-claro .nu-solo-oscuro .nu-campo--linea · Fragmento: snippets/wizard.html