Sobre este template
Portal mostra uma forma de construir hero para uma marca de lifestyle e publica as instruções que produziram o resultado. “A voyage through forgotten realms, where past and future intertwine” é a linha que o layout foi construído para sustentar. A paleta é preto #292926 por baixo, laranja suave #F3BC9E para a tipografia e vermelho #E1836B carregando os destaques, com tipografia Inter. A entrega é React e Tailwind CSS, capturada em 800x609 para a moldura estar fixada antes de qualquer linha de código. O orçamento de movimento é transições de 300ms. Esta referência é para uma marca de lifestyle que quer a primeira tela resolvida antes de a construção começar.
Feito para
- Feito para um fundador solo lançando uma hero para uma marca de lifestyle, sem nenhum design system atrás.
- Quem briefa um modelo para uma hero vai usar o prompt de 6.663 caracteres como ponto de partida.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Portal.
O que está incluído
- Topo com uma única ação. Marca, links e a ação #E1836B compartilham uma linha de base, e é isso que impede uma fileira fina de parecer acidental. Os links são compostos abaixo da marca em tamanho, e a ação #E1836B é o único elemento da barra com peso. Mantenha de quatro a cinco links; a linha foi dimensionada para isso.
- O briefing nomeia os passos. O briefing declara os tamanhos na captura (passos de espaçamento de 20px e transições de 300ms), então dá para conferir uma reconstrução em vez de estimá-la. Uma reconstrução que atinge esses números fica igual à referência sem mais ajustes. Mantenha os valores nomeados quando portar a página.
- A tipografia faz o estilo. As famílias recebem papéis em vez de serem misturadas: Inter carrega o display e a interface juntos. A altura de linha segue os passos de tamanho, não um valor global único.
- Navegação em uma só linha. A fileira gasta o contraste em um lugar só: a ação #E1836B, com a marca e os links recuados na cor do texto. Uma sobreposição mobile assume abaixo do breakpoint de tablet.
Movimento e interação
Uma duração para os controles
Hover, clique e foco resolvem todos em 300ms, e é isso que faz a interface parecer imediata. O tempo citado cobre mudanças de estado, então o feedback é a parte do movimento que está especificada.
Os controles são a camada interativa
A página responde só onde dá para agir: estados de hover nos botões e links, não em todos os cards. Os estados estão nomeados no briefing, então a página não depende de uma biblioteca de efeitos de hover. Mantenha a camada interativa pequena.
Como Portal ordena a primeira leitura
A página tem uma ordem deliberada. A navegação apresenta o produto e dá a quem volta um caminho familiar. O título ocupa o tamanho de display, a linha de apoio explica a oferta e o destaque vermelho #E1836B marca a ação principal, então o próximo passo nunca fica em dúvida. Nada mais compete: não existe grade de cards antes da primeira decisão, e é isso que tira o peso de hero em trabalho de lifestyle. O leitor de lifestyle recebe a oferta antes das opções.
A hero com a sua cara
A maioria começa pela cor de destaque. Comece pela promessa: reescreva a linha de display e teste de novo vermelho #E1836B contra a sua própria mídia. Se um elemento novo não explica a oferta nem o próximo passo, o lugar dele é abaixo da dobra.
O tempo por trás da hero
Compare o movimento daqui com uma página guiada por scroll. As duas se movem; esta se move onde o briefing diz (transições de 300ms e estados de hover e de clique), então o texto continua na frente. Nada anima por si nesta hero.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Portal?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x609, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Preciso de React e Tailwind CSS para reconstruir Portal?
Portal 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 usar Portal em um projeto de cliente?
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 800x609.
