Über diese Vorlage
IntelligentX: Hero-Bereich für SaaS, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. Das Farbschema ist weiß #EDEEF5 darunter, schwarz #1A1A1A für die Schrift und helles limette #9FFF00 für die Akzente, und die Seite ist in Inter gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 640x462, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Lass es beim Schreiben offen: Die 4.182 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Inhouse-Teams, die ein Hero-Bereich-Design erweitern und 110vh hohe Sektionen und Abstände in 16px-Schritten unverändert in die neuen Blöcke übernehmen müssen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von IntelligentX.
- Gründer, die eine erste Version ausliefern und lieber eine Komposition in Inter anpassen als ein Template zusammenzusetzen.
Was enthalten ist
- Schmale Navigationsleiste. Die Zeile setzt ihren Kontrast an genau einer Stelle: die Aktion in #9FFF00, während Wortmarke und Links auf der Textfarbe zurücktreten. Unterhalb des Tablet-Breakpoints übernimmt ein mobiles Overlay. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #9FFF00 ist das einzige Element in der Leiste mit Gewicht.
- Werte bis in den Build. Das Briefing nennt die Zahlen: 110vh hohe Sektionen und Abstände in 16px-Schritten. Genau deshalb hält die Komposition zusammen, denn zwischen Schrift und Rahmen liegt keine erfundene Abstandsstufe. Die Werte stammen aus dem aufgezeichneten Prompt und sind nicht abgeleitet, deshalb überstehen sie ein erneutes Rendern.
- Die Skala ist das Styling. Die Schrift ist hier das Styling-System: Inter in der Display-Größe, dieselbe Schrift durch die ganze Oberfläche, und keine zweite Akzentfarbe, die die Arbeit übernimmt. Ein Schrifttausch ist möglich, die Proportionen müssen ihn aber überstehen.
- Eine Zeile, keine Schubladen. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 640x462, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Fast keine Bewegung
Diese Seite kommt als stehende Komposition in 640x462, die Hierarchie muss also ohne Bewegung funktionieren, und sie tut es. Nur die Elemente bewegen sich, die auf den Zeiger reagieren.
Statisch mit Absicht
Eine Scroll-Bibliothek gibt es hier nicht: Die 640x462-Komposition steht still, und nur die Elemente bewegen sich, die auf dich reagieren. Stillstand ist eine gültige Entscheidung.
Was sich in IntelligentX bewegt
Das Animationsbudget steht fest: Hover- und Druckzustände. Nichts im Eintrag Hero-Bereich bewegt sich ohne einen Wert dahinter. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Wie IntelligentX den ersten Blick ordnet
Die Seite hat eine bewusste Reihenfolge. die Navigation etabliert das Produkt und gibt Rückkehrenden einen vertrauten Weg. Die Headline bekommt die Display-Größe, die Stützzeile erklärt das Angebot, und der helles limette #9FFF00 markiert die Hauptaktion, damit der nächste Schritt nie fraglich ist. Nichts konkurriert damit: Vor der ersten Entscheidung steht kein Kartenraster, und genau das hält die Komposition (Hero-Bereich) in SaaS-Arbeiten leicht. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Was du in IntelligentX zuerst änderst
Eine reine Substitution hat eine Grenze: Wenn dein Produkt eine andere Hierarchie braucht, arbeiten 110vh hohe Sektionen und Abstände in 16px-Schritten dagegen. Ändere in dem Fall zuerst die Reihenfolge und danach die Werte. Behalt den Medienzuschnitt; er leistet so viel wie die Schrift.
Häufige Fragen
Was steht eigentlich im Briefing hinter IntelligentX?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 640x462, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Tailwind CSS, um IntelligentX nachzubauen?
IntelligentX 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 IntelligentX 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 640x462 erfasst.
