Sobre esta plantilla
TrustFlow es una referencia de trabajo para un producto fintech: el desglose de landing page, con la maquetación medida y lista para recrear. El color se limita a blanco #FFFFFF de base y negro #191919 para la tipografía y la página se compone en Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 1462x1080 antes de escribir código. El movimiento se limita a transiciones de 200ms y un vídeo en bucle de fondo. Es la referencia adecuada para este tipo de landing page en un producto fintech, que tiene que transmitir intención desde la primera pantalla.
Pensado para
- Empieza por un tamaño de display fijo de 15px y pasos de espaciado de 11px y deja que la paleta venga después, porque el espaciado es lo que hace legible este diseño de landing page.
- Este diseño de landing page sirve a fundadores que necesitan una pantalla de prueba de que los textos de fintech aguantan 6,3s de vídeo en bucle.
- Quien le pase el brief de landing page a un modelo usará el prompt de 6.275 caracteres como punto de partida.
Qué incluye
- Una barra sin nada de más. La barra es una fila de texto y una acción, medida en un tamaño de display fijo de 15px y pasos de espaciado de 11px, así que se lee como franja y no como banda. La marca se trata como tipografía y no como un logotipo compuesto, lo que mantiene la fila superior en una sola línea base. Mantén la fila en una sola línea.
- Vídeo en la capa inferior. El vídeo ocupa la capa inferior de la composición de 1462x1080, con el texto dispuesto por encima y nada entre ambos. Exporta a 1462x1080 o más ancho y el recorte de cobertura sigue funcionando. Exporta a 1462x1080 o más ancho para que el recorte siga siendo honesto.
- Franja de datos, no tabla. Las cifras se componen en Inter a un tamaño más cercano al titular que al texto corrido. Las cifras comparten la línea base del texto que las rodea, así la fila se lee como un solo objeto.
- Una fila, sin desplegables. La marca ocupa el borde izquierdo y los enlaces corren a su derecha, todo compuesto en Inter, para que la barra pertenezca a la página de abajo y no a un sistema aparte. No des a la marca más espacio que el que pide su tipografía.
Movimiento e interacción
Hover, pero con moderación
Cada elemento interactivo hace una sola cosa (estados hover en los botones y los enlaces y no en todas las tarjetas), y eso mantiene los estados previsibles. Un control que parece interactivo se comporta como tal, así que nada promete una acción que no existe.
El tiempo va en el brief
Los controles se resuelven en 200ms, lo bastante rápido para que la página responda al tocarla y no después. Los estados de foco usan el mismo tiempo que el hover, así que la respuesta de teclado y de puntero coincide.
Los tiempos detrás de landing page
Compara el movimiento de aquí con una página guiada por scroll. En ambas hay movimiento; esta lo hace donde dice el brief (transiciones de 200ms, un bucle de 6,3s y estados hover y pulsados), así que el texto sigue delante. Nada se anima por gusto en este tipo de landing page.
Hacer tuyo este tipo de landing page
Cambia primero el texto y el material, después el color y por último la maquetación. El marco de 1462x1080 y la escala de Inter son lo que sostiene la página, así que sustituye alrededor de ellos y no a través de ellos. Compón el texto nuevo al mismo tamaño de display y vuelve a comprobar el contraste antes de añadir nada.
Qué se sostiene para Fintech
La contrapartida es la densidad: este tipo de landing page dice menos en la primera pantalla de lo que diría una maquetación centrada en funciones. Lo que conserva es el orden de lectura, y navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas hacen el trabajo que una página más larga repartiría. TrustFlow enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿El prompt de TrustFlow es una especificación cerrada o un punto de partida?
El brief capturado ocupa 6.275 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.
¿Por qué la ficha nombra React y Tailwind CSS?
TrustFlow 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.
¿Puedo usar TrustFlow en un proyecto de cliente?
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 1462x1080.
