Sobre este template
Esta é a landing page da Coffee Rewards, publicada com o briefing que a produziu em vez de apenas uma captura de tela. O título da própria página é “Plum Parfait Latte”, e a composição é construída em volta exatamente dessas palavras. O esquema de cores é laranja profundo #070402 por baixo e #EDE4D8 para a tipografia, e a página é composta em Helvetica Now Display. A stack é Vite; cada medida está registrada, e é isso que a torna reaproveitável. O briefing gasta o orçamento de movimento em transições de 0.7s, cubic-bezier(0.16, 1, 0.3, 1) e um loop de vídeo ao fundo. É a referência certa para landing page para uma marca de e-commerce que precisa parecer intencional já na primeira tela.
Feito para
- Product managers que precisam estimar a construção vão ler uma moldura em 1482x1080 como o escopo do trabalho.
- Profissionais de marketing de produto que precisam que landing page continue legível com 5,9s de vídeo em loop atrás do texto.
- Quem briefa um modelo para uma landing page vai usar o prompt de 5.054 caracteres como ponto de partida.
O que está incluído
- O briefing nomeia os passos. Os tamanhos são declarados, não herdados: passos de espaçamento de 16px, transições de 0.7s e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1). Troque a família tipográfica ou o texto e essas relações continuam valendo. Uma reconstrução que atinge esses números fica igual à referência sem mais ajustes.
- Mídia sem sobreposição. A mídia faz trabalho de atmosfera, não de narrativa: um loop de 5,9s em 1482x1080 atrás de tudo. Exporte em 1482x1080 ou mais largo e o recorte cover continua funcionando.
- Uma família, dois papéis. No topo da escala está Helvetica Now Display, com o texto de apoio bem abaixo, para a hierarquia não precisar de cor para ser lida. A altura de linha segue os passos de tamanho, não um valor global único.
- Tamanhos fixados no briefing. O espaçamento é declarado do mesmo jeito (passos de espaçamento de 16px, transições de 0.7s e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1)), não como uma escala que cresce sozinha.
Movimento e interação
O loop faz o trabalho ambiente
Um único clipe de 5,9s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage ao ponteiro. Nada mais na página anima continuamente, então a mídia é a única coisa pedindo atenção.
Durações curtas e nomeadas
As mudanças de estado estão especificadas em 0.7s, então o feedback dos controles é um valor projetado, não o padrão do navegador. A curva de aceleração é especificada junto com a duração (0.7s), então uma reconstrução não pode trocar a sensação sem aviso. Cronometre o feedback com exatidão.
O que uma marca de e-commerce ganha aqui
Uma camada de tingimento sobre a mídia teria sido a solução fácil. O briefing a deixa de fora. A mídia é um loop de 5,9s em 1482x1080. O texto continua legível porque passos de espaçamento de 16px e transições de 0.7s mantêm a moldura calma. Dá ao leitor de e-commerce a rota honesta mais curta até a oferta.
O tempo por trás da landing page
O movimento se limita a transições de 0.7s, um loop de mídia de 5,9s e um canvas ao vivo; ele roda uma vez na entrada e depois sai da frente, que é o orçamento certo para landing page continuar legível. Nada anima por si nesta landing page.
Os números por trás da landing page
Toda relação nesta página é um valor que dá para conferir: passos de espaçamento de 16px, transições de 0.7s e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1). É isso que torna Coffee Rewards reconstruível, e não apenas reproduzível. Nada nesta landing page depende de um padrão.
Perguntas frequentes
O prompt de Coffee Rewards é uma especificação pronta ou um ponto de partida?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1482x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Posso reconstruir landing page do Coffee Rewards em outra stack?
A referência foi construída em Vite por circunstância de produção. Nada no layout depende dessa escolha: os valores de espaçamento, tipografia e movimento passam para o que você já usa.
De onde veio o design de Coffee Rewards?
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 1482x1080.
