Sobre esta plantilla
Aesthetic Onboarding muestra una forma de construir este tipo de pantalla de inicio de sesión para un producto de IA o SaaS y publica las instrucciones que lo generaron. El titular dice “Welcome back”, y el orden de pantalla de inicio de sesión gira alrededor de esa línea. La paleta es naranja brillante #F09819 de base, azul intenso #0C0C0E para la tipografía y turquesa brillante #00C6FF para los acentos. La entrega es React y Tailwind CSS: una página, sin plugins y sin herramientas de build entre tú y el diseño. El movimiento se limita a un vídeo en bucle de fondo, lo bastante discreto para que el texto siga mandando. Tenlo abierto mientras escribes: el brief de 3.133 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Equipos de Studio que redactan el brief de un desarrollo y buscan en un marco de 1894x1378 algo concreto a lo que reaccionar.
- Si hay que renunciar al movimiento, el diseño de pantalla de inicio de sesión sigue leyéndose porque pasos de espaciado de 80px se encargan de la jerarquía.
- Equipos de producto que escriben los textos de Inicio de sesión y necesitan que cada línea respete la longitud para la que se dimensionó la tipografía de display.
Qué incluye
- Todas las medidas están escritas. Tipo y espaciado salen aquí de una sola lista: pasos de espaciado de 80px. El tipo y la maquetación comparten los mismos pasos, así que nada se desvía cuando se sustituye uno de los dos. Las cifras son el diseño; el resto es disposición.
- El bucle es el fondo. El brief especifica el vídeo a 1894x1378 con un bucle de 5,4s, y cada elemento de texto se coloca contra ese marco. Un fotograma de póster a 1894x1378 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- Cifras a tamaño display. Una franja compacta de cifras sostiene las afirmaciones que de otro modo pedirían un párrafo, lo que evita que la composición de pantalla de inicio de sesión se convierta en una lista de funciones. Las cifras llevan el acento #00C6FF mientras todo lo que las rodea se queda en el color del texto. Comprueba la fila en el ancho más estrecho.
- Medido contra el viewport. El espaciado se cita igual (pasos de espaciado de 80px), no como una escala que crece sola.
Movimiento e interacción
Movimiento ambiente sin librería de scroll
Un clip de 5,4s es toda la capa ambiente: se reproduce detrás del texto, da la vuelta sin corte visible y nunca reacciona al puntero. Nada más en la página se anima de forma continua, así que el medio es lo único que pide atención. Graba o exporta a 1894x1378 o más ancho.
Casi nada de movimiento
Esta se entrega como composición estática en 1894x1378, así que la jerarquía tiene que funcionar sin movimiento, y funciona. El movimiento se trata como respuesta y no como adorno. Deja el movimiento en los controles.
Cómo ordena Aesthetic Onboarding la primera lectura
Aquí el orden es el diseño: el titular, la fila de cifras, la cuadrícula de tarjetas, el clip de fondo y el pie de página se colocan para que la oferta llegue antes que la prueba, y la distancia entre ambas la marcan pasos de espaciado de 80px. Quien busca SaaS recibe la oferta antes que las opciones.
El reflujo de pantalla de inicio de sesión
Cuando el texto es largo, la maquetación estrecha es la primera que rompe. Aquí un clamp entre 10px y 80px absorbe el cambio, y la escala es fluida en lugar de escalonada. Los controles siguen siendo lo bastante grandes para tocarlos y el texto mantiene su orden de lectura en cualquier ancho.
Qué gana un producto de IA o SaaS aquí
La mayoría de las páginas de SaaS fallan por acumulación: más secciones, más degradados, más promesas. Aesthetic Onboarding va en la dirección contraria. La página lo dice sin rodeos: “Welcome back”. La composición se queda en naranja brillante #F09819 y deja turquesa brillante #00C6FF para las acciones, que es suficiente para parecer deliberada. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Aesthetic Onboarding?
El brief capturado ocupa 3.133 caracteres y describe la maqueta, la escala tipográfica, la paleta y las transiciones. Copiarlo te da ese texto; si lo mandas a Studio, la misma petición queda preparada con la página ya descrita.
¿Puedo reconstruir este diseño de pantalla de inicio de sesión de Aesthetic Onboarding con otro stack?
Aesthetic Onboarding se construyó en React y Tailwind CSS, 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.
¿Puedo publicar una página reconstruida a partir de Aesthetic Onboarding sin acreditar nada?
El brief es una descripción, no una licencia para redistribuir los recursos de otra persona. Conserva la estructura y los números, sustituye los medios y las marcas, y acredita la procedencia si un cliente pregunta de dónde sale la maqueta. La captura de la referencia es de 1894x1378.
