Sobre este template
Wellness Balance é a referência de hero para um produto de saúde ou bem-estar, e o briefing por trás dela é uma especificação de construção completa, não um moodboard. “Discover our new plant-based supplements for daily balance and clean energy” é a linha que o layout foi construído para sustentar. A paleta é branco #ECEDEC por baixo e branco #FEFDF9 para a tipografia, com tipografia DM Sans. A referência é construída com React e Tailwind CSS, e as decisões de layout estão declaradas independentemente dela. O movimento se resume a transições de 0.8s e cubic-bezier(0.16, 1, 0.3, 1), mantido discreto o bastante para o texto continuar conduzindo. Deixe aberto enquanto escreve: o briefing de 7.840 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Pegue a moldura em 640x472 e tipografia de 28px a 35px e passos de espaçamento de 110px 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 Wellness Balance.
- Feito para um time que já tem DM Sans carregada, um export em 640x472 esperando e uma janela de build nesta semana.
O que está incluído
- A navegação é fina de propósito. Uma barra fina ocupa o topo de hero, com a marca à esquerda e os links em DM Sans, para a composição ler conteúdo primeiro e moldura depois. Uma sobreposição mobile assume abaixo do breakpoint de tablet. A seção ativa é marcada por peso, não por uma pílula nem por um sublinhado. Não dê à marca mais espaço do que a tipografia dela precisa.
- Números, não impressões. A lista é curta (tipografia de 28px a 35px, passos de espaçamento de 110px, transições de 0.8s e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1)), e é por isso que o sistema inteiro pode ser conferido à mão. Como os valores são fixos, uma substituição muda o visual sem mudar o ritmo.
- Uma fileira de estatísticas em vez de uma afirmação. A fileira fica no alto da hero como prova, não como decoração. A fileira se alinha à mesma margem do título acima dela. A referência tem captura em 640x472.
- Navegação sem fundo próprio. A marca segura a borda esquerda e os links correm à direita dela, tudo composto em DM Sans, para a barra pertencer à página abaixo e não a um sistema separado. Se a sua página tiver mais seções, agrupe em vez de alargar a barra.
Movimento e interação
Uma superfície interativa pequena
Os estados são tratados por componente (um carrossel que pagina o conteúdo sob demanda), não por uma camada global de animação. Como os estados são simples, eles portam para qualquer sistema de componentes. Mantenha a camada interativa pequena.
Durações vindas do briefing
O briefing fixa o valor da transição em 0.8s, então uma reconstrução não pode cair em um padrão mais lento. A curva de aceleração é especificada junto com a duração (0.8s), então uma reconstrução não pode trocar a sensação sem aviso. Leve as durações para o seu build.
Por que o briefing de saúde se sustenta
Suponha que a sua mídia seja mais alta que o seu texto. É para esse caso que esta composição foi construída. A mídia é um frame estático em 640x472. A moldura fica silenciosa e tipografia de 28px a 35px e passos de espaçamento de 110px mantêm o leitor no texto. Wellness Balance enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
A hero com a sua cara
Enquanto um tema entrega componentes, este briefing entrega uma composição: tipografia de 28px a 35px, passos de espaçamento de 110px, transições de 0.8s e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1) e uma moldura de mídia, com o assunto por sua conta. Reescreva o texto e a mídia antes de repintar qualquer coisa.
O tempo por trás da hero
Quando uma página parece inquieta, a causa costuma ser entradas demais. Esta mantém a lista curta: transições de 0.8s e um título palavra por palavra. Nada anima por si nesta hero.
Perguntas frequentes
O que o briefing por trás de Wellness Balance contém de fato?
O briefing capturado tem 7.840 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.
Preciso de React e Tailwind CSS para reconstruir Wellness Balance?
Wellness Balance 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.
Como se comportam as transições de 0.8s em Wellness Balance?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 0.8s usando cubic-bezier(0.16, 1, 0.3, 1). O briefing registra os valores para que quem for portar a página não precise adivinhar.
