Sobre este template
Digital Epoch resolve o problema de hero para uma agência ou estúdio com um único briefing capturado. A cor se limita a branco #F9FAFB por baixo, azul profundo #0A152D para a tipografia e azul profundo #0A1B33 carregando os destaques, composta em Inter. A entrega é React e Tailwind CSS, capturada em 800x589 para a moldura estar fixada antes de qualquer linha de código. Deixe aberto enquanto escreve: o briefing de 4.594 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Comece por tipografia de 12px a 56px e passos de espaçamento de 12px e deixe a paleta vir depois, porque é o espaçamento que faz esta hero ler.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Digital Epoch.
- Fixe #F9FAFB e #0A1B33 como as duas cores da marca e reconstrua a hero dentro desse limite.
O que está incluído
- Uma barra sem excesso. Os links ficam em uma linha só, em um único tamanho, e a ação #0A1B33 fecha a fileira à direita, então o olho termina onde a navegação termina. Os links são compostos abaixo da marca em tamanho, e a ação #0A1B33 é o único elemento da barra com peso. A barra tem meia dúzia de elementos, então se reconstrói sem biblioteca de componentes.
- Nada aqui é herdado. O briefing fixa tipografia de 12px a 56px e passos de espaçamento de 12px e deixa o resto para o arranjo, o oposto de uma escala que cresce sozinha. O menor e o maior valor dessa lista definem a faixa em que a composição trabalha. Verifique uma reconstrução contra os mesmos números.
- A grade define a ordem. Onde caberia um texto corrido, esta página coloca um conjunto de painéis, e é isso que mantém a hero fácil de varrer. Os painéis compartilham a família da interface em um tamanho só, o que impede a grade de virar um segundo layout.
- Texto primeiro, decoração depois. Tudo acima da dobra justifica o lugar. O briefing nomeia o texto, a moldura em 800x589 e os tamanhos de tipo, e não deixa nada decorativo competir com eles. A página é uma composição só em 800x589, e é por isso que ela se sustenta quando o texto muda.
Movimento e interação
Um marquee carrega o ritmo
Um marquee atravessa a composição num loop sem fim, em Inter, para a página ter movimento mesmo onde nada anima no scroll. O item ativo é marcado com #0A1B33, não com uma mudança de tamanho.
A interação está nos controles
A interação é local a cada controle aqui (estados de hover nos botões e links, não em todos os cards), então nada na página se move por efeito colateral. Um controle que parece interativo se comporta como tal, então não existem falsas pistas de interação. Confira os estados em um dispositivo de toque.
O argumento que esta hero faz
A razão de isso funcionar para uma agência ou estúdio é que a página nunca pede ao leitor que monte a mensagem. Layout, tipografia e cor estão decididos (branco #F9FAFB e azul profundo #0A1B33, em Inter), então a primeira tela lê como um argumento pronto, não como uma pilha de peças. Digital Epoch enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
O que mudar primeiro em Digital Epoch
O briefing nomeia Inter e a escala ao lado dela. Substitua por uma família com as mesmas proporções e a composição sobrevive. Reescreva a linha de display antes de tocar na cor.
Os números por trás da hero
Se você vai entregar isso a um desenvolvedor, o briefing é o artefato útil. Ele declara tipografia de 12px a 56px e passos de espaçamento de 12px e não deixa nada para vocês dois interpretarem. Nada nesta hero depende de um padrão.
Perguntas frequentes
O prompt de Digital Epoch é 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 800x589, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Posso reconstruir hero do Digital Epoch em outra stack?
Digital Epoch 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 Digital Epoch?
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 800x589.
