Über diese Vorlage
ClarionAI wurde bei 1952x1440 erfasst und als Spezifikation abgelegt, nicht als Galeriebild. Sie beginnt mit „The intelligence layer \n for clear decisions“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Die ganze Seite baut auf schwarz #000000 darunter auf. Es kommt als React und Tailwind CSS, damit sich der ganze Landingpage ohne Design-Übergabe in ein Projekt heben lässt. Die Bewegung bleibt auf Übergänge von 1000ms und eine Videospur in Schleife beschränkt. Lass es beim Schreiben offen: Die 6.807 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Nimm zuerst eine feste Display-Größe von 16px und Abstände in 20px-Schritten und lass die Palette folgen, weil die Abstände dieses Landingpage-Design lesbar machen.
- Produktteams, die die Landingpage-Copy selbst schreiben und jede Zeile auf die Länge halten müssen, die die Display-Schrift vorgibt.
- Gemacht für Product Manager, die ein Landingpage-Design auf einen Sprint und ohne neue Assets begrenzen müssen.
Was enthalten ist
- Navigation in einer Zeile. Die Navigation ist eine einzige Zeile ohne zweite Ebene darunter. Unterhalb des Tablet-Breakpoints übernimmt ein mobiles Overlay. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1952x1440, damit die Medien darunter bis an den Rand durchlaufen. Eine Aktion pro Leiste.
- Werte zum Nachmessen. Im Layout bleibt nichts dem Gefühl überlassen: Das Briefing nennt eine feste Display-Größe von 16px, Abstände in 20px-Schritten und 1000ms Übergänge, und der Build muss genau diese Werte treffen. Schrift und Layout teilen dieselben Stufen, damit nichts verrutscht, wenn eines von beiden ersetzt wird.
- Die Ankündigungs-Pille. Das Badge ist das einzige Element, das über der Headline stehen darf, und genau dadurch wirkt es als Ankündigung und nicht als Rahmenwerk. Es ist so positioniert, dass die Headline die Mitte der Komposition behält. Nimm es weg, wenn die Nachricht alt ist.
- Der Footer ist eine volle Komposition. Die Links sind zu Spalten gruppiert, die Wortmarke hat ihren eigenen Block, und das hält einen langen Footer lesbar, statt ihn zu einer Liste zu machen. Die Schriftgrößen fallen von den Spaltenüberschriften zu den Links ab, damit die Hierarchie auch in einem dichten Footer trägt. Gruppiere die Links, statt sie aufzulisten.
Bewegung & Interaktion
Dauern aus dem Briefing
Hover-, Druck- und Fokuszustände lösen sich alle in 1000ms auf, deshalb wirkt die Oberfläche unmittelbar. Jeder Zustandswechsel nennt einen Wert, der Browser-Standard kommt nie zum Einsatz.
Die Schleife übernimmt die Grundbewegung
Die Hintergrundbewegung kommt aus der 18,4s-Schleife in 1952x1440 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Der Clip ist stumm und inline, das erste Bild ist also ohne Interaktion verfügbar.
Die Zeitwerte hinter dem Eintrag Landingpage
So wenig Bewegung heißt, dass die Seite von Schrift und Rahmen lebt. Die Komposition steht auch dann noch, wenn die Bewegung entfällt; es bliebe nur Übergänge von 1000ms, eine Medienschleife von 18,4s und Hover- und Druckzustände. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Wie der Eintrag Landingpage umbricht
Eine fluide Skala und eine gestufte sehen auf breitem Screen ähnlich aus. Vereng den Viewport, und der Unterschied zeigt sich: eine Größe zwischen 16px und 20px gegen feste Sprünge. Die Mobil-Version ist eine Entscheidung und kein Notfallplan.
So wird der Eintrag Landingpage deiner
Die Komposition ist der wiederverwendbare Teil, das Thema gehört dir. eine feste Display-Größe von 16px und Abstände in 20px-Schritten bleiben, Text, Medien und Markenzeichen werden ersetzt. Hilft ein neues Element nicht, das Angebot oder den nächsten Schritt zu erklären, gehört es unter den Fold.
Häufige Fragen
Wie lang ist der Prompt hinter ClarionAI?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1952x1440, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Tailwind CSS, um ClarionAI nachzubauen?
ClarionAI 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.
Woher stammt das Design von ClarionAI?
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 1952x1440 erfasst.
