Sobre este template
Orbis NFT é uma landing page de fintech construída a partir de um único briefing escrito, e esta página documenta esse briefing. A cor se limita a azul profundo #010828 por baixo, branco #EFF4FF para a tipografia e lima vivo #6FFF00 carregando os destaques, composta em Anton. A entrega é React e Tailwind CSS, capturada em 452x800 para a moldura estar fixada antes de qualquer linha de código. Trate como o briefing de uma landing page para um produto fintech que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Times internos que estendem esta landing page e precisam de passos de espaçamento de 32px levado para os novos blocos sem alteração.
- Feito para um fundador solo lançando uma landing page para um produto fintech, sem nenhum design system atrás.
- Quem briefa um modelo para uma landing page vai usar o prompt de 8.276 caracteres como ponto de partida.
O que está incluído
- Uma barra de navegação que sai do caminho. A fileira gasta o contraste em um lugar só: a ação #6FFF00, com a marca e os links recuados na cor do texto. Os links são compostos abaixo da marca em tamanho, e a ação #6FFF00 é o único elemento da barra com peso.
- Uma escala para tipo e moldura. O layout trabalha com valores absolutos, não com proporções: passos de espaçamento de 32px. As proporções da moldura ficam registradas junto com os tamanhos, então uma reconstrução também acerta o aspecto.
- Uma grade, não um texto corrido. A grade é a estrutura: painéis do mesmo tamanho, compostos em Anton, arranjados para o olho andar na horizontal em vez de descer. O espaçamento entre painéis é um valor só, e é isso que impede uma grade densa de parecer apertada. A ordem dos painéis é a ordem de leitura.
- Texto primeiro, decoração depois. A composição está completa em 452x800: texto, mídia e controles estão todos nomeados no briefing. A página é uma composição só em 452x800, e é por isso que ela se sustenta quando o texto muda.
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. Cada estado muda uma única propriedade, o que mantém o feedback legível.
Quase nenhum movimento
Não há biblioteca de scroll aqui: a composição em 452x800 fica parada e só se movem os elementos que respondem a você. A composição fica parada, então a hierarquia precisa sustentar a página, e sustenta. Mantenha o movimento nos controles.
O que esta landing page acerta
Uma camada de tingimento sobre a mídia teria sido a solução fácil. O briefing a deixa de fora. A mídia é um frame estático em 452x800. O texto continua legível porque passos de espaçamento de 32px mantêm a moldura calma. Orbis NFT enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
A ordem por trás da landing page
Leia na ordem: a navegação, a linha de estatísticas, a grade de cards e o clipe de fundo. Cada elemento tem uma função, e o destaque lima vivo #6FFF00 é gasto só no elemento que você deve pressionar. O leitor de fintech recebe a oferta antes das opções.
A landing page com a sua cara
A substituição direta tem um limite: se o seu produto precisa de outra hierarquia, passos de espaçamento de 32px vão brigar com ela. Nesse caso, mude a ordem primeiro e os valores depois. Uma marca diferente pode reaproveitar a moldura inteira.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Orbis NFT?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 452x800, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de Orbis NFT depende de React e Tailwind CSS?
Orbis NFT 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 Orbis NFT?
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 452x800.
