Über diese Vorlage
Equilibrium 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. Farbe bleibt auf tiefes blau #0F1118 darunter und gedämpftes orange #CDBAB2 für die Schrift begrenzt, gesetzt in Geist. Der Bau ist React und Tailwind CSS; jedes Maß darin ist aufgeschrieben, und genau das macht ihn wiederverwendbar. Lass es beim Schreiben offen: Die 4.787 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Entwickler, die das Hero-Bereich-Design auch bei langsamer Verbindung am Leben halten müssen, planen 640x472 und die Schriftgrößen-Skala als Gewichtsbudget ein.
- Teams, die ein KI- oder SaaS-Produkt Hero-Bereich bauen und die gemessenen Werte (Abstände in 72px-Schritten) wollen statt eines Screenshots zum Abschreiben.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Equilibrium.
Was enthalten ist
- Eine Zeile, keine Schubladen. Die Leiste ist eine Zeile aus Text und einer Aktion, auf Abstände in 72px-Schritten bemessen, damit sie als Streifen wirkt und nicht als Band. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 640x472, damit die Medien darunter bis an den Rand durchlaufen.
- Die Schrift trägt den Ton. Geist erledigt die Arbeit, die Größen fallen von der Headline zum Begleittext deutlich ab, und die Laufweite wird enger, je größer die Schrift wird, damit die Hierarchie über Schrift trägt und nicht über Farbe. Die Zeilenhöhe folgt den Größenstufen und nicht einem einzigen globalen Wert.
- Eine Leiste ohne Beiwerk. Die Wortmarke hält die linke Kante, rechts davon laufen die Links, alles in Geist gesetzt, damit die Leiste zur Seite darunter gehört und nicht zu einem eigenen System.
- Feste Stufen statt einer Skala. Jedes Maß im Briefing ist eine Zahl, die du nachmessen kannst: Abstände in 72px-Schritten. Jeder Wert lässt sich gegen den erfassten Prompt prüfen, und genau das macht einen Nachbau überprüfbar statt ungefähr.
Bewegung & Interaktion
Fast keine Bewegung
Diese Seite kommt als stehende Komposition in 640x472, die Hierarchie muss also ohne Bewegung funktionieren, und sie tut es. Bewegung ist hier Rückmeldung und nicht Dekoration. Beschränke Bewegung auf die Bedienelemente.
Statisch mit Absicht
Eine Scroll-Bibliothek gibt es hier nicht: Die 640x472-Komposition steht still, und nur die Elemente bewegen sich, die auf dich reagieren.
Equilibrium als Spezifikation lesen
Ein Screenshot sagt, wie die Seite aussieht; das Briefing sagt, warum. Abstände in 72px-Schritten schließen die Lücke zwischen beiden. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
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. Beide Zustände sind im selben Briefing beschrieben.
Die Reihenfolge im Eintrag Hero-Bereich
Ein feature-getriebenes Layout listet, was das Produkt tut; dieses führt den Leser zu einer einzigen Entscheidung. Die Route zeigen die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile und der Hintergrund-Clip, und Abstände in 72px-Schritten staffeln sie. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Häufige Fragen
Wie lang ist der Prompt hinter Equilibrium?
Das erfasste Briefing umfasst 4.787 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.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Equilibrium 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 verhalten sich die unter einer Sekunde Übergänge in Equilibrium?
Auftritte und Zustandswechsel liegen im Bereich von unter einer Sekunde. Sie hängen an Zustandswechseln statt an einer Scroll-Bibliothek und halten die Texte nie auf. Die Referenz wurde mit 640x472 erfasst.
