Sobre esta plantilla
404 Planet se capturó a 640x468 y se conserva como especificación, no como imagen de galería. El titular de la propia página dice “This page seems to have”, y la composición se construye alrededor de esas palabras exactas. El color se limita a azul intenso #01010C de base, turquesa apagado #D1ECF4 para la tipografía y azul #0D214E para los acentos y la página se compone en Helvetica, Arial. La referencia está construida con React y Tailwind CSS, y las decisiones de maquetación se documentan aparte. La página reduce el movimiento a transiciones de 200ms. Toma prestada la estructura, no el tema: las cifras y el orden de página 404 pasan a tu marca sin cambios.
Pensado para
- Equipos que construyen este tipo de página 404 para un producto de IA o SaaS y quieren el detalle medido (tipografía de 80px a 260px y pasos de espaciado de 10px) en lugar de una captura que copiar.
- Quien le pase el brief de página 404 a un modelo usará el prompt de 7.598 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de página 404 cuyo titular tiene que seguir siendo tan largo como el de 404 Planet.
Qué incluye
- Una barra sin nada de más. Marca, enlaces y la acción #0D214E comparten una línea base, y eso es lo que evita que una fila fina parezca accidental. Los enlaces se componen a un tamaño menor que la marca, y la acción en #0D214E es el único elemento de la barra con peso.
- Aquí nada se hereda. Aquí nada se mide a ojo. La especificación fija tipografía de 80px a 260px, pasos de espaciado de 10px y transiciones de 200ms, y el resto de la maquetación se deriva de esos valores. El espaciado se cita en las mismas unidades que el tipo, de modo que ambos se comparan directamente.
- La barra sigue la cuadrícula. Mantén el número de enlaces en cuatro o cinco; la fila está dimensionada para eso. La captura de la referencia es de 640x468.
- Todas las medidas están escritas. El espaciado se cita igual (tipografía de 80px a 260px, pasos de espaciado de 10px y transiciones de 200ms), no como una escala que crece sola.
Movimiento e interacción
Cambios de estado medidos
El brief fija la transición en 200ms, así que una reconstrucción no puede colar un valor por defecto más lento. Si cambia el easing, la duración tiene que revisarse con él.
Los controles son la capa interactiva
La interacción se queda en cada control (estados hover en los botones y los enlaces y no en todas las tarjetas), así que nada más de la página se mueve como efecto secundario. Los estados salen de la paleta de la propia página y no de un valor por defecto de componente. Unos pocos estados fiables valen más que una lista larga de efectos.
Leer 404 Planet como especificación
Cada relación de esta página es un valor que puedes comprobar: tipografía de 80px a 260px, pasos de espaciado de 10px y transiciones de 200ms. Eso es lo que hace que 404 Planet se pueda reconstruir y no solo reproducir. Nada de este tipo de página 404 depende de un valor por defecto.
Qué se mueve en 404 Planet
Un presupuesto de movimiento corto te cuesta dramatismo en el primer fotograma. A cambio ganas legibilidad, y significa que el movimiento se puede trasladar sin librería: transiciones de 200ms y estados hover y pulsados. Nada se anima por gusto en este tipo de página 404.
El reflujo de página 404
Casi todo el trabajo responsive se queda en esconder elementos. Aquí la maquetación cambia de forma: la navegación se pliega en un menú móvil, y no se elimina nada importante para que quepa la primera pantalla. El ancho cambia las medidas, no el recorrido de lectura.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de 404 Planet?
El brief capturado ocupa 7.598 caracteres y describe la maqueta, la escala tipográfica, la paleta y las transiciones. Copiarlo te da ese texto; si lo mandas a Studio, la misma petición queda preparada con la página ya descrita.
¿Por qué la ficha nombra React y Tailwind CSS?
404 Planet se construyó en React y Tailwind CSS, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
¿Qué puedo hacer con el brief de 404 Planet una vez lo tengo?
Todo lo que se cita en la página procede del brief capturado de 7.598 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
