Über diese Vorlage
USD Halo liefert für ein Fintech-Produkt einen fertigen ersten Screen und die Zahlen, die ihn hervorgebracht haben. Die Zeile lautet „An automated, reward-powered digital dollar built for native passive earnings and effortless connection into DeFi“, und der Rest des Eintrags Landingpage ordnet sich darum. Das Farbschema ist weiß #F5F5F5 darunter und tiefes indigo #2B2644 für die Schrift, und die Seite ist in Inter gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 458x800, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Am nützlichsten ist es, wenn beim Eintrag Landingpage für Fintech ein Textwechsel ohne Redesign möglich bleibt.
Gemacht für
- Nimm zuerst Schrift von 13px bis 16px und 100vh hohe Sektionen und lass die Palette folgen, weil die Abstände dieses Landingpage-Design lesbar machen.
- Wer ein Modell mit einem Landingpage-Briefing versorgt, startet mit dem Prompt über 8.531 Zeichen.
- Gemacht für Content-Leads, die ein Landingpage-Design neu betexten, dessen Headline so lang bleiben muss wie die von USD Halo.
Was enthalten ist
- Zurückhaltende Navigation. Die Leiste ist eine Zeile aus Text und einer Aktion, auf Schrift von 13px bis 16px und 100vh hohe Sektionen bemessen, damit sie als Streifen wirkt und nicht als Band. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 458x800, damit die Medien darunter bis an den Rand durchlaufen. Halte die Zeile einzeilig.
- Obere Zeile, eine Aktion. Eine schmale Leiste liegt über der Komposition (Landingpage), die Wortmarke links, die Links in Inter gesetzt, damit die Komposition zuerst als Inhalt und erst danach als Rahmen wirkt.
- Werte zum Nachmessen. Die Größen sind zitiert und nicht vererbt: Schrift von 13px bis 16px, 100vh hohe Sektionen und Abstände in 15px-Schritten. Tauschst du die Schrift oder den Text, halten diese Verhältnisse trotzdem. Zwischen den genannten Werten gibt es keinen erfundenen Zwischenwert; die Werteliste ist das ganze System.
- Zahlen statt einer Behauptung. Die Zahlen stehen in Inter in einer Größe, die näher an der Headline liegt als am Fließtext. Weil die Zahlen Typografie sind, erben sie das responsive Verhalten der Seite und skalieren nicht eigenständig.
Bewegung & Interaktion
Zeiger nur, wo sie helfen
Die interaktive Ebene ist klein und vorhersehbar: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Alles andere bleibt still, der Schwerpunkt liegt also auf der Komposition. Die interaktiven Zustände verschieben kein Layout, unter dem Zeiger springt also nichts.
Der Streifen, der nie anhält
Ein Laufband zieht in einer Endlosschleife durch die Komposition, gesetzt in Inter. Es ist die einzige durchgehende Bewegung außerhalb der Medien, deshalb wirkt die Seite nicht unruhig.
Wie der Eintrag Landingpage umbricht
Wo ein Template auf eine Spalte zusammenklappt und hofft, sagt dieses Briefing, was passiert (der Bereich wird auf 100vh gehalten), und lässt die Reihenfolge intakt. Die Reihenfolge ist das Letzte, was sich ändert.
Was du in USD Halo zuerst änderst
Die Komposition ist der wiederverwendbare Teil, das Thema gehört dir. Schrift von 13px bis 16px und 100vh hohe Sektionen bleiben, Text, Medien und Markenzeichen werden ersetzt. Die Komposition ist der wiederverwendbare Teil und übersteht eine andere Marke.
USD Halo als Spezifikation lesen
Konkrete Zahlen altern: Ein Wert, der bei 458x800 passt, muss nicht zu deinem Rahmen passen. Das Briefing hält die Werte trotzdem fest: Schrift von 13px bis 16px und 100vh hohe Sektionen, weil ein genannter Wert leichter zu ändern ist als ein ungenannter. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Häufige Fragen
Wie lang ist der Prompt hinter USD Halo?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 458x800, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
USD Halo 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 gehe ich mit den Medien von USD Halo in einem Kundenprojekt um?
Das Briefing ist eine Beschreibung, keine Lizenz zur Weitergabe fremder Dateien. Behalte Struktur und Zahlen, ersetze Medien und Markenzeichen, und nenne die Quelle, wenn ein Kunde fragt, woher das Layout stammt. Die Referenz wurde mit 458x800 erfasst.
