Sobre este template
Retro-Futurist preserva o rastro das decisões: o briefing que produziu esta hero tem 5.713 caracteres. “Glad you stopped in. Good taste tends to find us. Now, what are we building?” é a linha que o layout foi construído para sustentar. O esquema de cores é cinza #B3B1B3 por baixo, e a página é composta em HelveticaNowDisplay-Medium. A stack é React e Tailwind CSS; cada medida está registrada, e é isso que a torna reaproveitável. O movimento cabe todo em transições de 38ms. Deixe aberto enquanto escreve: o briefing de 5.713 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Times de growth que redesenham uma agência ou estúdio hero e querem a moldura em 640x474 mantida enquanto o texto da oferta muda.
- Times que constroem hero para uma agência ou estúdio e querem o detalhe medido (tipografia de 13px a 32px e passos de espaçamento de 26px) em vez de uma captura de tela para copiar.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Retro-Futurist.
O que está incluído
- Uma linha, sem gaveta. 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. A ação carrega o destaque enquanto os links ficam na cor do texto, então a hierarquia da barra acompanha a da página abaixo. Teste a barra sobre a sua própria mídia antes de dar um fundo a ela. A referência tem captura em 640x474.
- Toda medida está escrita. Nada no layout fica por sensação: o briefing cita tipografia de 13px a 32px, passos de espaçamento de 26px e transições de 38ms e a construção precisa atingir esses valores. A lista é curta o bastante para um revisor conferir elemento por elemento.
- Uma pílula para a única novidade. Um selo, uma mensagem: a pílula fica acima do título em HelveticaNowDisplay-Medium no menor passo da escala, e nada mais disputa esse lugar. A posição dele preserva o centro da composição para o título.
- Uma barra sem excesso. A marca segura a borda esquerda e os links correm à direita dela, tudo composto em HelveticaNowDisplay-Medium, para a barra pertencer à página abaixo e não a um sistema separado.
Movimento e interação
Durações vindas do briefing
Os tempos são curtos e consistentes (38ms), então os estados de hover e de clique leem como um sistema só, não como um conjunto de efeitos separados. Como os valores são curtos, uma reconstrução que os deixe mais lentos fica visível na hora.
Estático por decisão
Não há biblioteca de scroll aqui: a composição em 640x474 fica parada e só se movem os elementos que respondem a você. O movimento é tratado como feedback, não como decoração.
O que mudar primeiro em Retro-Futurist
O briefing nomeia HelveticaNowDisplay-Medium e a escala ao lado dela. Substitua por uma família com as mesmas proporções e a composição sobrevive. Mantenha o recorte da mídia; ele trabalha tanto quanto a tipografia.
Os números por trás da hero
O briefing é uma especificação. Ele declara tipografia de 13px a 32px, passos de espaçamento de 26px e transições de 38ms e nomeia a moldura da mídia em 640x474 antes de qualquer coisa ser desenhada em volta dela. Nada nesta hero depende de um padrão.
O argumento que esta hero faz
A afirmação é feita uma vez, no tamanho de display. A página diz isso em voz alta: “Glad you stopped in. Now, what are we building?”. Todo o resto da hero se ordena em volta dessa linha: a navegação, o selo de anúncio, a linha de estatísticas e o clipe de fundo, e nenhuma segunda promessa disputa a primeira leitura. Retro-Futurist enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Retro-Futurist?
O briefing capturado tem 5.713 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.
Quanto de Retro-Futurist depende de React e Tailwind CSS?
Retro-Futurist 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.
O que comanda o movimento em Retro-Futurist?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 38ms. O briefing registra os valores para que quem for portar a página não precise adivinhar.
