Sobre esta plantilla
VaultShield se capturó a 640x468 y se conserva como especificación, no como imagen de galería. La paleta es gris #CFC8C5 de base, tono oscuro #192837 para la tipografía y tono oscuro #7342E2 para los acentos, con la tipografía Helvetica Now Display. La referencia está construida con React y Tailwind CSS, y las decisiones de maquetación se documentan aparte. El presupuesto de movimiento se agota en transiciones de 0.45s. Es la referencia adecuada para este tipo de sección hero en un producto fintech, que tiene que transmitir intención desde la primera pantalla.
Pensado para
- Pensado para estudios que tienen que explicar a un cliente el comportamiento a 560px sin construir antes un prototipo.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 4.734 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de sección hero cuyo titular tiene que seguir siendo tan largo como el de VaultShield.
Qué incluye
- Una barra sin nada de más. La fila superior reúne la marca, cuatro o cinco enlaces y una sola acción teñida de #7342E2, dimensionada para no destacar frente al resto de la página. Por debajo de 560px los enlaces se pliegan en una superposición a pantalla completa. Por debajo de 560px los enlaces colapsan en lugar de saltar a una segunda línea.
- El comportamiento se define por ancho. El brief usa un clamp entre 72px y 24px para el titular, y eso es lo que evita que una línea larga se rompa de forma torpe. El tipo cambia de tamaño, no de papel, a medida que se estrecha el viewport. Diseña la maquetación estrecha, no la aprietes.
- El tipo fija la jerarquía. Los pasos de tamaño y el interletraje del brief son los que dan el tono: Helvetica Now Display a un tamaño display cerrado y una caída clara hasta el texto de apoyo. Sustituir la fuente es posible, pero las proporciones tienen que sobrevivir al cambio. Comprueba la escala en gris.
- Una fila, sin desplegables. Una acción por barra. La captura de la referencia es de 640x468.
Movimiento e interacción
Una duración para los controles
El brief fija la transición en 0.45s, así que una reconstrucción no puede colar un valor por defecto más lento. El easing se especifica junto a la duración (0.45s), así que una reconstrucción no puede colar otra sensación sin avisar.
Una superficie interactiva pequeña
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. Los estados de pulsación están especificados igual que el hover, así que un toque confirma lo mismo que un clic.
Qué cambiar primero en VaultShield
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 tono oscuro #7342E2 contra tu propio material. El tema es la parte que debería cambiar.
Las cifras detrás de sección hero
Esto es lo que hace reutilizable la referencia: secciones de 100vh, pasos de espaciado de 24px, transiciones de 0.45s y un breakpoint de 560px. Nada queda en un valor por defecto, así que una sustitución que conserve esos números conserva la composición. Nada de este tipo de sección hero depende de un valor por defecto.
El orden detrás de sección hero
Cuando alguien que busca fintech aterriza en una sola pantalla, escanea antes de leer. La maquetación responde a eso: navegación, la fila de cifras, la lista de funciones y el clip de fondo se dimensionan para el escaneo, con secciones de 100vh y pasos de espaciado de 24px manteniendo cada parada distinta. Quien busca fintech recibe la oferta antes que las opciones.
Preguntas frecuentes
¿El prompt de VaultShield es una especificación cerrada o un punto de partida?
El brief capturado ocupa 4.734 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?
VaultShield 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 quedarme con las transiciones de VaultShield y cambiar los tiempos?
Las entradas y los cambios de estado se quedan en 0.45s. Los dispara un cambio de estado, no una biblioteca de scroll, y nunca retrasan el contenido.
