Sobre este template
Aesthetic Onboarding foi capturada em 1894x1378 e guardada como especificação, não como imagem de galeria. “Welcome back” é a linha que o layout foi construído para sustentar. A página inteira é construída sobre laranja vivo #F09819 por baixo, azul profundo #0C0C0E para a tipografia e verde-água vivo #00C6FF carregando os destaques. A stack é React e Tailwind CSS, então dá para levar tela de login para um projeto sem handoff de design. A página mantém o movimento em um loop de vídeo ao fundo. Use como referência quando estiver construindo tela de login para um produto de IA ou SaaS e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- Se o seu time tiver de cortar o movimento, a tela de login continua legível, com passos de espaçamento de 80px fazendo o trabalho de hierarquia.
- Times de produto que escrevem o texto da Tela de login e precisam que cada linha respeite o comprimento para o qual o display foi dimensionado.
- Esta tela de login serve fundadores que precisam de uma tela de prova de que o texto de SaaS aguenta 5,4s de vídeo em loop.
O que está incluído
- Nada aqui é herdado. Toda medida do briefing é um número que dá para medir de volta: passos de espaçamento de 80px. As proporções da moldura ficam registradas junto com os tamanhos, então uma reconstrução também acerta o aspecto. Os números são o design; o resto é arranjo.
- Um elemento de mídia carrega o clima. Um clipe de 5,4s em 1894x1378 faz o trabalho de atmosfera; o briefing fixa o recorte e deixa a tipografia intacta por cima. Exporte em 1894x1378 ou mais largo e o recorte cover continua funcionando.
- Números na linha de base. As estatísticas são tratadas como tipografia: números no tamanho de display, rótulos no menor passo do briefing, tudo em #00C6FF ou na cor do texto, não em um card colorido. Os números carregam o destaque #00C6FF enquanto tudo em volta fica na cor do texto. Mantenha a fileira em uma linha.
- Os cards fazem a estrutura. A grade de cards é o recurso de organização: painéis iguais, uma ideia cada, sem hierarquia entre eles. A ordem dos painéis é a ordem de leitura, então nada depende de pistas de posição. Mantenha uma ideia por painel.
Movimento e interação
O loop faz o trabalho ambiente
Um único clipe de 5,4s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage ao ponteiro. Um frame de poster entra no lugar quando a reprodução automática é bloqueada, então o movimento soma em vez de ser obrigatório. Grave ou exporte em 1894x1378 ou mais largo.
Os controles são a camada interativa
A camada interativa é deliberadamente pequena: estados de hover nos botões e links, não em todos os cards. Como os estados são simples, eles portam para qualquer sistema de componentes. Mantenha os efeitos de ponteiro nos controles.
A ordem por trás da tela de login
Assumir uma única rota de leitura significa fechar as outras. O briefing aceita isso, fixa o título, a linha de estatísticas, a grade de cards, o clipe de fundo e o rodapé no lugar e gasta passos de espaçamento de 80px para tornar a rota óbvia. O leitor de SaaS recebe a oferta antes das opções.
Como a tela de login se reorganiza
A tipografia é clampada, não escalonada (um clamp entre 10px e 80px), então a linha de display não dá saltos entre larguras. A reprodução automática e o movimento são tratados com honestidade, então a página continua comunicando quando eles não estão disponíveis.
O que se sustenta para IA e SaaS
Comparado a um hero de template, a diferença está no que falta. Não há grade de cards, nem carrossel, nem segunda chamada para ação: só o título, a linha de estatísticas, a grade de cards, o clipe de fundo e o rodapé, dimensionados contra passos de espaçamento de 80px. Aesthetic Onboarding enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Aesthetic Onboarding?
O briefing capturado tem 3.133 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 Aesthetic Onboarding não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 3.133 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Posso reconstruir tela de login do Aesthetic Onboarding em outra stack?
Aesthetic Onboarding 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.
