Über diese Vorlage
Datacore Booking zeigt einen Weg, die Komposition (Hero-Bereich) für dieses Publikum zu bauen. Gedacht ist sie für ein KI- oder SaaS-Produkt, und die Anweisungen dazu sind veröffentlicht. „Book your perfect stay instantly and hassle-free“ ist die Zeile, auf die das Layout gebaut ist. Die Palette ist schwarz #171717 darunter, grau #D4D4D4 für die Schrift und helles indigo #7B39FC für die Akzente, gesetzt in Manrope. Geliefert wird React und Tailwind CSS, erfasst bei 800x553, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Lass es beim Schreiben offen: Die 2.826 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Wenn die Bewegung wegfallen muss, funktioniert das Hero-Bereich-Design trotzdem, weil dann Abstände in 14px-Schritten die Hierarchie übernehmen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Datacore Booking.
- Wenn dein Team schon ein Designsystem hat, ist dieses Hero-Bereich-Design der Fall, in dem sich die eine gesättigte Farbe für #7B39FC einsetzen lässt.
Was enthalten ist
- Obere Zeile, eine Aktion. Die obere Zeile trägt die Wortmarke, vier bis fünf Links und eine einzelne Aktion in #7B39FC, knapp genug, um neben dem Rest der Seite leise zu bleiben. Unterhalb des Tablet-Breakpoints übernimmt ein mobiles Overlay. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #7B39FC ist das einzige Element in der Leiste mit Gewicht.
- Werte zum Nachmessen. Die Größen wurden am Render in 800x553 abgelesen: Abstände in 14px-Schritten. Die Werte stammen aus dem aufgezeichneten Prompt und sind nicht abgeleitet, deshalb überstehen sie ein erneutes Rendern. Übernimm die genannten Werte mit dem Layout.
- Die Schrift trägt den Ton. Die Schriften sind Rollen zugewiesen und nicht gemischt: Manrope trägt Display und Oberfläche zusammen. Die Schrift ist mit festen Größen gepaart, und das hält die Display-Zeile und den Oberflächentext aufeinander bezogen.
- Eine Zeile, keine Schubladen. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x553, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Interaktion bleibt lokal
Die Seite reagiert nur dort, wo man handeln kann: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Jeder Zustand ändert eine Eigenschaft, das hält die Rückmeldung lesbar. Halte die interaktive Ebene klein.
Bewegung, die nicht stört
Diese Seite kommt als stehende Komposition in 800x553, die Hierarchie muss also ohne Bewegung funktionieren, und sie tut es. Im Briefing steht keine Animationsbibliothek, der Nachbau bleibt also klein.
Warum das Briefing für SaaS trägt
Auf dieser Seite steht ein einziges Versprechen, und Abstände in 14px-Schritten halten es an seinem Platz. Die Seite sagt es selbst: „Book your perfect stay instantly and hassle-free“. Nichts unterhalb des Folds muss das Angebot ebenfalls tragen. Datacore Booking nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Wie der Eintrag Hero-Bereich umbricht
Ein entworfenes schmales Layout kostet mehr Entscheidungen als eine Quetschung. Das Briefing bezahlt sie: die Navigation klappt zu einem mobilen Menü zusammen, genannt und nicht erst zur Build-Zeit entdeckt. Die Breite ändert die Maße, nicht den Lesepfad.
Die Reihenfolge im Eintrag Hero-Bereich
In dieser Reihenfolge: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und der Hintergrund-Clip. Jedes Element hat eine Aufgabe, und helles indigo #7B39FC ist ausschließlich dem Element vorbehalten, das gedrückt werden soll. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Häufige Fragen
Wie lang ist der Prompt hinter Datacore Booking?
Das erfasste Briefing umfasst 2.826 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 Datacore Booking nachzubauen?
Datacore Booking 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 Datacore Booking?
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 800x553 erfasst.
