Sobre este template
404 Planet mostra uma forma de construir página 404 para um produto de IA ou SaaS e publica as instruções que produziram o resultado. Ela abre com “This page seems to have” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A paleta é azul profundo #01010C por baixo, verde-água suave #D1ECF4 para a tipografia e azul #0D214E carregando os destaques, com tipografia Helvetica, Arial. A stack é React e Tailwind CSS; cada medida está registrada, e é isso que a torna reaproveitável. O movimento cabe todo em transições de 200ms. Parta do briefing capturado e depois edite a página 404 em vez de reconstruí-la do zero.
Feito para
- Times de growth que redesenham um produto de IA ou SaaS página 404 e querem a moldura em 640x468 mantida enquanto o texto da oferta muda.
- Esta página 404 responde a quem constrói e quer saber o que tipografia de 80px a 260px e passos de espaçamento de 10px controla de fato no layout.
- Quem briefa um modelo para uma página 404 vai usar o prompt de 7.598 caracteres como ponto de partida.
O que está incluído
- Links antes da ação. A navegação é uma faixa fina, não um bloco: marca à esquerda, links à direita do centro, uma ação #0D214E, tudo isso no topo de página 404 e sem fundo próprio. Os links são compostos abaixo da marca em tamanho, e a ação #0D214E é o único elemento da barra com peso.
- Os tamanhos estão no briefing, não em uma escala. Nada aqui é feito no olho. A especificação fixa tipografia de 80px a 260px, passos de espaçamento de 10px e transições de 200ms, e o resto do layout deriva desses valores. O menor e o maior valor dessa lista definem a faixa em que a composição trabalha.
- Topo com uma única ação. Desenhe o estado colapsado antes de acrescentar um sexto link. A referência tem captura em 640x468.
- Uma escala para tipo e moldura. O espaçamento é declarado do mesmo jeito (tipografia de 80px a 260px, passos de espaçamento de 10px e transições de 200ms), não como uma escala que cresce sozinha.
Movimento e interação
Rápido o bastante para parecer intencional
O orçamento de animação é pequeno e explícito: 200ms, aplicado a mudanças de estado, não a entradas. O tempo citado cobre mudanças de estado, então o feedback é a parte do movimento que está especificada.
Ponteiro só onde ajuda
A camada interativa é deliberadamente pequena: estados de hover nos botões e links, não em todos os cards. O feedback se limita aos controles, então a composição fica parada em volta deles. Alguns estados confiáveis valem mais que uma lista longa de efeitos.
Ler 404 Planet como especificação
Se você vai entregar isso a um desenvolvedor, o briefing é o artefato útil. Ele declara tipografia de 80px a 260px, passos de espaçamento de 10px e transições de 200ms e não deixa nada para vocês dois interpretarem. Nada nesta página 404 depende de um padrão.
O tempo por trás da página 404
A contrapartida é que nada aqui recompensa uma segunda olhada pela animação. O que ela recompensa é a ordem de leitura, com transições de 200ms e estados de hover e de clique confirmando estado em vez de decorá-lo. Nada anima por si nesta página 404.
Como a página 404 se reorganiza
O briefing descreve o que muda em cada largura (a navegação vira um menu compacto no celular), ou seja, a versão de celular é uma decisão, não um espremer. O contraste se mantém no destaque #0D214E sobre a mídia, e o vídeo é mudo e roda inline. A versão mobile é uma decisão, não um recurso de reserva.
Perguntas frequentes
O que eu recebo ao copiar o briefing de 404 Planet?
O briefing capturado tem 7.598 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 a entrada cita React e Tailwind CSS?
404 Planet 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.
Por que o prompt do 404 Planet não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 7.598 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
