Sobre esta plantilla
Antes de rehacer cada landing page para un producto fintech, lee USD Halo: la composición y la especificación que hay detrás están aquí. El titular de la propia página dice “An automated, reward-powered digital dollar built for native passive earnings and effortless connection into DeFi”, y la composición se construye alrededor de esas palabras exactas. La paleta se queda en blanco #F5F5F5 de base y índigo intenso #2B2644 para la tipografía, y el tipo es Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 458x800 antes de escribir código. Es más útil cuando cada landing page de Fintech tiene que sobrevivir a un cambio de texto sin rediseño.
Pensado para
- Equipos que construyen este tipo de landing page para un producto fintech y quieren el detalle medido (tipografía de 13px a 16px y secciones de 100vh) en lugar de una captura que copiar.
- Quien le pase el brief de landing page a un modelo usará el prompt de 8.531 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de landing page cuyo titular tiene que seguir siendo tan largo como el de USD Halo.
Qué incluye
- Navegación contenida en una fila. La barra es una fila de texto y una acción, medida en tipografía de 13px a 16px y secciones de 100vh, así que se lee como franja y no como banda. Los estados hover y de foco están definidos para cada enlace, y eso es lo que evita que una barra fina parezca inerte. Una acción por barra.
- Números en vez de una afirmación. La fila se sitúa arriba en landing page como prueba y no como adorno. Los números comparten la fuente de la interfaz, así pertenecen a la página en lugar de interrumpirla.
- La composición es el contenido. Toda la composición cabe en una pantalla y se entrega como React y Tailwind CSS, con el texto, los medios y los controles nombrados en el brief. La página es una sola composición a 458x800, y por eso se sostiene cuando cambia el texto. El brief es la especificación.
- Navegación sin fondo propio. Una barra fina ocupa la parte superior de landing page, con la marca a la izquierda y los enlaces compuestos en Inter, de modo que la composición se lee antes como contenido que como interfaz.
Movimiento e interacción
Respuesta en los controles
La capa interactiva es pequeña a propósito: estados hover en los botones y los enlaces y no en todas las tarjetas. Los estados salen de la paleta de la propia página y no de un valor por defecto de componente.
La tira que no para
Una marquesina recorre la composición en bucle infinito, compuesta en Inter. La marquesina comparte la tipografía de la interfaz, así que se lee como contenido y no como adorno.
El reflujo de landing page
El coste de una escala fluida es menos control sobre los tamaños exactos. A cambio, la línea de display se mantiene proporcionada, y por eso un clamp entre 13px y 16px está en el brief. Los controles siguen siendo lo bastante grandes para tocarlos y el texto mantiene su orden de lectura en cualquier ancho.
Hacer tuyo este tipo de landing page
Empieza por el texto, no por el color. Reescribe “An automated, reward-powered digital dollar built for native passive earnings and effortless connection into DeFi” como una sola frase sobre tu producto y colócala en Inter al tamaño que usa el brief. Reescribe el texto y el material antes de recolorear nada.
Las cifras detrás de landing page
Comprometerse con tipografía de 13px a 16px, secciones de 100vh y pasos de espaciado de 15px cambia flexibilidad por repetibilidad. Ese es el sentido de la referencia: la misma página en otra marca, sin un nuevo juego de suposiciones. Nada de este tipo de landing page depende de un valor por defecto.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de USD Halo?
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 458x800. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo reconstruir este diseño de landing page de USD Halo con otro stack?
USD Halo 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 USD Halo 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 458x800.
