Sobre esta plantilla
Email Landing Page da a un producto de IA o SaaS una primera pantalla terminada y las cifras que la produjeron. La paleta es azul intenso #091020 de base, turquesa apagado #A4F4FD para la tipografía y turquesa brillante #00D2FF para los acentos, con la tipografía Inter. La referencia está construida con React y Tailwind CSS, y las decisiones de maquetación se documentan aparte. El movimiento se queda en transiciones de 0.3s y cubic-bezier(.22,1.36,1). Tenlo abierto mientras escribes: el brief de 19.431 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 easing cubic-bezier(.22,1.36,1) algo concreto a lo que reaccionar.
- Equipos que construyen su landing page de un producto de IA o SaaS y necesitan dejar constancia de un breakpoint de 1024px antes de que salga un presupuesto.
- Los desarrolladores que necesiten que el diseño de landing page aguante una conexión lenta usarán 640x478 y la escala tipográfica como presupuesto de peso.
Qué incluye
- Fila superior: marca, enlaces y acción. La navegación es una tira fina y no una banda: marca a la izquierda, enlaces hacia el centro-derecha y una acción en #00D2FF, todo en la capa superior de landing page y sin fondo propio. Por debajo de 1024px los enlaces colapsan en lugar de saltar a una segunda línea.
- Una tipografía, usada con disciplina. Los pasos de tamaño y el interletraje del brief son los que dan el tono: Inter a un tamaño display cerrado y una caída clara hasta el texto de apoyo. Cambiar de tipografía es seguro mientras los tamaños y los pesos se queden donde los puso el brief.
- Primero el texto, después el adorno. Todo lo que está por encima del pliegue se gana su sitio. El brief nombra el texto, el marco de 640x478 y los tamaños de tipo, y no deja nada decorativo compitiendo con ellos. La página es una sola composición a 640x478, y por eso se sostiene cuando cambia el texto.
- Fila superior, una acción. Las etiquetas son lo bastante cortas para caber en una línea a 1024px, y el elemento activo se marca con peso y no con una píldora.
Movimiento e interacción
El tiempo va en el brief
Los tiempos son cortos y coherentes (0.3s con la curva cubic-bezier(.22,1.36,1)), así que el hover y la pulsación se leen como un solo sistema y no como un conjunto de efectos sueltos. El easing se especifica junto a la duración (0.3s), así que una reconstrucción no puede colar otra sensación sin avisar.
Interacción contenida y local
La página solo responde donde se puede actuar: estados hover en los botones y los enlaces y no en todas las tarjetas y pestañas o un acordeón que intercambia contenido en el sitio. Nada en la página abre un modal ni secuestra el scroll; las interacciones se quedan en su elemento.
El reflujo de landing page
Aquí responsive significa que cambia la escala, no la jerarquía: la maquetación cambia a 1024px. El texto se queda por encima del pliegue, los controles siguen siendo lo bastante grandes para tocarlos y se respeta el movimiento reducido. El reflujo mantiene la acción al alcance en cualquier ancho.
Hacer tuyo este tipo de landing page
Una plantilla te pide que aceptes su maquetación; esta referencia te pide que la conserves y cambies todo lo de dentro. La diferencia es que una cuadrícula de 3 columnas, esquinas de 44px, pasos de espaciado de 20px, transiciones de 0.3s y easing cubic-bezier(.22,1.36,1) se quedan fijos mientras el tema se mueve. Conserva el recorte del material: hace tanto trabajo como la tipografía.
El orden detrás de landing page
Una maquetación centrada en funciones enumera lo que hace el producto; esta lleva a quien lee hacia una única decisión. El recorrido se ve en navegación, el titular, la insignia de anuncio, la fila de cifras y la fila de clientes y en cómo una cuadrícula de 3 columnas y esquinas de 44px marcan las distancias. Quien busca SaaS recibe la oferta antes que las opciones.
Preguntas frecuentes
¿El prompt de Email Landing Page es una especificación cerrada o un punto de partida?
El brief capturado ocupa 19.431 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 landing page de Email Landing Page con otro stack?
Email Landing Page 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.
¿Cómo se comportan las transiciones de 0.3s en Email Landing Page?
Las transiciones van asociadas a estados de la interfaz y no a una línea de tiempo de scroll, y se resuelven en el rango de 0.3s con la curva cubic-bezier(.22,1.36,1). El brief anota los valores para que un port no tenga que adivinarlos.
