Sobre esta plantilla
Kresna Footer es un caso de pie de página de SaaS: nace de un único brief escrito y esta página lo documenta. El esquema de color es blanco #FFFFFF de base y azul intenso #111827 para la tipografía, y la página está compuesta en DM Sans. Se entrega como un único archivo HTML autocontenido, así que el conjunto de pie de página se puede trasladar a un proyecto sin traspaso de diseño. La página reduce el movimiento a transiciones de 0.2s. Cuando prepares el brief de cada pie de página de SaaS, parte de esta composición y sustituye el tema.
Pensado para
- Si le pasas el brief a un modelo en lugar de a un diseñador, toma como punto de partida pie de página y deja que el prompt recoja un único archivo HTML autocontenido.
- Si la referencia solo es un punto de partida, los diseñadores pueden conservar un breakpoint de 560px y rehacer el resto del diseño de pie de página.
- Equipos externos que se hacen cargo de su pie de página y necesitan fijar un marco de 800x586 en el repositorio antes del primer commit.
Qué incluye
- Los enlaces colapsan a un ancho. Una barra fina ocupa la parte superior de pie de página, con la marca a la izquierda y los enlaces compuestos en DM Sans, de modo que la composición se lee antes como contenido que como interfaz. Por debajo de 560px los enlaces se pliegan en una superposición a pantalla completa. Por debajo de 560px los enlaces colapsan en lugar de saltar a una segunda línea.
- El registro como composición. Aquí solo hay una decisión: rellenar el formulario o marcharse. Todo lo demás de la pantalla sostiene esa decisión. Los estados de error y de foco están especificados y no se dejan al navegador. Mantén las etiquetas visibles; no uses campos solo con placeholder.
- Primero el texto, después el adorno. La composición de pie de página está construida para que el texto llegue antes que nada: el tipo lleva la jerarquía, el marco de 800x586 sujeta la composición y los valores de apoyo se mantienen callados. La página es una sola composición a 800x586, y por eso se sostiene cuando cambia el texto.
- Una barra sin nada de más. Las etiquetas son lo bastante cortas para caber en una línea a 560px, y el elemento activo se marca con peso y no con una píldora.
Movimiento e interacción
El ruido como material
Una capa de grano se asienta sobre blanco #FFFFFF, así que las grandes áreas planas se leen como material y no como relleno liso. Sustituye al degradado que una página así usaría normalmente para dar profundidad.
Rápido, pero deliberado
Los tiempos son cortos y coherentes (0.2s), así que el hover y la pulsación se leen como un solo sistema y no como un conjunto de efectos sueltos. El easing se especifica junto a la duración (0.2s), así que una reconstrucción no puede colar otra sensación sin avisar.
Qué gana un producto de IA o SaaS aquí
Una capa de tinte sobre el material habría sido la solución fácil. El brief la deja fuera. El medio es una imagen fija en 800x586. El texto aguanta igual porque pasos de espaciado de 28px y transiciones de 0.2s mantienen el marco tranquilo. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
El reflujo de pie de página
Casi todo el trabajo responsive se queda en esconder elementos. Aquí la maquetación cambia de forma: la maquetación cambia a 560px, y no se elimina nada importante para que quepa la primera pantalla. Los dos estados están descritos en el mismo brief.
Leer Kresna Footer como especificación
Compara esto con una plantilla que llama preferencia a su espaciado. Aquí los mismos valores tienen nombre (pasos de espaciado de 28px, transiciones de 0.2s y un breakpoint de 560px), así que un cambio o los respeta o rompe la composición a la vista. Nada de este tipo de pie de página depende de un valor por defecto.
Preguntas frecuentes
¿Cuánto de Kresna Footer depende de un único archivo HTML autocontenido?
Kresna Footer se construyó en un único archivo HTML autocontenido, 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é puedo hacer con el brief de Kresna Footer una vez lo tengo?
Todo lo que se cita en la página procede del brief capturado de 9.163 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿El prompt de Kresna Footer es una especificación cerrada o un punto de partida?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 800x586. En ningún punto la imagen renderizada funciona como fuente de la verdad.
