Sobre este template
Northstar é uma referência prática para uma agência ou estúdio: landing page com layout definido, medidas tiradas e tudo pronto para reconstruir. O esquema de cores é verde-água #1D8FB8 por baixo, branco #EEF2F3 para a tipografia e laranja suave #F0DAC8 carregando os destaques, e a página é composta em Instrument Serif. A referência é construída com vanilla JS, e as decisões de layout estão declaradas independentemente dela. Tudo o que se move cabe em transições de 580ms e cubic-bezier(.16,1.3,1). Deixe aberto enquanto escreve: o briefing de 11.589 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Times de estúdio que estão briefando uma construção e procuram curva de aceleração cubic-bezier(.16,1.3,1) para reagir.
- Engenheiros que precisam que a landing page sobreviva a uma conexão lenta vão usar 1280x956 e a escala tipográfica como orçamento de peso.
- Esta landing page responde a quem constrói e quer saber o que seções de 100vh e passos de espaçamento de 14px controla de fato no layout.
O que está incluído
- Links colapsam em uma largura. A linha de cima reúne a marca, quatro ou cinco links e uma única ação tingida de #F0DAC8, dimensionada para ficar discreta diante do resto da página. Os links são compostos abaixo da marca em tamanho, e a ação #F0DAC8 é o único elemento da barra com peso.
- Medido contra a viewport. O layout trabalha com valores absolutos, não com proporções: seções de 100vh, passos de espaçamento de 14px, transições de 580ms e curva de aceleração cubic-bezier(.16,1.3,1). O briefing declara valores, não proporções, então a composição mantém as relações quando o texto muda de tamanho. Meça antes de ajustar.
- A tipografia faz o estilo. Os passos de tamanho e o tracking do briefing são o que dá o tom: Instrument Serif em um tamanho de display apertado, depois uma queda clara para o texto de apoio. Trocar a família é seguro desde que tamanhos e pesos fiquem onde o briefing os colocou.
- Uma barra de navegação que sai do caminho. A fileira gasta o contraste em um lugar só: a ação #F0DAC8, com a marca e os links recuados na cor do texto.
Movimento e interação
Uma duração para os controles
Toda mudança de estado na especificação vem com uma duração: as transições assentam em torno de 580ms usando cubic-bezier(.16,1.3,1). Nada fica no padrão do navegador, e é por isso que a página parece autoral em vez de animada. Os tempos curtos são o motivo de a página parecer autoral; um padrão lento desfaria a composição.
Quase nenhum movimento
Esta é entregue como composição estática em 1280x956, então a hierarquia precisa funcionar sem movimento, e funciona. Só se movem os elementos que respondem ao ponteiro. Nenhuma linha do tempo de scroll é necessária.
A ordem por trás da landing page
A página tem uma ordem deliberada. A navegação apresenta o produto e dá a quem volta um caminho familiar. O título ocupa o tamanho de display, a linha de apoio explica a oferta e o destaque laranja suave #F0DAC8 marca a ação principal, então o próximo passo nunca fica em dúvida. Nada mais compete: não existe grade de cards antes da primeira decisão, e é isso que tira o peso de landing page em trabalho de agência. O leitor de agência recebe a oferta antes das opções.
O que se sustenta para Agências e estúdios
Northstar funciona porque a hierarquia dela é decidida, não decorada. O briefing fixa seções de 100vh, passos de espaçamento de 14px, transições de 580ms e curva de aceleração cubic-bezier(.16,1.3,1), então um texto novo cai dentro da moldura em vez de reabri-la. Dá ao leitor de agência a rota honesta mais curta até a oferta.
A landing page com a sua cara
A maioria começa pela cor de destaque. Comece pela promessa: reescreva a linha de display e teste de novo laranja suave #F0DAC8 contra a sua própria mídia. Mantenha a moldura e a escala; o assunto é a parte que deve mudar.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Northstar?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1280x956, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Preciso de vanilla JS para reconstruir Northstar?
A referência foi construída em vanilla JS por circunstância de produção. Nada no layout depende dessa escolha: os valores de espaçamento, tipografia e movimento passam para o que você já usa.
De onde veio o design de Northstar?
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 1280x956.
