Über diese Vorlage
404 Planet ist eine brauchbare Referenz für dieses Publikum: die Komposition (404-Seite), ausgelegt für ein KI- oder SaaS-Produkt, vermessen und bereit zum Nachbauen. „This page seems to have“ ist die Zeile, auf die das Layout gebaut ist. Die Palette ist tiefes blau #01010C darunter, gedämpftes petrol #D1ECF4 für die Schrift und blau #0D214E für die Akzente, gesetzt in Helvetica, Arial. Die Referenz ist mit React und Tailwind CSS gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Das Briefing gibt sein Bewegungsbudget für Übergänge von 200ms aus. Nimm es zur Hand, wenn im Fall 404-Seite die Reihenfolge feststehen muss, bevor neue Sektionen dazukommen.
Gemacht für
- Wenn du ein Modell statt eines Designers briefst, starte mit dem 404-Seite-Briefing und lass den Prompt ein 640x468 Rahmen festhalten.
- Nimm zuerst Schrift von 80px bis 260px und Abstände in 10px-Schritten und lass die Palette folgen, weil die Abstände dieses 404-Seite-Design lesbar machen.
- Wer ein Modell mit einem 404-Seite-Briefing versorgt, startet mit dem Prompt über 7.598 Zeichen.
Was enthalten ist
- Zurückhaltende Navigation. Die Leiste ist der leiseste Teil der Komposition: Wortmarke, eine kurze Linkreihe und eine Aktion in #0D214E, alles auf der kleinsten Schriftstufe des Briefings. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #0D214E ist das einzige Element in der Leiste mit Gewicht.
- Abstände als Werte genannt. Hier ist nichts geschätzt. Die Spezifikation legt Schrift von 80px bis 260px, Abstände in 10px-Schritten und 200ms Übergänge fest, und der Rest des Layouts leitet sich aus diesen Werten ab. Der kleinste und der größte Wert dieser Liste stecken den Bereich ab, in dem die Komposition arbeitet.
- Eine Leiste ohne Beiwerk. Eine Aktion pro Leiste. Die Referenz wurde mit 640x468 erfasst.
- Nichts davon ist geerbt. Die Abstände sind genauso zitiert (Schrift von 80px bis 260px, Abstände in 10px-Schritten und 200ms Übergänge) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Die Zeiten stehen im Briefing
Hover-, Druck- und Fokuszustände lösen sich alle in 200ms auf, deshalb wirkt die Oberfläche unmittelbar. Fokus-Zustände laufen mit demselben Wert wie Hover, Tastatur- und Zeiger-Rückmeldung passen dadurch zusammen.
Interaktion sitzt auf den Bedienelementen
Die interaktive Ebene ist bewusst klein: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Jeder Zustand ändert eine Eigenschaft, das hält die Rückmeldung lesbar. Ein paar verlässliche Zustände schlagen eine lange Liste von Effekten.
404 Planet als Spezifikation lesen
Jede Beziehung auf dieser Seite ist ein Wert, den du prüfen kannst: Schrift von 80px bis 260px, Abstände in 10px-Schritten und 200ms Übergänge. Genau das macht 404 Planet nachbaubar statt nur reproduzierbar. Nichts in diesem Eintrag 404-Seite hängt an einer Voreinstellung.
Was sich in 404 Planet bewegt
Bewegung ist hier eine Reihe von Entscheidungen, keine Bibliothek: Übergänge von 200ms und Hover- und Druckzustände, und beim Scrollen animiert nichts. Das Ergebnis ist eine Seite, die gesetzt wirkt: kurze Dauern, ein Auftritt und Zustandswechsel, die eine Aktion bestätigen statt sie zu dekorieren. Nichts in diesem Eintrag 404-Seite animiert um seiner selbst willen.
Wie der Eintrag 404-Seite umbricht
Das Briefing beschreibt, was sich bei welcher Breite ändert (die Navigation klappt zu einem mobilen Menü zusammen); die Mobil-Version ist also eine Entscheidung und keine Quetschung. Der Kontrast liegt auf dem Akzent #0D214E über den Medien, und das Video ist stumm und inline. Die Skala folgt dem Viewport; die Abfolge bleibt.
Häufige Fragen
Was steht eigentlich im Briefing hinter 404 Planet?
Das erfasste Briefing umfasst 7.598 Zeichen und beschreibt Rahmen, Schriftgrößen-Skala, Palette und Übergänge. Wenn du es kopierst, hast du genau diesen Text; schickst du es an Studio, wird dieselbe Anfrage mit der bereits beschriebenen Seite vorbereitet.
Brauche ich React und Tailwind CSS, um 404 Planet nachzubauen?
404 Planet wurde in React und Tailwind CSS gebaut, und der Eintrag nennt das, um die Herkunft zu belegen. Das Briefing beschreibt Positionen, Größen und Zeitwerte, also lässt sich die Seite in jedem Framework nachbauen, das Schrift setzen und Elemente platzieren kann.
Ist das Briefing zu 404 Planet dasselbe wie der Prompt, den ich selbst schreiben würde?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 7.598 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
