Sobre este template
Nexto 404 mostra uma forma de construir página 404 para um produto de IA ou SaaS e publica as instruções que produziram o resultado. A paleta se reduz a neutro #F5F5F5 por baixo e quase preto #1A1A1A para a tipografia, e a tipografia é DM Sans. A entrega é React e Tailwind CSS, capturada em 1986x1446 para a moldura estar fixada antes de qualquer linha de código. O movimento se resume a transições de 5s e cubic-bezier(0.77, 0, 0.175, 1), mantido discreto o bastante para o texto continuar conduzindo. Tome emprestada a estrutura, não o assunto: a página 404 e os números dela passam para a sua marca sem alteração.
Feito para
- Times internos que estendem esta página 404 e precisam de seções de 100vh e passos de espaçamento de 20px levado para os novos blocos sem alteração.
- Líderes de estúdio que tocam vários projetos ao mesmo tempo vão usar esta página 404 como o padrão que todas as outras páginas copiam.
- Feito para um fundador solo lançando uma página 404 para um produto de IA ou SaaS, sem nenhum design system atrás.
O que está incluído
- A barra segue a grade. Uma barra fina ocupa o topo de página 404, com a marca à esquerda e os links em DM Sans, 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.
- Passos de espaçamento citados. A tipografia e o espaçamento saem de uma lista só aqui: seções de 100vh, passos de espaçamento de 20px, transições de 5s e curva de aceleração cubic-bezier(0.77, 0, 0.175, 1). A tipografia e o layout compartilham os mesmos passos, então nada sai do lugar quando um dos dois é substituído.
- Texto primeiro, decoração depois. A composição está completa em 1986x1446: texto, mídia e controles estão todos nomeados no briefing. A página é uma composição só em 1986x1446, e é por isso que ela se sustenta quando o texto muda.
- Links colapsam em uma largura. A marca segura a borda esquerda e os links correm à direita dela, tudo composto em DM Sans, para a barra pertencer à página abaixo e não a um sistema separado.
Movimento e interação
Durações curtas e nomeadas
As mudanças de estado estão especificadas em 5s, então o feedback dos controles é um valor projetado, não o padrão do navegador. A curva de aceleração é especificada junto com a duração (5s), então uma reconstrução não pode trocar a sensação sem aviso.
Hover, mas com parcimônia
Cada elemento interativo faz uma coisa (estados de hover nos botões e links, não em todos os cards), e é isso que mantém os estados previsíveis. Nada na página abre um modal ou sequestra o scroll; as interações ficam locais ao elemento.
Como a página 404 se reorganiza
Uma escala fixa de desktop teria sido mais fácil. O briefing acrescenta um clamp entre 14px e 20px, que é o que mantém a linha de display proporcional entre larguras. Nada importante é descartado em larguras estreitas.
Os números por trás da página 404
Números específicos envelhecem: um valor que serve para 1986x1446 pode não servir para a sua moldura. O briefing declara seções de 100vh e passos de espaçamento de 20px mesmo assim, porque um valor declarado é mais fácil de mudar que um implícito. Nada nesta página 404 depende de um padrão.
O que esta página 404 acerta
A contenção custa espaço para prova acima da dobra. Este briefing aceita esse custo e gasta a primeira tela com a oferta, com seções de 100vh e passos de espaçamento de 20px fixadas para que uma seção de prova seja acrescentada abaixo sem retrabalho. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
Perguntas frequentes
Por que o prompt do Nexto 404 não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 5.689 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Qual é o tamanho do prompt por trás de Nexto 404?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1986x1446, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de Nexto 404 depende de React e Tailwind CSS?
Nexto 404 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.
