Sobre este template
Kresna Footer é a referência de rodapé para um produto de IA ou SaaS, e o briefing por trás dela é uma especificação de construção completa, não um moodboard. A paleta se reduz a branco #FFFFFF por baixo e azul profundo #111827 para a tipografia, e a tipografia é DM Sans. A stack é um único arquivo HTML autocontido, então dá para levar rodapé para um projeto sem handoff de design. O orçamento de movimento é transições de 0.2s. Trate como o briefing de uma rodapé para um produto de IA ou SaaS que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Feito para agências que apresentam trabalho de SaaS e precisam de um único arquivo HTML autocontido na primeira resposta ao cliente.
- Esta rodapé serve times que precisam justificar um breakpoint de 560px para alguém que não estava no kickoff.
- Entregue um único arquivo HTML autocontido ao engenheiro com o recorte em 800x586 anexado e deixe que ele reconstrua.
O que está incluído
- Navegação sem fundo próprio. Uma barra fina ocupa o topo de rodapé, com a marca à esquerda e os links em DM Sans, para a composição ler conteúdo primeiro e moldura depois. Abaixo de 560px os links colapsam em uma sobreposição de tela cheia. Abaixo de 560px os links colapsam em vez de quebrar para uma segunda linha.
- O cadastro como composição. Há uma única decisão aqui: preencher o formulário ou sair. Todo o resto da tela sustenta essa decisão. A ação fica logo abaixo do último campo, então a decisão nunca está a mais de um olhar de distância. Mantenha os rótulos visíveis; não use campos só com placeholder.
- Texto primeiro, decoração depois. A composição de rodapé é construída para o texto chegar antes de tudo: a tipografia carrega a hierarquia, a moldura em 800x586 segura a composição e os valores de apoio ficam discretos. A página é uma composição só em 800x586, e é por isso que ela se sustenta quando o texto muda.
- A barra segue a grade. Os rótulos são curtos o bastante para caber em uma linha a 560px, e o item ativo é marcado por peso, não por uma pílula.
Movimento e interação
Ruído como material
O briefing acrescenta grain de filme sobre a composição em 800x586, então a superfície lê como material, não como preenchimento sólido. Como é uma única camada, custa quase nada para portar.
Rápido o bastante para parecer intencional
Uma única duração cobre as interações (0.2s), e é isso que mantém hover e clique lendo como um sistema só. A curva de aceleração é especificada junto com a duração (0.2s), então uma reconstrução não pode trocar a sensação sem aviso.
O que um produto de IA ou SaaS ganha aqui
Kresna Footer funciona porque a hierarquia dela é decidida, não decorada. O briefing fixa passos de espaçamento de 28px, transições de 0.2s e um breakpoint de 560px, então um texto novo cai dentro da moldura em vez de reabri-la. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
Como a rodapé se reorganiza
A maior parte do trabalho responsivo para em esconder elementos. Aqui o layout muda de forma: o layout muda em 560px, e nada importante é descartado para a dobra caber. Nada importante é descartado em larguras estreitas.
Os números por trás da rodapé
A tipografia é o primeiro número: passos de espaçamento de 28px e transições de 0.2s. O espaçamento decorre dele, e todo o resto da página é posicionado contra esses dois valores. Nada nesta rodapé depende de um padrão.
Perguntas frequentes
Por que a entrada cita um único arquivo HTML autocontido?
Kresna Footer foi construído em um único arquivo HTML autocontido, e a entrada registra isso para dar procedência. O briefing descreve posições, tamanhos e tempos, então ele se reconstrói em qualquer framework capaz de definir tipografia e posicionar elementos.
Por que o prompt do Kresna Footer não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 9.163 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Qual é o tamanho do prompt por trás de Kresna Footer?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x586, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
