Sobre este template
Real-Time Alerts é uma tela de login de SaaS construída a partir de um único briefing escrito, e esta página documenta esse briefing. Ela abre com “Built for fast-moving teams” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A cor se limita a neutro #797979 por baixo e tom escuro #2F2A27 para a tipografia, composta em Eloquia. A stack é um único arquivo HTML autocontido, então dá para levar tela de login para um projeto sem handoff de design. O movimento fica restrito a transições de 3500ms, cubic-bezier(.2.7.3,1) e um loop de vídeo ao fundo. Parta do briefing capturado e depois edite a tela de login em vez de reconstruí-la do zero.
Feito para
- Entregue um único arquivo HTML autocontido ao engenheiro com o recorte em 1738x1080 anexado e deixe que ele reconstrua.
- Times terceirizados que assumem esta tela de login e precisam de um único arquivo HTML autocontido fixado no repositório antes do primeiro commit.
- Product managers que precisam estimar a construção vão ler um breakpoint de 370px como o escopo do trabalho.
O que está incluído
- Valores que dá para conferir. Os tamanhos foram lidos do render em 1738x1080: um tamanho de display fixo de 16px, seções de 100vh, cantos de 26px e passos de espaçamento de 10px. Não existe valor intermediário inventado entre os nomeados; a lista de medidas é o sistema inteiro.
- O formulário é a primeira tela inteira. 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. Mantenha os rótulos visíveis; não use campos só com placeholder.
- Números onde a prova deve ficar. Os números são compostos como tipografia, não dentro de um card: Eloquia no tamanho de display com rótulos um passo abaixo. Os rótulos ficam embaixo dos números no menor passo do briefing, então a fileira lê como dado e não como decoração.
- Os tamanhos estão no briefing, não em uma escala. O espaçamento é declarado do mesmo jeito (um tamanho de display fixo de 16px, seções de 100vh, cantos de 26px e passos de espaçamento de 10px), não como uma escala que cresce sozinha.
Movimento e interação
Durações curtas e nomeadas
As transições estão especificadas em 3500ms usando cubic-bezier(.2.7.3,1), e é esse o tempo ao qual os controles obedecem. Os valores são curtos o bastante para ler como feedback, não como animação. Não entregue o padrão do navegador.
Um marquee carrega o ritmo
Um marquee atravessa a composição num loop sem fim, em Eloquia. É o único movimento contínuo fora da mídia, o que impede a página de parecer inquieta.
Como Real-Time Alerts ordena a primeira leitura
A atenção é conduzida, não deixada ao acaso. A página diz isso em voz alta: “Built for fast-moving teams”. A sequência corre por o título, o selo de anúncio, a linha de estatísticas, a grade de cards e o formulário, e cada parada é dimensionada contra um tamanho de display fixo de 16px e seções de 100vh para que nada chegue fora de ordem. O leitor de SaaS recebe a oferta antes das opções.
O que mudar primeiro em Real-Time Alerts
Compare com começar de uma página em branco. Aqui a moldura (1738x1080) e um tamanho de display fixo de 16px e seções de 100vh já estão decididas, então o trabalho é de substituição, não de composição. O seu destaque precisa passar pelo mesmo teste de contraste que o destaque da referência.
Ler Real-Time Alerts como especificação
Desmonte a tela de login e os valores ainda a descrevem: um tamanho de display fixo de 16px e seções de 100vh para a moldura e o ritmo abaixo. Nada nesta tela de login depende de um padrão.
Perguntas frequentes
Por que a entrada cita um único arquivo HTML autocontido?
Real-Time Alerts foi construído em um único arquivo HTML autocontido, 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.
Como esta entrada de Real-Time Alerts está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 21.771 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O prompt de Real-Time Alerts é uma especificação pronta ou um ponto de partida?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1738x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
