Sobre esta plantilla
Email Marketing es una referencia de trabajo para un producto de IA o SaaS: el desglose de sección hero, con la maquetación medida y lista para recrear. El titular dice “Design Rocket Certificates”, y el orden de sección hero gira alrededor de esa línea. La paleta es negro #0A0A0A de base, amarillo brillante #DCFF00 para la tipografía y amarillo brillante #D8F90A para los acentos, con la tipografía Instrument Serif. Se entrega como React y Tailwind CSS, y la captura se fija a 800x702 antes de escribir código. Tenlo abierto mientras escribes: el brief de 7.972 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Empieza por tipografía de 12px a 58px y pasos de espaciado de 18px y deja que la paleta venga después, porque el espaciado es lo que hace legible este diseño de sección hero.
- Pensado para responsables de contenidos que reescriben un diseño de sección hero cuyo titular tiene que seguir siendo tan largo como el de Email Marketing.
- Pensado para fundadores que ya han elegido #D8F90A y no tienen nada más decidido sobre el diseño de sección hero.
Qué incluye
- Una escala para tipo y marco. La maquetación se resuelve con valores fijos (tipografía de 12px a 58px y pasos de espaciado de 18px), y eso es lo que mantiene compuesta la primera pantalla a cualquier ancho. No hay ningún valor intermedio inventado entre los citados; la lista de medidas es todo el sistema. Conserva los valores que parecen arbitrarios.
- Números sobre la línea base. Las estadísticas se tratan como tipografía: cifras al tamaño display, etiquetas en el paso más pequeño del brief y todo en #D8F90A o en el color del texto, nunca en una tarjeta de color. Las cifras llevan el acento #D8F90A mientras todo lo que las rodea se queda en el color del texto. No encierres los números en cajas.
- La composición es el contenido. La composición de sección hero está construida para que el texto llegue antes que nada: el tipo lleva la jerarquía, el marco de 800x702 sujeta la composición y los valores de apoyo se mantienen callados. La página es una sola composición a 800x702, y por eso se sostiene cuando cambia el texto.
- El brief nombra los pasos. El espaciado se cita igual (tipografía de 12px a 58px y pasos de espaciado de 18px), no como una escala que crece sola.
Movimiento e interacción
Hover solo donde aporta
Solo los controles responden al puntero (estados hover en los botones y los enlaces y no en todas las tarjetas), así que la página se siente viva sin convertir cada elemento en un objetivo. Un control que parece interactivo se comporta como tal, así que nada promete una acción que no existe. No animes la maquetación en el hover.
Casi nada de movimiento
Aquí no hay librería de scroll: la composición de 800x702 se queda quieta y solo se mueven los elementos que responden a ti. La composición se queda quieta, así que la jerarquía tiene que sostener la página, y lo hace. Deja el movimiento en los controles.
Qué se sostiene para IA y SaaS
La mayoría de las páginas de SaaS fallan por acumulación: más secciones, más degradados, más promesas. Email Marketing va en la dirección contraria. La página lo dice sin rodeos: “Design Rocket Certificates”. La composición se queda en negro #0A0A0A y deja amarillo brillante #D8F90A 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.
El reflujo de sección hero
Aquí el tipo se limita con clamp en lugar de ir a saltos (un clamp entre 12px y 58px), así que la línea de display no pega brincos entre anchos. Los dos estados están descritos en el mismo brief.
El orden detrás de sección hero
El brief ocupa 7.972 caracteres y nombra el orden de lectura sin rodeos: el titular, la insignia de anuncio, la fila de cifras, la cuadrícula de tarjetas y el clip de fondo, con tipografía de 12px a 58px y pasos de espaciado de 18px entre medias. Quien busca SaaS recibe la oferta antes que las opciones.
Preguntas frecuentes
¿El prompt de Email Marketing es una especificación cerrada o un punto de partida?
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 800x702. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cuánto de Email Marketing depende de React y Tailwind CSS?
Email Marketing 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.
¿De dónde sale el diseño de Email Marketing?
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 800x702.
