Sobre este template
Neo Museum é a referência de landing page para uma marca de educação ou comunidade, e o briefing por trás dela é uma especificação de construção completa, não um moodboard. O título da própria página é “Step into the natural world and discover the stories written millions of years ago”, e a composição é construída em volta exatamente dessas palavras. A cor se limita a branco #FCFCFC por baixo e preto #0A0A0A para a tipografia, composta em Inter. A referência é construída com React e Tailwind CSS, e as decisões de layout estão declaradas independentemente dela. O orçamento de movimento é transições de 2800ms e cubic-bezier(0.16,1,0.3,1). Trate como o briefing de uma landing page para uma marca de educação ou comunidade que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Feito para agências que apresentam trabalho de educação e precisam de uma moldura em 640x468 na primeira resposta ao cliente.
- Designers que precisam dos números antes de tudo: tipografia de 12px a 15px e seções de 75vh, tudo citado do briefing.
- Feito para um fundador solo lançando uma landing page para uma marca de educação ou comunidade, sem nenhum design system atrás.
O que está incluído
- Topo com uma única ação. Uma barra fina ocupa o topo de landing page, com a marca à esquerda e os links em Inter, para a composição ler conteúdo primeiro e moldura depois. Uma sobreposição mobile assume abaixo do breakpoint de tablet. Os rótulos são curtos o bastante para caber em uma linha em qualquer largura que o briefing cubra.
- Tamanhos fixados no briefing. O briefing nomeia os números: tipografia de 12px a 15px, seções de 75vh, passos de espaçamento de 10px e transições de 2800ms. É por isso que a composição se sustenta, porque não existe um passo de espaçamento inventado entre a tipografia e a moldura. O espaçamento é citado nas mesmas unidades da tipografia, então os dois podem ser comparados direto.
- Colunas, não um amontoado de links. Os links se agrupam em colunas e a marca fica em um bloco próprio, o que mantém um rodapé longo legível em vez de virar uma lista corrida. Os tamanhos de tipo descem dos títulos de coluna para os links, então a hierarquia sobrevive a um rodapé denso. A referência tem captura em 640x468.
- A navegação é fina de propósito. A barra é uma linha de texto e uma ação, medida em tipografia de 12px a 15px e seções de 75vh, para ler como faixa e não como bloco.
Movimento e interação
Tempos curtos e combinados
O movimento nos controles é curto e repetível: 2800ms a cada mudança de estado. A mesma duração se repete nos controles, o que mantém as interações com cara de um sistema só.
Números que se contam sozinhos
Os números contam para cima ao entrar na viewport, em Inter no tamanho de display. Rótulos e tudo ao redor dos números ficam estáticos.
Como a landing page se reorganiza
Se os seus breakpoints foram escolhidos para fazer as coisas caberem, e não para mudar o layout, leia esta entrada. a seção fica presa a 75vh e a navegação vira um menu compacto no celular em vez de uma lista de elementos escondidos. A escala muda com a viewport; a sequência, não.
O que uma marca de educação ou comunidade ganha aqui
Enquanto um template enche a dobra de módulos, esta landing page usa a navegação, o título, o selo de anúncio, a linha de estatísticas e o clipe de fundo e para. A diferença aparece em tipografia de 12px a 15px e seções de 75vh: nada é inflado para preencher espaço. Neo Museum 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
O briefing tem 15.036 caracteres e nomeia a ordem de leitura explicitamente: a navegação, o título, o selo de anúncio, a linha de estatísticas e o clipe de fundo, com tipografia de 12px a 15px e seções de 75vh entre eles. O leitor de educação recebe a oferta antes das opções.
Perguntas frequentes
O que o briefing por trás de Neo Museum contém de fato?
O briefing capturado tem 15.036 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.
Por que o prompt do Neo Museum não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 15.036 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Preciso de React e Tailwind CSS para reconstruir Neo Museum?
Neo Museum 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.
