Sobre este template
Palomar Labs é uma referência prática para um produto de IA ou SaaS: landing page com layout definido, medidas tiradas e tudo pronto para reconstruir. A paleta é branco #F5F3EF por baixo e verde profundo #2D3A2E para a tipografia, com tipografia Montserrat. A entrega é React e Tailwind CSS, capturada em 1920x1422 para a moldura estar fixada antes de qualquer linha de código. Tudo o que se move cabe em transições de 240ms, cubic-bezier(0.16, 1, 0.3, 1) e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 7.574 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Profissionais de marketing de produto que precisam que landing page continue legível com 6,7s de vídeo em loop atrás do texto.
- Feito para quem cuida do conteúdo e reescreve uma landing page cujo título precisa continuar tão longo quanto o da Palomar Labs.
- Feito para desenvolvedores front-end que querem o tempo de 240ms e a cubic-bezier(0.16, 1, 0.3, 1) definidos antes de escrever um keyframe.
O que está incluído
- Topo com uma única ação. Uma fileira curta de links e uma única ação ficam sobre a landing page, presas a passos de espaçamento de 20px e transições de 240ms, para a barra nunca competir com a composição atrás dela. Os estados de hover e de foco estão especificados para cada link, e é isso que impede uma barra fina de parecer inerte. Mantenha de quatro a cinco links; a linha foi dimensionada para isso.
- Um elemento de mídia carrega o clima. Um clipe de 6,7s em 1920x1422 faz o trabalho de atmosfera; o briefing fixa o recorte e deixa a tipografia intacta por cima. O loop é curto o bastante (6,7s) para o olho ler como textura e não como linha do tempo.
- Uma lista, não uma parede de cards. Os recursos são compostos como lista em Montserrat, não como grade de cards, o que mantém a página densa e rápida de varrer em tela estreita. Os itens compartilham um tamanho e um marcador, o que mantém uma lista longa fácil de varrer.
- O rodapé é uma composição inteira. Os links se agrupam em colunas e a marca fica em um bloco próprio, o que mantém um rodapé longo legível em vez de virar uma lista corrida. O destaque reaparece em uma ação do rodapé, não na faixa inteira. Reserve o destaque para uma única ação.
Movimento e interação
Feedback nos controles
O feedback se limita a estados de hover nos botões e links, não em todos os cards, então o resto do layout é uma composição fixa. Os estados estão nomeados no briefing, então a página não depende de uma biblioteca de efeitos de hover. Alguns estados confiáveis valem mais que uma lista longa de efeitos.
Tempos curtos e combinados
Hover, clique e foco resolvem todos em 240ms, e é isso que faz a interface parecer imediata. Um mesmo valor se repete nos controles, então o tempo deles não pode divergir.
Os números por trás da landing page
Uma captura de tela mostra como a página é; o briefing mostra por quê. passos de espaçamento de 20px, transições de 240ms e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1) fecham a distância entre os dois. Nada nesta landing page depende de um padrão.
O tempo por trás da landing page
O movimento se limita a transições de 240ms, um loop de mídia de 6,7s e estados de hover e de clique. Nada na landing page anima por mais tempo do que o briefing permite. Nada anima por si nesta landing page.
O argumento que esta landing page faz
Uma tela significa uma decisão para o leitor, e esse é o custo deste layout: todo o resto vai para baixo da dobra. O briefing declara passos de espaçamento de 20px, transições de 240ms e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1) para que as seções de baixo mantenham o mesmo ritmo. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Palomar Labs?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1920x1422, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de Palomar Labs depende de React e Tailwind CSS?
Palomar Labs 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 Palomar Labs?
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 1920x1422.
