Sobre este template
Equilibrium mostra uma forma de construir hero para um produto de IA ou SaaS e publica as instruções que produziram o resultado. A paleta se reduz a azul profundo #0F1118 por baixo e laranja suave #CDBAB2 para a tipografia, e a tipografia é Geist. A stack é React e Tailwind CSS; cada medida está registrada, e é isso que a torna reaproveitável. Deixe aberto enquanto escreve: o briefing de 4.787 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Pegue a moldura em 640x472 e passos de espaçamento de 72px desta hero antes de pegar qualquer outra coisa.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Equilibrium.
- Quem cuida do conteúdo e precisa encaixar um título maior vai usar a contagem de linhas de Geist como limite, não a de caracteres.
O que está incluído
- Topo com uma única ação. A barra é uma linha de texto e uma ação, medida em passos de espaçamento de 72px, para ler como faixa e não como bloco. O menu mobile faz parte do briefing, então o estado colapsado foi desenhado, não improvisado.
- A escala cai com força. No topo da escala está Geist, com o texto de apoio bem abaixo, para a hierarquia não precisar de cor para ser lida. O tracking é definido por tamanho, então a linha de display e a legenda não compartilham um mesmo letter-spacing.
- Texto primeiro, decoração depois. A composição inteira cabe em uma tela e é entregue como React e Tailwind CSS, com texto, mídia e controles nomeados no briefing. A página é uma composição só em 640x472, e é por isso que ela se sustenta quando o texto muda.
- A navegação é fina de propósito. A barra fica sobre a hero em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. Nada na barra anima com o scroll; ela está presente desde o primeiro frame e depois sai do caminho. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
Movimento e interação
Quase nenhum movimento
O briefing deixa a animação de fora e deixa o layout em 640x472 conduzir a página, com estados de hover e de clique como únicas mudanças. Não há biblioteca de animação no briefing, o que mantém a reconstrução enxuta. A quietude é uma escolha válida.
Estático por decisão
Esta é entregue como composição estática em 640x472, então a hierarquia precisa funcionar sem movimento, e funciona.
Os números por trás da hero
Um briefing de 4.787 caracteres produz uma especificação completa. A parte estrutural é curta: passos de espaçamento de 72px. Nada nesta hero depende de um padrão.
Como a hero se reorganiza
Enquanto um template colapsa para uma coluna e torce, este briefing declara o que acontece (a navegação vira um menu compacto no celular) e mantém a ordem intacta. A reprodução automática e o movimento são tratados com honestidade, então a página continua comunicando quando eles não estão disponíveis.
Como Equilibrium ordena a primeira leitura
Assumir uma única rota de leitura significa fechar as outras. O briefing aceita isso, fixa a navegação, o selo de anúncio, a linha de estatísticas e o clipe de fundo no lugar e gasta passos de espaçamento de 72px para tornar a rota óbvia. O leitor de SaaS recebe a oferta antes das opções.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Equilibrium?
O briefing capturado tem 4.787 caracteres e cobre a moldura, a escala tipográfica, a paleta e as transições. Ao copiá-lo você recebe esse texto; ao enviá-lo ao Studio, o mesmo pedido é preparado com a página já descrita.
Posso reconstruir hero do Equilibrium em outra stack?
Equilibrium 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.
Posso manter as transições de Equilibrium e mudar os tempos?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de menos de 1s. O briefing registra os valores para que quem for portar a página não precise adivinhar. A referência tem captura em 640x472.
