Sobre esta plantilla
Retro-Futurist conserva el rastro de sus decisiones: el brief que hay detrás de sección hero ocupa 5.713 caracteres. El titular dice “Glad you stopped in. Good taste tends to find us. Now, what are we building?”, y el orden de sección hero gira alrededor de esa línea. La paleta se queda en gris #B3B1B3 de base, y el tipo es HelveticaNowDisplay-Medium. El montaje es React y Tailwind CSS; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. La página reduce el movimiento a transiciones de 38ms. Tenlo abierto mientras escribes: el brief de 5.713 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Si le pasas el brief a un modelo en lugar de a un diseñador, toma como punto de partida sección hero y deja que el prompt recoja un marco de 640x474.
- Equipos que construyen este tipo de sección hero para una agencia o un estudio y quieren el detalle medido (tipografía de 13px a 32px y pasos de espaciado de 26px) en lugar de una captura que copiar.
- 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 Retro-Futurist.
Qué incluye
- Los enlaces colapsan a un ancho. La navegación es una sola fila, sin un segundo nivel debajo. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. Los estados hover y de foco están definidos para cada enlace, y eso es lo que evita que una barra fina parezca inerte. Mantén la fila en una sola línea.
- Medido contra el viewport. El brief nombra las cifras: tipografía de 13px a 32px, pasos de espaciado de 26px y transiciones de 38ms. Por eso la composición se sostiene, porque no hay ningún paso de espaciado inventado entre el tipo y el marco. Los valores se citan del prompt capturado y no se deducen, por eso sobreviven a un nuevo render.
- Insignia sobre el pliegue. Una insignia, un mensaje: la píldora se sitúa sobre el titular en HelveticaNowDisplay-Medium al paso más pequeño, y nada más compite por ese hueco. La píldora se compone en el paso más pequeño del brief, así se lee como etiqueta y no como un segundo título.
- Prueba en una sola fila. Una franja compacta de cifras sostiene las afirmaciones que de otro modo pedirían un párrafo, lo que evita que la composición de sección hero se convierta en una lista de funciones. El paso de la etiqueta se cita en el brief, así se mantiene por debajo de las cifras tras una sustitución. Comprueba la fila en el ancho más estrecho. La captura de la referencia es de 640x474.
Movimiento e interacción
Rápido, pero deliberado
Las transiciones están fijadas en 38ms, y ese es el tiempo que deben cumplir los controles. Los tiempos cortos son la razón de que la página se lea como diseñada; un valor por defecto lento desharía la composición.
Casi nada de movimiento
Esta se entrega como composición estática en 640x474, así que la jerarquía tiene que funcionar sin movimiento, y funciona. El brief no incluye ninguna librería de animación, lo que mantiene pequeña la reconstrucción.
Qué cambiar primero en Retro-Futurist
Una línea, una fuente y un acento: esas tres sustituciones son las que más cambian el diseño. Los valores que no deberían moverse son estos: tipografía de 13px a 32px, pasos de espaciado de 26px y transiciones de 38ms. Otra marca puede reutilizar el marco entero.
Las cifras detrás de sección hero
Cada relación de esta página es un valor que puedes comprobar: tipografía de 13px a 32px, pasos de espaciado de 26px y transiciones de 38ms. Eso es lo que hace que Retro-Futurist se pueda reconstruir y no solo reproducir. Nada de este tipo de sección hero depende de un valor por defecto.
El brief de agencia se sostiene
5.713 caracteres de brief producen una sola pantalla sin relleno. Los valores que contiene son explícitos (tipografía de 13px a 32px y pasos de espaciado de 26px), y por eso la composición se sigue leyendo cuando cambian las palabras. Retro-Futurist enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Retro-Futurist?
El brief capturado ocupa 5.713 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?
Retro-Futurist 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 Retro-Futurist y cambiar los tiempos?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 38ms. Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.
