Sobre esta plantilla
Real-Time Alerts es la referencia de pantalla de inicio de sesión para un producto de IA o SaaS, y el brief que hay detrás es una especificación de construcción completa, no un moodboard. “Built for fast-moving teams” es la línea que la maquetación está pensada para sostener. El color se limita a neutro #797979 de base y tono oscuro #2F2A27 para la tipografía y la página se compone en Eloquia. Se entrega como un único archivo HTML autocontenido, así que el conjunto de pantalla de inicio de sesión se puede trasladar a un proyecto sin traspaso de diseño. La página reduce el movimiento a transiciones de 3500ms, cubic-bezier(.2.7.3,1) y un vídeo en bucle de fondo. Úsalo cuando tu pantalla de inicio de sesión necesite un orden decidido antes de añadir secciones nuevas.
Pensado para
- Pasa un único archivo HTML autocontenido al desarrollador con el recorte de 1738x1080 adjunto y deja que lo reconstruya.
- Cita un único archivo HTML autocontenido en la nota de traspaso para que la siguiente implementación no tenga que volver a deducir nada de la página.
- Equipos externos que se hacen cargo de su pantalla de inicio de sesión y necesitan fijar un breakpoint de 370px en el repositorio antes del primer commit.
Qué incluye
- Los tamaños están en el brief, no en una escala. El brief declara sus tamaños en la captura (un tamaño de display fijo de 16px, secciones de 100vh, esquinas de 26px y pasos de espaciado de 10px), así que un remontaje se puede verificar en lugar de aproximar. El tipo y la maquetación comparten los mismos pasos, así que nada se desvía cuando se sustituye uno de los dos.
- Medios detrás del texto. El clip dura 4,9s a 1738x1080 y se repite sin corte visible, por eso se lee como superficie y no como metraje. El bucle es lo bastante corto (4,9s) para que el ojo lo lea como textura y no como una línea de tiempo.
- El formulario es toda la primera pantalla. Aquí solo hay una decisión: rellenar el formulario o marcharse. Todo lo demás de la pantalla sostiene esa decisión. Los campos se apilan en una sola columna, así el orden de tabulación coincide con el de lectura. Una columna, una acción.
- Cifras a tamaño display. Las cifras se componen como tipo y no dentro de una tarjeta: Eloquia al tamaño display, con las etiquetas un paso por debajo. No hay divisores dentro de la fila; el espaciado por sí solo separa las cifras.
Movimiento e interacción
Duraciones cortas y nombradas
Los tiempos son cortos y coherentes (3500ms usando cubic-bezier(.2.7.3,1)), así que el hover y la pulsación se leen como un solo sistema y no como un conjunto de efectos sueltos. Los valores son lo bastante cortos para leerse como respuesta y no como animación. Cambios de estado rápidos, sin líneas de tiempo de scroll.
Una marquesina marca el ritmo
Una marquesina recorre la composición en bucle infinito, compuesta en Eloquia, para que la página tenga movimiento incluso donde nada se anima al hacer scroll. Como la tira es decorativa, se puede pausar o quitar sin cambiar la maquetación.
El orden detrás de pantalla de inicio de sesión
Un orden estricto te cuesta flexibilidad después. Añade una sección por encima y habrá que recortar de nuevo las cifras (un tamaño de display fijo de 16px y secciones de 100vh), porque la secuencia sostiene la página y no es decorativa. Quien busca SaaS recibe la oferta antes que las opciones.
Qué cambiar primero en Real-Time Alerts
El brief nombra Eloquia y la escala que la acompaña. Sustituye por una fuente con las mismas proporciones y la composición aguanta. Reescribe el texto y el material antes de recolorear nada.
Leer Real-Time Alerts como especificación
Casi todas las decisiones de aquí son un valor que puedes comprobar: un tamaño de display fijo de 16px, secciones de 100vh, esquinas de 26px, pasos de espaciado de 10px y transiciones de 3500ms. El medio es un bucle de 4,9s en 1738x1080. El tipo se queda en Eloquia, así que una sustitución tiene que mantener las mismas proporciones. Nada de este tipo de pantalla de inicio de sesión depende de un valor por defecto.
Preguntas frecuentes
¿Cuánto de Real-Time Alerts depende de un único archivo HTML autocontenido?
Real-Time Alerts se construyó en un único archivo HTML autocontenido, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
¿Cómo está organizada esta ficha de Real-Time Alerts?
Todo lo que se cita en la página procede del brief capturado de 21.771 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Cuánto ocupa el prompt que hay detrás de Real-Time Alerts?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 1738x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
