Über diese Vorlage
Retro-Futurist ist eine brauchbare Referenz für dieses Publikum: die Komposition (Hero-Bereich), ausgelegt für eine Agentur oder ein Studio, vermessen und bereit zum Nachbauen. „Glad you stopped in. Good taste tends to find us. Now, what are we building?“ ist die Zeile, auf die das Layout gebaut ist. Farbe bleibt auf grau #B3B1B3 darunter begrenzt, gesetzt in HelveticaNowDisplay-Medium. Geliefert wird React und Tailwind CSS: eine Seite, kein Plugin, kein Build-Tooling zwischen dir und dem Design. Das Bewegungsbudget umfasst Übergänge von 38ms. Lass es beim Schreiben offen: Die 5.713 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Growth-Teams, die ein Hero-Bereich-Design für eine Agentur oder ein Studio neu einfärben und den 640x474-Rahmen behalten wollen, während sich die Angebotstexte ändern.
- Nimm zuerst Schrift von 13px bis 32px und Abstände in 26px-Schritten und lass die Palette folgen, weil die Abstände dieses Hero-Bereich-Design lesbar machen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Retro-Futurist.
Was enthalten ist
- Ein Breakpoint für die Links. Eine kurze Reihe Links und eine einzelne Aktion liegen in Hero-Bereich, auf Schrift von 13px bis 32px und Abstände in 26px-Schritten gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 640x474, damit die Medien darunter bis an den Rand durchlaufen. Bleib bei vier oder fünf Links; die Zeile ist dafür bemessen.
- Eine Pille für das eine Neue. Ein Badge, eine Botschaft: die Pille sitzt in HelveticaNowDisplay-Medium auf der kleinsten Stufe über der Headline, und um diesen Platz konkurriert nichts anderes. Die Pille steht auf der kleinsten Stufe im Briefing, damit sie als Label und nicht als zweiter Titel gelesen wird.
- Navigation in einer Zeile. Die Leiste besteht aus wenigen Elementen und lässt sich ohne Komponentenbibliothek nachbauen. Die Referenz wurde mit 640x474 erfasst.
- Größen stehen im Briefing. Die Größen wurden am Render in 640x474 abgelesen: Schrift von 13px bis 32px, Abstände in 26px-Schritten und 38ms Übergänge. Jeder Wert lässt sich gegen den erfassten Prompt prüfen, und genau das macht einen Nachbau überprüfbar statt ungefähr.
Bewegung & Interaktion
Die Überschrift setzt sich zusammen
Bewegung beim Eintritt gibt es nur für ein Element (ein Typewriter-Durchlauf tippt die Einleitungszeile); genau das verhindert, dass eine dichte erste Bildschirmfläche überladen wirkt. Bei reduzierter Bewegung erscheint das Element einfach, und das Layout bleibt unverändert.
Zeiten in Millisekunden
Eine Dauer deckt alle Interaktionen ab (38ms); so wirken Hover und Druck als ein System. Ändert sich das Easing, muss die Dauer mit angepasst werden.
So wird der Eintrag Hero-Bereich deiner
Vergleich das mit einem leeren Blatt. Hier sind der Rahmen (640x474) und Schrift von 13px bis 32px und Abstände in 26px-Schritten bereits entschieden, die Arbeit ist also Substitution und nicht Komposition. Behalt den Medienzuschnitt; er leistet so viel wie die Schrift.
Retro-Futurist als Spezifikation lesen
Wo ein Moodboard die Skala offenlässt, schließt dieses Briefing sie: Schrift von 13px bis 32px und Abstände in 26px-Schritten, und die umliegenden Werte leiten sich aus dieser Entscheidung ab. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Was hier für Agenturen & Studios funktioniert
Das Versprechen steht einmal auf der Seite, in Displaygröße. Die Seite sagt es selbst: „Glad you stopped in. Now, what are we building?“. Alles Weitere im Eintrag Hero-Bereich ordnet sich um diese Zeile: die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile und der Hintergrund-Clip folgen aufeinander, und kein zweites Versprechen kämpft um den ersten Blick. Es gibt einem Leser im Bereich Agentur den kürzesten ehrlichen Weg zum Angebot.
Häufige Fragen
Wie lang ist der Prompt hinter Retro-Futurist?
Das erfasste Briefing umfasst 5.713 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.
Kann ich Hero-Bereich von Retro-Futurist in einem anderen Stack nachbauen?
Retro-Futurist 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.
Wie verhalten sich die 38ms Übergänge in Retro-Futurist?
Auftritte und Zustandswechsel liegen im Bereich von 38ms. Sie hängen an Zustandswechseln statt an einer Scroll-Bibliothek und halten die Texte nie auf.
