Sobre este template
Wellbeing OS preserva o rastro das decisões: o briefing que produziu esta hero tem 5.051 caracteres. A paleta se reduz a laranja profundo #2C221C por baixo e laranja #BF9423 carregando os destaques, e a tipografia é Helvetica, Segoe UI, Roboto. A entrega é React e Tailwind CSS, capturada em 1460x1080 para a moldura estar fixada antes de qualquer linha de código. O orçamento de movimento é transições de 400ms, cubic-bezier(0.16,1,0.3,1) e um loop de vídeo ao fundo. Use como referência quando estiver construindo hero para um produto de saúde ou bem-estar e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- Esta hero serve fundadores que precisam de uma tela de prova de que o texto de saúde aguenta 5,8s de vídeo em loop.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Wellbeing OS.
- Mantenha Helvetica, Segoe UI, Roboto e reconstrua a hero em torno dela, em vez de abrir uma escala tipográfica nova para a sua marca.
O que está incluído
- Uma barra sem excesso. A barra carrega a marca, os links de seção e um botão #BF9423, tudo medido em passos de espaçamento de 160px e transições de 400ms para nunca virar um segundo cabeçalho. Os links são compostos abaixo da marca em tamanho, e a ação #BF9423 é o único elemento da barra com peso.
- Um clipe, não uma ilustração. A primeira tela é um único clipe em 1460x1080, e todo o resto se organiza por cima dele. Exporte em 1460x1080 ou mais largo e o recorte cover continua funcionando.
- Uma família, dois papéis. Os passos de tamanho e o tracking do briefing são o que dá o tom: Helvetica, Segoe UI, Roboto em um tamanho de display apertado, depois uma queda clara para o texto de apoio. Os passos de tamanho são valores fixos, e é isso que permite trocar a família mantendo a mesma hierarquia.
- A navegação é fina de propósito. Marca, links e a ação #BF9423 compartilham uma linha de base, e é isso que impede uma fileira fina de parecer acidental.
Movimento e interação
Um loop, não uma linha do tempo
O clipe de fundo roda 5,8s em 1460x1080 num loop sem fim, mudo e inline, então a página continua em movimento enquanto a atenção do leitor está no texto. Não é preciso biblioteca de scroll, porque o único movimento ambiente é a própria mídia. Um frame de poster entra no lugar quando a reprodução automática é bloqueada, então o movimento soma em vez de ser obrigatório.
Uma duração para os controles
O briefing fixa o valor da transição em 400ms, então uma reconstrução não pode cair em um padrão mais lento. Se a curva de aceleração mudar, a duração precisa ser revista junto. Mudanças de estado rápidas, sem linha do tempo de scroll.
A ordem por trás da hero
Uma página assim costuma enterrar a ação sob uma grade de recursos. Esta coloca a navegação, a linha de estatísticas, o clipe de fundo e o rodapé em sequência fixa, com a ação dentro da primeira tela em vez de depois de três rolagens. O leitor de saúde recebe a oferta antes das opções.
O que se move em Wellbeing OS
Toda transição aqui tem um número associado. É por isso que transições de 400ms, um loop de mídia de 5,8s e estados de hover e de clique pode ser portado valor por valor em vez de reajustado no olho. Nada anima por si nesta hero.
O que mudar primeiro em Wellbeing OS
O briefing nomeia Helvetica, Segoe UI, Roboto e a escala ao lado dela. Substitua por uma família com as mesmas proporções e a composição sobrevive. O seu destaque precisa passar pelo mesmo teste de contraste que o destaque da referência.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Wellbeing OS?
O briefing capturado tem 5.051 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 Wellbeing OS?
Wellbeing OS 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 publicar uma página reconstruída a partir de Wellbeing OS sem dar os créditos?
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 1460x1080.
