Sobre este template
Orbis Hello é uma referência prática para uma marca de lifestyle: página sobre com layout definido, medidas tiradas e tudo pronto para reconstruir. O esquema de cores é azul profundo #13142D por baixo, branco #EFF4FF para a tipografia e lima vivo #6FFF00 carregando os destaques, e a página é composta em Anton. A entrada nomeia a stack que produziu a página (React e Tailwind CSS) em vez de escondê-la. Se você está briefando uma página sobre de lifestyle, parta desta composição e substitua o assunto.
Feito para
- Times de estúdio que estão briefando uma construção e procuram uma moldura em 640x470 para reagir.
- Esta página sobre responde a quem constrói e quer saber o que tipografia de 14px a 68px e passos de espaçamento de 20px controla de fato no layout.
- Feito para um fundador solo lançando uma página sobre para uma marca de lifestyle, sem nenhum design system atrás.
O que está incluído
- Números, não impressões. Os tamanhos são declarados, não herdados: tipografia de 14px a 68px e passos de espaçamento de 20px. Troque a família tipográfica ou o texto e essas relações continuam valendo. O briefing declara valores, não proporções, então a composição mantém as relações quando o texto muda de tamanho.
- Prova acima da dobra. Uma fileira de estatísticas fica acima da dobra, composta em Anton no topo da escala, com #6FFF00 reservado aos números que carregam uma afirmação. Os números carregam o destaque #6FFF00 enquanto tudo em volta fica na cor do texto.
- Valores que dá para conferir. O espaçamento é declarado do mesmo jeito (tipografia de 14px a 68px e passos de espaçamento de 20px), não como uma escala que cresce sozinha.
- Números em vez de promessa. As estatísticas são tratadas como tipografia: números no tamanho de display, rótulos no menor passo do briefing, tudo em #6FFF00 ou na cor do texto, não em um card colorido.
Movimento e interação
Hover onde faz sentido
Os estados são tratados por componente (estados de hover nos botões e links, não em todos os cards), não por uma camada global de animação. Os estados interativos não mexem no layout, então nada salta sob o ponteiro. Alguns estados confiáveis valem mais que uma lista longa de efeitos.
Quase nenhum movimento
O briefing deixa a animação de fora e deixa o layout em 640x470 conduzir a página, com estados de hover e de clique como únicas mudanças. Não há biblioteca de animação no briefing, o que mantém a reconstrução enxuta.
O que esta página sobre acerta
Enquanto um template enche a dobra de módulos, esta página sobre usa a linha de estatísticas, a lista de recursos e o clipe de fundo e para. A diferença aparece em tipografia de 14px a 68px e passos de espaçamento de 20px: nada é inflado para preencher espaço. Orbis Hello enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
O que se move em Orbis Hello
Conte os elementos animados e a lista continua curta: estados de hover e de clique. Nada anima por si nesta página sobre.
Como a página sobre se reorganiza
O briefing descreve o que muda em cada largura (a escala é fluida, não em degraus), ou seja, a versão de celular é uma decisão, não um espremer. O contraste se mantém no destaque #6FFF00 sobre a mídia, e o vídeo é mudo e roda inline. A reorganização mantém a ação alcançável em qualquer largura.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Orbis Hello?
O prompt completo por trás da página, descrevendo o layout, a paleta, a tipografia e as transições, além de um envio em um clique para o Studio com o briefing já preparado. O prompt em si não é exibido aqui; copie ou envie para o Studio. A referência tem captura em 640x470.
Posso reconstruir página sobre do Orbis Hello em outra stack?
Orbis Hello 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.
Quantas cores o Orbis Hello usa?
O destaque é lima vivo #6FFF00 e aparece nos elementos que você deve pressionar. Todo o resto fica sobre azul profundo #13142D, então a ênfase nunca precisa competir com o layout.
