À propos de ce modèle
404 Planet est une référence de travail pour un produit IA ou SaaS, un exemple de page 404 entièrement mesuré et prêt à reproduire. La page affiche son propre titre, « This page seems to have », et la composition est construite autour de ces mots exacts. La palette repose sur bleu profond #01010C en fond, sarcelle sourd #D1ECF4 pour le texte et bleu #0D214E pour les accents, et la page est composée en Helvetica, Arial. La construction repose sur React et Tailwind CSS. Chaque mesure y est écrite, et c’est ce qui la rend réutilisable. L’animation se limite à 200ms de transitions, assez discrète pour que le texte reste au premier plan. Prenez-la lorsque l’ordre de page 404 doit être arrêté avant d’ajouter de nouvelles sections.
Conçu pour
- Équipes growth qui rhabillent un design de page 404 pour un produit IA ou SaaS et veulent garder le cadre 640x468 pendant que le texte de l’offre change.
- Des équipes qui construisent une page 404 pour un produit IA ou SaaS et veulent le détail mesuré (une typographie de 80px à 260px et des pas d’espacement de 10px) plutôt qu’une capture d’écran à copier.
- Quiconque briefe un modèle sur un design de page 404 utilisera le prompt de 7 598 caractères comme point de départ.
Ce qui est inclus
- Une ligne, aucun tiroir. La barre porte le nom de marque, les liens de la section et un bouton en #0D214E, mesurée à une typographie de 80px à 260px et des pas d’espacement de 10px pour ne jamais devenir un second header. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #0D214E est le seul élément de la barre à porter du gras.
- La composition est le contenu. Tout ce qui se trouve au-dessus de la ligne de flottaison mérite sa place. Le brief nomme le texte, le cadre 640x468 et les tailles de caractères, et ne laisse rien de décoratif les concurrencer. La page est une seule composition en 640x468, c’est pourquoi elle tient quand le texte change.
- Une barre sans superflu. Tenez la rangée sur une seule ligne. La référence a été capturée en 640x468.
- Le brief nomme les pas. Chaque mesure du brief est un nombre que vous pouvez remesurer, une typographie de 80px à 260px, des pas d’espacement de 10px et des transitions de 200ms. La liste est assez courte pour être vérifiée élément par élément.
Animation et interaction
Une durée pour les contrôles
Le brief fixe la transition à 200ms, donc une reconstruction ne peut pas lui substituer un défaut plus lent. Une même valeur est réutilisée sur tous les contrôles, donc leurs durées ne peuvent pas diverger.
Le retour sur les contrôles
La page ne répond que là où l’on peut agir (des états de survol sur les boutons et les liens plutôt que sur chaque carte). Un contrôle qui a l’air interactif se comporte comme tel, donc aucune affordance trompeuse. Quelques états fiables valent mieux qu’une longue liste d’effets.
Les chiffres derrière page 404
Si vous transmettez ceci à un développeur, le brief est l’artefact utile. Il énonce une typographie de 80px à 260px, des pas d’espacement de 10px et des transitions de 200ms et ne laisse rien à interpréter entre vous deux. Rien dans le design de page 404 ne dépend d’une valeur par défaut.
Les timings derrière page 404
Un pack d’animations prêtes à l’emploi aurait été plus rapide à livrer. Le brief spécifie plutôt 200ms de transitions et des états de survol et de clic, et c’est pourquoi la page semble conçue plutôt que mise en scène. Rien ne s’anime pour lui-même dans le design de page 404.
Le réagencement de page 404
Une échelle fluide et une échelle par paliers se ressemblent sur grand écran. Réduisez la fenêtre et la différence apparaît, un clamp entre 80px et 260px contre des sauts fixes. L’échelle change avec le viewport, la séquence non.
Questions fréquentes
Quelle est la longueur du prompt derrière 404 Planet?
Comptez 7 598 caractères pour le brief capturé, qui décrit le cadre, l’échelle typographique, la palette et les transitions. Le copier vous donne ce texte tel quel, et l’envoyer à Studio prépare la même demande avec la page déjà décrite.
Puis-je reconstruire ce type de page 404 de 404 Planet avec une autre stack?
La fiche indique React et Tailwind CSS pour la provenance, parce que 404 Planet a été réalisé avec cette pile technique. Le brief ne décrit que des positions, des tailles et des durées, donc il se reconstruit dans n’importe quel framework capable de composer du texte et de placer des éléments.
Comment cette fiche de 404 Planet est-elle organisée?
Tout ce qui est cité sur la page provient du brief capturé de 7 598 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
