Sobre este template
Asme entrega a um produto de IA ou SaaS uma primeira tela pronta e os números que a produziram. A cor se limita a preto #000000 por baixo e cinza #C9CAB9 para a tipografia, composta em Instrument Serif. A entrega é React e Tailwind CSS, capturada em 800x582 para a moldura estar fixada antes de qualquer linha de código. O movimento cabe todo em transições de 500ms. Trate como o briefing de uma hero para um produto de IA ou SaaS que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Quem briefa um modelo para uma hero vai usar o prompt de 4.360 caracteres como ponto de partida.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Asme.
- Fundadores que lançam um produto de IA ou SaaS hero e precisam da decisão de Instrument Serif e da escala tipográfica antes de um desenvolvedor começar.
O que está incluído
- Uma linha, sem gaveta. Uma fileira curta de links e uma única ação ficam sobre a hero, presas a transições de 500ms, para a barra nunca competir com a composição atrás dela. O menu mobile faz parte do briefing, então o estado colapsado foi desenhado, não improvisado.
- Prova em uma fileira. Os números são compostos em Instrument Serif em um tamanho mais próximo do título do que do corpo de texto. Não há divisores dentro da fileira; só o espaçamento separa os números. Iguale o tamanho do rótulo ao passo de legenda.
- Uma barra de navegação que sai do caminho. A barra é uma linha de texto e uma ação, medida em transições de 500ms, para ler como faixa e não como bloco.
Movimento e interação
Uma duração para os controles
Os tempos são curtos e consistentes (500ms), então os estados de hover e de clique leem como um sistema só, não como um conjunto de efeitos separados. Os valores são curtos o bastante para ler como feedback, não como animação. Cronometre o feedback com exatidão.
Movimento que sai da frente
Não há biblioteca de scroll aqui: a composição em 800x582 fica parada e só se movem os elementos que respondem a você. Só se movem os elementos que respondem ao ponteiro.
Como a hero se reorganiza
Não dá para resolver uma tela estreita encolhendo-a. Este briefing trata a mudança na tipografia e na navegação: a escala é fluida, não em degraus. A largura muda as medidas, não a rota de leitura.
A ordem por trás da hero
Quando um leitor de SaaS cai em uma tela única, ele escaneia antes de ler. O layout responde a isso: a navegação, o título, a linha de estatísticas, o clipe de fundo e o rodapé são dimensionados para o escaneamento, com transições de 500ms mantendo cada parada distinta. O leitor de SaaS recebe a oferta antes das opções.
O que se move em Asme
O movimento aqui é um conjunto de decisões, não uma biblioteca: transições de 500ms e estados de hover e de clique, e nada anima no scroll. O resultado é uma página que parece autoral: durações curtas, uma entrada e mudanças de estado que confirmam uma ação em vez de decorá-la. Nada anima por si nesta hero.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Asme?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x582, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Preciso de React e Tailwind CSS para reconstruir Asme?
Asme foi construído em React e Tailwind CSS, 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.
De onde veio o design de Asme?
O briefing é uma descrição, não uma licença para redistribuir os ativos de outra pessoa. Mantenha a estrutura e os números, substitua a mídia e as marcas, e credite a origem se um cliente perguntar de onde veio o layout. A referência tem captura em 800x582.
