Sobre esta plantilla
Travel Journal es un caso de sección de blog de viajes: nace de un único brief escrito y esta página lo documenta. La paleta se queda en azul intenso #1A1A1E de base y turquesa apagado #77A0B0 para los acentos, y el tipo es Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 1470x1080 antes de escribir código. Todo el movimiento cabe en transiciones de 150ms y un vídeo en bucle de fondo. Úsalo cuando tu sección de blog necesite un orden decidido antes de añadir secciones nuevas.
Pensado para
- Si tres personas tienen que editar el diseño de sección de blog, dales a los responsables de contenidos esquinas de 52px y pasos de espaciado de 10px en vez de una captura.
- Los responsables de estudio que llevan varios proyectos a la vez usarán este diseño de sección de blog como patrón que copian las demás páginas.
- Equipos de producto que escriben los textos de Sección de blog y necesitan que cada línea respete la longitud para la que se dimensionó la tipografía de display.
Qué incluye
- La navegación es fina a propósito. La barra reúne la marca, los enlaces de la sección y un botón en #77A0B0, medida en pasos de espaciado de 10px y transiciones de 150ms, 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 #77A0B0 es el único elemento de la barra con peso.
- El fotograma de póster importa. El clip dura 6,4s a 1470x1080 y se repite sin corte visible, por eso se lee como superficie y no como metraje. Exporta a 1470x1080 o más ancho y el recorte de cobertura sigue funcionando.
- Una tipografía, usada con disciplina. Aquí el tipo es el sistema de estilo: Inter al tamaño display, la misma fuente en toda la interfaz y ningún segundo color de acento haciendo el trabajo. Los pasos de tamaño son valores fijos, y por eso un cambio de tipografía puede conservar la misma jerarquía.
- Fila superior, una acción. La fila gasta el contraste en un solo punto: la acción #77A0B0, con la marca y los enlaces retenidos sobre el color del texto.
Movimiento e interacción
Tiempos cortos y parejos
El hover, la pulsación y el foco se resuelven en 150ms, que es lo que hace que la interfaz se sienta inmediata. El tiempo citado cubre los cambios de estado, así que la respuesta es la parte especificada del movimiento.
Un bucle, no una secuencia
El movimiento ambiente viene del bucle de 6,4s en 1470x1080 y no de efectos de scroll, lo que mantiene la página tranquila y el texto legible. El clip está silenciado y en línea, así que el primer fotograma está disponible sin ninguna interacción. Graba o exporta a 1470x1080 o más ancho.
Qué cambiar primero en Travel Journal
Casi todo el mundo empieza por el color de acento. Empieza tú por la promesa: reescribe la línea de display y vuelve a probar turquesa apagado #77A0B0 contra tu propio material. La composición es la parte reutilizable, y sobrevive a una marca distinta.
Los tiempos detrás de sección de blog
Un presupuesto de movimiento corto te cuesta dramatismo en el primer fotograma. A cambio ganas legibilidad, y significa que el movimiento se puede trasladar sin librería: transiciones de 150ms y un bucle de 6,4s. Nada se anima por gusto en este tipo de sección de blog.
Leer Travel Journal como especificación
Las cifras concretas envejecen: un valor que encaja en 1470x1080 puede no encajar en tu marco. El brief enuncia esquinas de 52px y pasos de espaciado de 10px de todos modos, porque un valor declarado es más fácil de cambiar que uno implícito. Nada de este tipo de sección de blog depende de un valor por defecto.
Preguntas frecuentes
¿Por qué no se imprime aquí el prompt de Travel Journal?
Todo lo que se cita en la página procede del brief capturado de 5.151 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Qué me llevo cuando copio el brief de Travel Journal?
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 1470x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Necesito React y Tailwind CSS para recrear Travel Journal?
Travel Journal 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.
