Sobre esta plantilla
Aethera Studio es una referencia de trabajo para una agencia o un estudio: el desglose de sección hero, con la maquetación medida y lista para recrear. “Beyond silence, we build the eternal” es la línea que la maquetación está pensada para sostener. La paleta se queda en blanco #FFFFFF de base y negro #000000 para la tipografía, y el tipo es Instrument Serif. La entrega es React y Tailwind CSS: una página, sin plugins y sin herramientas de build entre tú y el diseño. El presupuesto de movimiento se agota en transiciones de 100ms. Tenlo abierto mientras escribes: el brief de 3.169 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Pensado para agencias que presentan propuestas de agencia y necesitan incluir un marco de 800x582 en la primera respuesta al cliente.
- 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 Aethera Studio.
- Este diseño de sección hero encaja con equipos de growth que van a hacer A/B con el titular sin tocar Instrument Serif.
Qué incluye
- Una barra de navegación que no estorba. Una serie corta de enlaces y una única acción se sitúan sobre sección hero, sostenidas en pasos de espaciado de 75px y transiciones de 100ms, de manera que la barra nunca compite con la composición que tiene detrás. El espaciado entre enlaces viene del relleno y no de divisores, así la fila se lee como un solo objeto. Diseña el estado colapsado antes de añadir un sexto enlace.
- El tipo lleva el tono. Con Instrument Serif haciendo el trabajo, los tamaños bajan de golpe del titular al texto de apoyo y el interletraje se cierra a medida que crece el tamaño, así que la jerarquía la lleva el tipo y no el color. Sustituir la fuente es posible, pero las proporciones tienen que sobrevivir al cambio. La escala está citada; úsala.
- Primero el texto, después el adorno. La composición está completa en 800x582: el texto, los medios y los controles están nombrados en el brief. La página es una sola composición a 800x582, y por eso se sostiene cuando cambia el texto. Conserva el marco; cambia el tema.
- Fila superior: marca, enlaces y acción. 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. La sección activa se marca con peso, no con una píldora ni con un subrayado. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
Movimiento e interacción
Duraciones del brief
Los controles se resuelven en 100ms, lo bastante rápido para que la página responda al tocarla y no después. Un mismo valor se reutiliza en todos los controles, así que sus tiempos no se separan.
Una superficie interactiva pequeña
La interacción se queda en cada control (estados hover en los botones y los enlaces y no en todas las tarjetas), así que nada más de la página se mueve como efecto secundario. Los estados están nombrados en el brief, así que la página no depende de ninguna librería de efectos hover.
Qué cambiar primero en Aethera Studio
Cambia primero el texto y el material, después el color y por último la maquetación. El marco de 800x582 y la escala de Instrument Serif son lo que sostiene la página, así que sustituye alrededor de ellos y no a través de ellos. Reescribe la línea de display antes de tocar el color.
El brief de agencia se sostiene
La contención te cuesta espacio para pruebas por encima de la primera pantalla. Este brief acepta ese coste y gasta la primera pantalla en la oferta, con las cifras ya fijadas (pasos de espaciado de 75px y transiciones de 100ms) para poder añadir abajo una sección de prueba sin rehacer nada. Da a quien lee páginas de agencia el camino más corto y honesto hasta la oferta.
El reflujo de sección hero
Una escala fija de escritorio habría sido más fácil. El brief añade un clamp entre 20px y 75px, y eso es lo que mantiene proporcionada la línea de display entre anchos. Un apretujón habría sido más barato y no aguantaría.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Aethera Studio?
El brief capturado ocupa 3.169 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.
¿Necesito React y Tailwind CSS para recrear Aethera Studio?
Aethera 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 quedarme con las transiciones de Aethera Studio y cambiar los tiempos?
Las transiciones van asociadas a estados de la interfaz y no a una línea de tiempo de scroll, y se resuelven en el rango de 100ms. El brief anota los valores para que un port no tenga que adivinarlos.
