Sobre esta plantilla
Aurelion Blog es la referencia de sección de blog 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. Toda la página se construye sobre blanco #F3F4F4 de base, negro #1A1A1A para la tipografía y amarillo #F3DE58 para los acentos. Se entrega como React y Tailwind CSS, así que el conjunto de sección de blog se puede trasladar a un proyecto sin traspaso de diseño. El presupuesto de movimiento se agota en transiciones de 700ms y un vídeo en bucle de fondo. Toma prestada la estructura, no el tema: las cifras y el orden de sección de blog pasan a tu marca sin cambios.
Pensado para
- Cita un marco de 1400x1080 en la nota de traspaso para que la siguiente implementación no tenga que volver a deducir nada de la página.
- Pensado para responsables de producto que necesitan acotar el diseño de sección de blog a un sprint y no añadir material nuevo.
- Este diseño de sección de blog sirve a fundadores que necesitan una pantalla de prueba de que los textos de SaaS aguantan 6,5s de vídeo en bucle.
Qué incluye
- Fila superior, una acción. La barra reúne la marca, los enlaces de la sección y un botón en #F3DE58, medida en pasos de espaciado de 30px y transiciones de 700ms, así nunca acaba convertida en una segunda cabecera. Los enlaces se componen a un tamaño menor que la marca, y la acción en #F3DE58 es el único elemento de la barra con peso.
- Medios sin superposición. Los medios son un solo clip de 6,5s recortado para cubrir el marco de 1400x1080, así que nunca aparecen bandas negras en ningún ancho. Exporta a 1400x1080 o más ancho y el recorte de cobertura sigue funcionando.
- La navegación es fina a propósito. Los estados de foco y hover están definidos para cada enlace, no heredados del navegador. Una acción por barra.
- Medido, no estimado a ojo. Tipo y espaciado salen aquí de una sola lista: pasos de espaciado de 30px y transiciones de 700ms. Los valores se citan del prompt capturado y no se deducen, por eso sobreviven a un nuevo render. Cambia el tema, no los pasos.
Movimiento e interacción
Un bucle, no una secuencia
Un clip de 6,5s es toda la capa ambiente: se reproduce detrás del texto, da la vuelta sin corte visible y nunca reacciona al puntero. Un fotograma de portada hace de suplente cuando la reproducción automática está bloqueada, así que el movimiento suma y no es obligatorio.
Cambios de estado medidos
Los controles se resuelven en 700ms, lo bastante rápido para que la página responda al tocarla y no después. Como los valores son cortos, una reconstrucción que los alargue se nota de inmediato.
Qué cambiar primero en Aurelion Blog
Si tu marca gasta una paleta más pesada, pruébala contra el marco antes de decidir. Como blanco #F3F4F4 sostiene la página, un acento más oscuro necesita más contraste del que usa la referencia. Conserva el marco y la escala; el tema es la parte que debe cambiar.
El reflujo de sección de blog
Una escala fluida y otra a saltos se parecen en pantalla ancha. Estrecha el viewport y aparece la diferencia: un clamp entre 56px y 30px frente a saltos fijos. La jerarquía es lo que sobrevive al reflujo.
Cómo ordena Aurelion Blog la primera lectura
Léelo en orden: navegación y la cuadrícula de tarjetas. Cada elemento tiene una sola función, y el acento amarillo #F3DE58 se gasta solo en el elemento que debes pulsar. Quien busca SaaS recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Aurelion Blog?
El brief capturado ocupa 5.024 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.
¿Qué puedo hacer con el brief de Aurelion Blog una vez lo tengo?
Todo lo que se cita en la página procede del brief capturado de 5.024 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Cuánto de Aurelion Blog depende de React y Tailwind CSS?
Aurelion Blog 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.
