Sobre este template
Aurora Onboard é uma referência prática para uma marca de lifestyle: tela de login com layout definido, medidas tiradas e tudo pronto para reconstruir. A cor se limita a preto #000000 por baixo e índigo suave #DBCDE9 para a tipografia, composta em Inter. A entrega é React e Tailwind CSS, capturada em 1850x1352 para a moldura estar fixada antes de qualquer linha de código. Tome emprestada a estrutura, não o assunto: a tela de login e os números dela passam para a sua marca sem alteração.
Feito para
- Feito para um fundador solo lançando uma tela de login para uma marca de lifestyle, sem nenhum design system atrás.
- Feito para quem cuida do conteúdo e reescreve uma tela de login cujo título precisa continuar tão longo quanto o da Aurora Onboard.
- Líderes de estúdio que tocam vários projetos ao mesmo tempo vão usar esta tela de login como o padrão que todas as outras páginas copiam.
O que está incluído
- O tamanho de display fala. Os passos de tamanho e o tracking do briefing são o que dá o tom: Inter em um tamanho de display apertado, depois uma queda clara para o texto de apoio. A família vem acompanhada de tamanhos fixos, e é isso que mantém a linha de display e o texto de interface relacionados.
- O cadastro como composição. Há uma única decisão aqui: preencher o formulário ou sair. Todo o resto da tela sustenta essa decisão. Os estados de erro e de foco são especificados, não deixados para o navegador. Especifique o estado de foco.
- A composição é o conteúdo. A composição de tela de login é construída para o texto chegar antes de tudo: a tipografia carrega a hierarquia, a moldura em 1850x1352 segura a composição e os valores de apoio ficam discretos. A página é uma composição só em 1850x1352, e é por isso que ela se sustenta quando o texto muda.
- A escala cai com força. Os numerais usam a família da interface, então estatísticas e rótulos pertencem ao mesmo sistema.
Movimento e interação
Hover, mas com parcimônia
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. Um controle que parece interativo se comporta como tal, então não existem falsas pistas de interação.
Movimento que sai da frente
O briefing deixa a animação de fora e deixa o layout em 1850x1352 conduzir a página, com estados de hover e de clique como únicas mudanças. A composição fica parada, então a hierarquia precisa sustentar a página, e sustenta.
O que esta tela de login acerta
A afirmação é feita uma vez, no tamanho de display. Todo o resto da tela de login se ordena em volta dessa linha: o título, a linha de estatísticas, o formulário, o clipe de fundo e o rodapé, e nenhuma segunda promessa disputa a primeira leitura. Aurora Onboard enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Como Aurora Onboard ordena a primeira leitura
O briefing tem 4.770 caracteres e nomeia a ordem de leitura explicitamente: o título, a linha de estatísticas, o formulário, o clipe de fundo e o rodapé, com uma moldura em 1850x1352 entre eles. O leitor de lifestyle recebe a oferta antes das opções.
Como a tela de login se reorganiza
Teste esta tela de login em 1850x1352 e depois na largura de celular: a mesma ordem se mantém, com a escala é fluida, não em degraus. Os dois estados estão descritos no mesmo briefing.
Perguntas frequentes
O prompt de Aurora Onboard é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 4.770 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.
O que posso fazer com o briefing de Aurora Onboard depois de tê-lo em mãos?
Tudo o que é citado nesta página vem do briefing capturado de 4.770 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Quanto de Aurora Onboard depende de React e Tailwind CSS?
Aurora Onboard 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.
