Sobre esta plantilla
Aquí no hay una captura sino un caso de sección hero de Bold Studio, con el brief original al lado. El titular de la propia página dice “FSP DEMO - PODIUM Sharp 4.11”, y la composición se construye alrededor de esas palabras exactas. El color se limita a rojo #A60D29 de base y blanco #F6E9EB 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 640x474 antes de escribir código. Todo el movimiento cabe en transiciones de 100ms. Tenlo abierto mientras escribes: el brief de 6.067 caracteres es la parte que se traslada a tu propia página.
Pensado para
- 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 Bold Studio.
- La composición sirve a equipos de contenidos que van a cambiar el titular y necesitan que los pesos de Inter mantengan el mismo ritmo.
- Este diseño de sección hero encaja con equipos de growth que van a hacer A/B con el titular sin tocar Inter.
Qué incluye
- La navegación es fina a propósito. La barra se superpone sobre sección hero en lugar de empujarla hacia abajo, así la composición conserva toda la altura de la primera pantalla. Los estados hover y de foco están definidos para cada enlace, y eso es lo que evita que una barra fina parezca inerte. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
- Valores que puedes comprobar. La lista se mantiene corta (pasos de espaciado de 30px y transiciones de 100ms), y por eso todo el sistema se puede comprobar a mano. Un remontaje que da esos números se parece a la referencia sin más ajustes.
- Pesos nombrados por papel. El tipo es Inter en lo alto de la escala, con el texto de apoyo muy por debajo, así la jerarquía no necesita color para leerse. El paso de pie de foto es lo bastante pequeño para situarse bajo una cifra sin alterar el ritmo de la página. No añadas un tamaño sin función.
- La composición es el contenido. La composición de sección hero está construida para que el texto llegue antes que nada: el tipo lleva la jerarquía, el marco de 640x474 sujeta la composición y los valores de apoyo se mantienen callados. La página es una sola composición a 640x474, y por eso se sostiene cuando cambia el texto. El brief es la especificación.
Movimiento e interacción
Cambios de estado medidos
Aquí el movimiento se mide en milisegundos: 100ms. Ese es todo el presupuesto de animación, y se gasta en cambios de estado y no en una línea de tiempo de scroll. Las duraciones son tan cortas que la respuesta se lee como reacción y no como animación.
Interacción contenida y local
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 salen de la paleta de la propia página y no de un valor por defecto de componente. No animes la maquetación en el hover.
Los tiempos detrás de sección hero
Cuando una página se siente inquieta, casi siempre sobran entradas. Esta mantiene la lista corta: transiciones de 100ms y estados hover y pulsados. Una librería solo cambiaría cómo se escribe el mismo movimiento.
El argumento de sección hero
Un hero genérico y este tipo de sección hero usan las mismas piezas. Aquí el orden lo dan navegación, el titular, la insignia de anuncio, la fila de cifras y el clip de fondo y todo se mide con pasos de espaciado de 30px y transiciones de 100ms, así que la pantalla se lee como una secuencia y no como un contenedor. Bold Studio enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Leer Bold Studio como especificación
La mayoría de las referencias muestra el resultado y se guarda las cifras. Esta lo invierte: publica pasos de espaciado de 30px y transiciones de 100ms junto a la página, para que el resultado se pueda reproducir y no aproximar. Nada de este tipo de sección hero depende de un valor por defecto.
Preguntas frecuentes
¿El prompt de Bold Studio es una especificación cerrada o un punto de partida?
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 640x474. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cuánto de Bold Studio depende de React y Tailwind CSS?
Bold Studio 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 Bold Studio 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 640x474.
