Sobre este template
Leia USD Halo como especificação de landing page: os valores foram escritos antes de a página ser construída. O título da própria página é “An automated, reward-powered digital dollar built for native passive earnings and effortless connection into DeFi”, e a composição é construída em volta exatamente dessas palavras. O esquema de cores é branco #F5F5F5 por baixo e índigo profundo #2B2644 para a tipografia, e a página é composta em Inter. A entrega é React e Tailwind CSS, capturada em 458x800 para a moldura estar fixada antes de qualquer linha de código. É a referência certa para landing page para um produto fintech que precisa parecer intencional já na primeira tela.
Feito para
- Designers que precisam dos números antes de tudo: tipografia de 13px a 16px e seções de 100vh, tudo citado do briefing.
- Quem briefa um modelo para uma landing page vai usar o prompt de 8.531 caracteres como ponto de partida.
- Feito para quem cuida do conteúdo e reescreve uma landing page cujo título precisa continuar tão longo quanto o da USD Halo.
O que está incluído
- Uma barra sem excesso. A barra é uma linha de texto e uma ação, medida em tipografia de 13px a 16px e seções de 100vh, para ler como faixa e não como bloco. Os estados de hover e de foco estão especificados para cada link, e é isso que impede uma barra fina de parecer inerte. Uma ação por barra.
- Prova em uma fileira. Uma faixa compacta de estatísticas carrega as afirmações que de outro modo pediriam um parágrafo, o que impede a composição de landing page de virar uma lista de recursos. Os números usam a mesma família da interface, então pertencem à página em vez de interrompê-la.
- A composição é o conteúdo. A composição inteira cabe em uma tela e é entregue como React e Tailwind CSS, com texto, mídia e controles nomeados no briefing. A página é uma composição só em 458x800, e é por isso que ela se sustenta quando o texto muda. Mantenha a moldura; troque o assunto.
- Linha de cima: marca, links, uma ação. Uma fileira curta de links e uma única ação ficam sobre a landing page, presas a tipografia de 13px a 16px e seções de 100vh, para a barra nunca competir com a composição atrás dela.
Movimento e interação
A interação está nos controles
O trabalho de ponteiro é pequeno e especificado: estados de hover nos botões e links, não em todos os cards, aplicado aos elementos que já parecem interativos. Os estados interativos não mexem no layout, então nada salta sob o ponteiro. Se um estado não confirma uma ação, corte.
Movimento horizontal contínuo
Um marquee atravessa a composição num loop sem fim, em Inter, para a página ter movimento mesmo onde nada anima no scroll. Como a faixa é decorativa, dá para pausar ou remover sem mudar o layout.
Como a landing page se reorganiza
Teste esta landing page em 458x800 e depois na largura de celular: a mesma ordem se mantém, com a seção fica presa a 100vh. A reorganização mantém a ação alcançável em qualquer largura.
A landing page com a sua cara
Um template pede que você aceite o layout dele; esta referência pede que você o mantenha e mude tudo por dentro. A diferença é que tipografia de 13px a 16px, seções de 100vh e passos de espaçamento de 15px ficam fixas enquanto o assunto se move. O seu destaque precisa passar pelo mesmo teste de contraste que o destaque da referência.
Os números por trás da landing page
Se você vai entregar isso a um desenvolvedor, o briefing é o artefato útil. Ele declara tipografia de 13px a 16px, seções de 100vh e passos de espaçamento de 15px e não deixa nada para vocês dois interpretarem. Nada nesta landing page depende de um padrão.
Perguntas frequentes
O que eu recebo ao copiar o briefing de USD Halo?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 458x800, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Por que a entrada cita React e Tailwind CSS?
USD Halo 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 USD Halo?
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 458x800.
