Sobre esta plantilla
Lee Alumica como especificación de sección hero: los valores se escribieron antes de construir la página. “Automation & Fintech” es la línea que la maquetación está pensada para sostener. La paleta se queda en índigo intenso #080210 de base y naranja brillante #FF8A00 para los acentos, y el tipo es Inter. Se entrega como un único componente, así que el conjunto de sección hero se puede trasladar a un proyecto sin traspaso de diseño. El movimiento se limita a transiciones de 0.3s y un vídeo en bucle de fondo. Esta referencia es para un producto fintech que quiere la primera pantalla resuelta antes de empezar a construir.
Pensado para
- Si la referencia solo es un punto de partida, los diseñadores pueden conservar un único componente y rehacer el resto del diseño de sección hero.
- Equipos que rehacen su sección hero de fintech a partir de la referencia de un competidor y quieren dejar claro un único componente antes de que nadie se comprometa con un framework.
- Pasa un único componente al desarrollador con el recorte de 2056x1396 adjunto y deja que lo reconstruya.
Qué incluye
- La navegación es fina a propósito. La navegación es una tira fina y no una banda: marca a la izquierda, enlaces hacia el centro-derecha y una acción en #FF8A00, todo en la capa superior de sección hero y sin fondo propio. Los enlaces se componen a un tamaño menor que la marca, y la acción en #FF8A00 es el único elemento de la barra con peso.
- Números que llegan al montaje. El brief nombra las cifras: pasos de espaciado de 10px y transiciones de 0.3s. Por eso la composición se sostiene, porque no hay ningún paso de espaciado inventado entre el tipo y el marco. No hay ningún valor intermedio inventado entre los citados; la lista de medidas es todo el sistema.
- Un clip, no una ilustración. Los medios hacen trabajo atmosférico y no narrativo: un bucle de 5,8s a 2056x1396 detrás de todo lo demás. Un fotograma de póster a 2056x1396 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- Navegación sin fondo propio. 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. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
Movimiento e interacción
Todo el presupuesto de animación
El presupuesto de animación es pequeño y explícito: 0.3s, aplicado a cambios de estado y no a entradas. El easing se especifica junto a la duración (0.3s), así que una reconstrucción no puede colar otra sensación sin avisar.
Estados de puntero, nada más
La respuesta se limita a estados hover en los botones y los enlaces y no en todas las tarjetas, y eso es lo que evita que una primera pantalla densa se sienta cargada. Los estados de pulsación están especificados igual que el hover, así que un toque confirma lo mismo que un clic. Mantén pequeña la capa interactiva.
Leer Alumica como especificación
El tipo es la primera cifra: pasos de espaciado de 10px y transiciones de 0.3s. El espaciado se deriva de ahí, y todo lo demás en la página se coloca en relación con esos dos valores. Nada de este tipo de sección hero depende de un valor por defecto.
Qué cambiar primero en Alumica
La sustitución directa tiene un límite: si tu producto necesita otra jerarquía, pasos de espaciado de 10px y transiciones de 0.3s se resistirán. En ese caso cambia primero el orden y después los valores. Reescribe el texto y el material antes de recolorear nada.
Cómo ordena Alumica la primera lectura
Una página así suele enterrar la acción bajo una cuadrícula de funciones. Esta coloca navegación, el titular, la insignia de anuncio, la fila de cifras y el clip de fondo en una secuencia fija, con la acción dentro de la primera pantalla y no después de tres pantallas de scroll. Quien busca fintech recibe la oferta antes que las opciones.
Preguntas frecuentes
¿El prompt de Alumica es una especificación cerrada o un punto de partida?
El brief capturado ocupa 2.424 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 Alumica depende de un único componente?
Alumica se construyó en un único componente, 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.
¿El brief de Alumica es lo mismo que el prompt que escribiría yo?
Todo lo que se cita en la página procede del brief capturado de 2.424 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
