Sobre esta plantilla
Cross-Border es la referencia de landing page para una empresa industrial, y el brief que hay detrás es una especificación de construcción completa, no un moodboard. Abre con “Complete the form and our team will contact you soon” y le da el marco a esa línea en lugar de encogerla en una tarjeta. El esquema de color es amarillo brillante #FFDA00 de base, negro #1A1A1A para la tipografía y turquesa intenso #002A35 para los acentos, y la página está compuesta en Helvetica, Arial. La entrega es React y Tailwind CSS: una página, sin plugins y sin herramientas de build entre tú y el diseño. El brief gasta su presupuesto de movimiento en transiciones de 0.6s y un vídeo en bucle de fondo. Cuando prepares el brief de cada landing page de industria, parte de esta composición y sustituye el tema.
Pensado para
- Si la referencia solo es un punto de partida, los diseñadores pueden conservar un marco de 1440x1080 y rehacer el resto del diseño de landing page.
- Diseñadores que necesitan los números antes que nada: secciones de 12vh y pasos de espaciado de 20px, todo citado del brief.
- Profesionales del marketing de producto que necesitan que cada landing page siga leyéndose con 5,8s de vídeo en bucle detrás del texto.
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 #002A35, medida en secciones de 12vh y pasos de espaciado de 20px, 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 #002A35 es el único elemento de la barra con peso.
- Medios sin superposición. El brief especifica el vídeo a 1440x1080 con un bucle de 5,8s, y cada elemento de texto se coloca contra ese marco. El bucle es lo bastante corto (5,8s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Dos tipografías, papeles claros. El tipo es Helvetica, Arial en lo alto de la escala, con el texto de apoyo muy por debajo, así la jerarquía no necesita color para leerse. El interletraje se fija por tamaño, así la línea display y el pie de foto no comparten un mismo valor.
- Navegación contenida en una fila. 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 #002A35, todo en la capa superior de landing page y sin fondo propio.
Movimiento e interacción
El bucle hace el trabajo ambiente
El clip de fondo se reproduce 5,8s en 1440x1080 en bucle infinito, silenciado y en línea, así que la página sigue moviéndose mientras la atención del lector está en el texto. No hace falta ninguna librería de scroll, porque el único movimiento ambiente es el propio medio. El clip está silenciado y en línea, así que el primer fotograma está disponible sin ninguna interacción.
Tiempos cortos y parejos
El movimiento de los controles es corto y repetible: 0.6s en cada cambio de estado. El easing se especifica junto a la duración (0.6s), así que una reconstrucción no puede colar otra sensación sin avisar.
Qué gana una empresa industrial aquí
La razón de que esto funcione para una empresa industrial es que nunca pide al lector que arme el mensaje. “Complete the form and our team will contact you soon” hace ese trabajo desde el primer fotograma. La maquetación, el tipo y el color están decididos (amarillo brillante #FFDA00 y turquesa intenso #002A35, compuestos en Helvetica, Arial), así que la primera pantalla se lee como un argumento cerrado y no como un montón de piezas. Da a quien lee páginas de industria el camino más corto y honesto hasta la oferta.
Las cifras detrás de landing page
El coste de una escala fija es menos margen para improvisar. Con secciones de 12vh y pasos de espaciado de 20px la composición se mantiene coherente, pero un elemento nuevo hay que encajarlo y no simplemente colocarlo. Nada de este tipo de landing page depende de un valor por defecto.
Qué se mueve en Cross-Border
Mantener el movimiento tan pequeño hace que la página se apoye en el tipo y en el marco. Si se quitara todo el movimiento (transiciones de 0.6s, un bucle de 5,8s y estados hover y pulsados), la composición seguiría en pie. Nada se anima por gusto en este tipo de landing page.
Preguntas frecuentes
¿El prompt de Cross-Border es una especificación cerrada o un punto de partida?
El brief capturado ocupa 6.698 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.
¿Cómo está organizada esta ficha de Cross-Border?
Todo lo que se cita en la página procede del brief capturado de 6.698 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Por qué la ficha nombra React y Tailwind CSS?
Cross-Border 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.
