Sobre esta plantilla
Lumina resuelve el problema de cada pie de página de una marca de educación o comunidad con un solo brief capturado. Abre con “Lumina provides premium clarity on global events and cosmic wonders - shared with all for free” y le da el marco a esa línea en lugar de encogerla en una tarjeta. La paleta es azul #2F4458 de base y gris #CFC2B7 para la tipografía, con la tipografía Helvetica. Se entrega como React y Tailwind CSS, y la captura se fija a 800x585 antes de escribir código. Sirve de referencia cuando construyas este tipo de pie de página para una marca de educación o comunidad y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Los responsables de marketing que hereden un diseño de pie de página usarán secciones de 115vh y pasos de espaciado de 10px para comprobar que una reescritura mantuvo la escala.
- Los responsables de estudio que llevan varios proyectos a la vez usarán este diseño de pie de página como patrón que copian las demás páginas.
- Pensado para responsables de producto que necesitan acotar el diseño de pie de página a un sprint y no añadir material nuevo.
Qué incluye
- Números que llegan al montaje. La maquetación se resuelve con valores fijos (secciones de 115vh y pasos de espaciado de 10px), y eso es lo que mantiene compuesta la primera pantalla a cualquier ancho. Cada valor se puede comprobar contra el prompt capturado, y eso hace que un remontaje sea verificable y no aproximado.
- El tipo lleva el tono. Las fuentes tienen papeles asignados y no se mezclan: Helvetica sostiene a la vez la línea display y la interfaz. Cambiar de tipografía es seguro mientras los tamaños y los pesos se queden donde los puso el brief.
- Estructura en una sola pantalla. Todo lo que está por encima del pliegue se gana su sitio. El brief nombra el texto, el marco de 800x585 y los tamaños de tipo, y no deja nada decorativo compitiendo con ellos. La página es una sola composición a 800x585, y por eso se sostiene cuando cambia el texto.
- Los pasos de espaciado van cifrados. El espaciado se cita igual (secciones de 115vh y pasos de espaciado de 10px), no como una escala que crece sola.
Movimiento e interacción
Estático a propósito
Aquí no hay librería de scroll: la composición de 800x585 se queda quieta y solo se mueven los elementos que responden a ti. La composición se queda quieta, así que la jerarquía tiene que sostener la página, y lo hace.
Casi nada de movimiento
Esta se entrega como composición estática en 800x585, así que la jerarquía tiene que funcionar sin movimiento, y funciona.
Las cifras detrás de pie de página
Una reconstrucción suele empezar con una captura y una suposición. Aquí empieza con 5.113 caracteres de especificación: el marco, el espaciado y el movimiento están escritos antes de la primera línea de código. Nada de este tipo de pie de página depende de un valor por defecto.
Cómo ordena Lumina la primera lectura
Cuando alguien que busca educación aterriza en una sola pantalla, escanea antes de leer. La maquetación responde a eso: la fila de cifras, el clip de fondo y el pie de página se dimensionan para el escaneo, con secciones de 115vh y pasos de espaciado de 10px manteniendo cada parada distinta. Quien busca educación recibe la oferta antes que las opciones.
Qué gana una marca de educación o comunidad aquí
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 (secciones de 115vh y pasos de espaciado de 10px) para poder añadir abajo una sección de prueba sin rehacer nada. Lumina 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 Lumina?
El brief capturado ocupa 5.113 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.
¿El brief de Lumina es lo mismo que el prompt que escribiría yo?
Todo lo que se cita en la página procede del brief capturado de 5.113 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Puedo reconstruir este diseño de pie de página de Lumina con otro stack?
Lumina 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.
