Über diese Vorlage

Aurex Finance hält den Entscheidungsweg fest: Hinter dem Eintrag Landingpage stehen 29.337 Zeichen Briefing. Die Palette ist schwarz #000000 darunter, weiß #FFFFFF für die Schrift und gedämpftes blau #AFDDFF für die Akzente, gesetzt in Manrope. Geliefert wird React und Tailwind CSS, erfasst bei 1920x1410, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung ist Übergänge von 900ms, cubic-bezier(0.16, 1, 0.3, 1) und eine Videospur in Schleife und bleibt so zurückhaltend, dass die Texte weiter führen. Nimm es als Briefing für ein Fintech-Produkt: Der Eintrag Landingpage muss einem Nachbau standhalten, nicht nur dem ersten Blick.

Gemacht für

  • Wenn drei Leute an einem Landingpage-Design arbeiten, gib Content-Leads Schrift von 12px bis 68px und Abstände in 20px-Schritten statt eines Screenshots.
  • Dieses Landingpage-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Fintech 6,5s Video in Schleife tragen kann.
  • Gemacht für Content-Leads, die ein Landingpage-Design neu betexten, dessen Headline so lang bleiben muss wie die von Aurex Finance.

Was enthalten ist

  • Links vor der Aktion. Die Leiste ist der leiseste Teil der Komposition: Wortmarke, eine kurze Linkreihe und eine Aktion in #AFDDFF, alles auf der kleinsten Schriftstufe des Briefings. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #AFDDFF ist das einzige Element in der Leiste mit Gewicht.
  • Am Viewport gemessen. Das Briefing hält seine Größen bei der Aufnahme fest (Schrift von 12px bis 68px, Abstände in 20px-Schritten, 900ms Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1)), damit sich ein Nachbau überprüfen und nicht schätzen lässt. Die Abstände stehen in denselben Einheiten wie die Schrift, dadurch lassen sich beide direkt vergleichen. Tausch die Schrift oder den Text, aber nicht die Skala.
  • Ein Clip trägt alles. Das Briefing legt das Video auf 1920x1410 mit einer Schleife von 6,5s fest, und jedes Textelement ist gegen diesen Rahmen gesetzt. Die Schleife ist kurz genug (6,5s), dass das Auge sie als Textur liest und nicht als Zeitachse.
  • Panels statt Absätze. Das Raster übernimmt die Lesereihenfolge: Panels gleichen Gewichts, je eine Idee, in Manrope klein gesetzt, damit die Struktur sichtbar bleibt. Jedes Panel paart eine Idee mit einem Icon, damit der Blick horizontal bleibt.

Bewegung & Interaktion

Eine Schleife, keine Timeline

Ein einziger Clip von 6,5s ist die ganze Hintergrundebene: Er läuft hinter dem Text, schleift ohne sichtbaren Schnitt und reagiert nie auf den Zeiger. Weil er stumm ist, kann die Schleife unter dem Text laufen, ohne um Ton oder Aufmerksamkeit zu konkurrieren.

Zustandswechsel mit Zeitwert

Zustandswechsel sind mit 900ms angegeben, die Rückmeldung der Bedienelemente ist damit ein gestalteter Wert und kein Browser-Standard. Die Werte sind kurz genug, um als Rückmeldung zu lesen und nicht als Animation. Bemiss die Rückmeldung exakt.

So wird der Eintrag Landingpage deiner

Ändere zuerst den Inhalt und prüf danach den Rahmen. Schrift von 12px bis 68px, Abstände in 20px-Schritten, 900ms Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1) sind die Werte, die du beim Tauschen des Textes schützt. Das Thema ist der Teil, der sich ändern sollte.

Warum diese Komposition für Fintech trägt

Verglichen mit einem Template-Hero liegt der Unterschied im Weggelassenen. Es gibt kein Kartenraster, kein Karussell und keinen zweiten Call-to-Action: nur die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile, das Kartenraster und die Feature-Liste, und Schrift von 12px bis 68px und Abstände in 20px-Schritten geben die Maße vor. Aurex Finance nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.

Wie der Eintrag Landingpage umbricht

Breit ist die Komposition dicht; schmal gilt: die Navigation klappt zu einem mobilen Menü zusammen. Beide Zustände sind im Briefing beschrieben. Bedienelemente bleiben groß genug zum Tippen, und der Text behält bei jeder Breite seine Lesereihenfolge.

Häufige Fragen

Ist der Prompt zu Aurex Finance eine fertige Spezifikation oder ein Ausgangspunkt?

Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1920x1410, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.

Wie viel von Aurex Finance hängt von React und Tailwind CSS ab?

Aurex Finance 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.

Darf ich Aurex Finance in einem Kundenprojekt verwenden?

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 1920x1410 erfasst.

In Studio nachbauen

Starte mit der Referenz und passe Inhalte und visuelle Details in Studio an.