Sobre esta plantilla
Equilibrium es una referencia de trabajo para un producto de IA o SaaS: el desglose de sección hero, con la maquetación medida y lista para recrear. La paleta es azul intenso #0F1118 de base y naranja apagado #CDBAB2 para la tipografía, con la tipografía Geist. La entrega es React y Tailwind CSS: una página, sin plugins y sin herramientas de build entre tú y el diseño. Esta referencia es para un producto de IA o SaaS que quiere la primera pantalla resuelta antes de empezar a construir.
Pensado para
- Quien usa un generador con IA y quiere un brief que ya incluya un marco de 640x472 en vez de dejarlo todo al modelo.
- Pensado para agencias que facturan por ronda y quieren acordar pasos de espaciado de 72px antes de la primera.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 4.787 caracteres como punto de partida.
Qué incluye
- Fila superior, una acción. Una barra fina ocupa la parte superior de sección hero, con la marca a la izquierda y los enlaces compuestos en Geist, de modo que la composición se lee antes como contenido que como interfaz. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. Las etiquetas son lo bastante cortas para caber en una línea en cualquier ancho que cubra el brief.
- Tamaños fijados en el brief. Los tamaños se leyeron del render en 640x472: pasos de espaciado de 72px. Un remontaje que da esos números se parece a la referencia sin más ajustes.
- Una barra de navegación que no estorba. El espaciado entre enlaces viene del relleno y no de divisores, así la fila se lee como un solo objeto. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
- Todas las medidas están escritas. El espaciado se cita igual (pasos de espaciado de 72px), no como una escala que crece sola.
Movimiento e interacción
Movimiento que no estorba
Aquí no hay librería de scroll: la composición de 640x472 se queda quieta y solo se mueven los elementos que responden a ti. Solo se mueven los elementos que responden al puntero. Deja el movimiento en los controles.
Casi nada de movimiento
Esta se entrega como composición estática en 640x472, así que la jerarquía tiene que funcionar sin movimiento, y funciona.
Las cifras detrás de sección hero
El coste de una escala fija es menos margen para improvisar. Con pasos de espaciado de 72px la composición se mantiene coherente, pero un elemento nuevo hay que encajarlo y no simplemente colocarlo. Nada de este tipo de sección hero depende de un valor por defecto.
El reflujo de sección hero
Una pantalla estrecha no se arregla encogiéndola. Este brief resuelve el cambio en el tipo y en la navegación: la navegación se pliega en un menú móvil. El orden es lo último que cambia.
El orden detrás de sección hero
El brief ocupa 4.787 caracteres y nombra el orden de lectura sin rodeos: navegación, la insignia de anuncio, la fila de cifras y el clip de fondo, con pasos de espaciado de 72px entre medias. Quien busca SaaS recibe la oferta antes que las opciones.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Equilibrium?
El brief capturado ocupa 4.787 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.
¿Cuánto de Equilibrium depende de React y Tailwind CSS?
Equilibrium 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.
¿Qué gobierna el movimiento en Equilibrium?
Las entradas y los cambios de estado se quedan en menos de un segundo. Los dispara un cambio de estado, no una biblioteca de scroll, y nunca retrasan el contenido. La captura de la referencia es de 640x472.
