Über diese Vorlage
Orbis Hello liefert für eine Lifestyle-Marke einen fertigen ersten Screen und die Zahlen, die ihn hervorgebracht haben. Das Farbschema ist tiefes blau #13142D darunter, weiß #EFF4FF für die Schrift und helles limette #6FFF00 für die Akzente, und die Seite ist in Anton gesetzt. Der Eintrag nennt den Stack, der die Seite erzeugt hat (React und Tailwind CSS), statt ihn zu verschweigen. Nimm es als Briefing für eine Lifestyle-Marke: Der Eintrag Über-uns-Seite muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Übernimm den 640x470-Rahmen und Schrift von 14px bis 68px und Abstände in 20px-Schritten aus diesem Über-uns-Seite-Design, bevor du irgendetwas anderes mitnimmst.
- Gemacht für einen Solo-Gründer, der ein Über-uns-Seite-Design für eine Lifestyle-Marke ausliefert und kein Designsystem im Rücken hat.
- Wer ein Modell mit einem Über-uns-Seite-Briefing versorgt, startet mit dem Prompt über 5.232 Zeichen.
Was enthalten ist
- Abstände als Werte genannt. Im Layout bleibt nichts dem Gefühl überlassen: Das Briefing nennt Schrift von 14px bis 68px und Abstände in 20px-Schritten, und der Build muss genau diese Werte treffen. Ein Nachbau, der diese Zahlen trifft, sieht ohne weitere Anpassung aus wie die Referenz.
- Zahlen in Display-Größe. Eine Zeile mit Zahlen sitzt über dem Falz, in Anton am oberen Ende der Skala, mit #6FFF00 nur für die Ziffern, die eine Aussage tragen. Die Ziffern tragen den Akzent in #6FFF00, während alles um sie herum auf der Textfarbe bleibt.
- Werte zum Nachmessen. Die Abstände sind genauso zitiert (Schrift von 14px bis 68px und Abstände in 20px-Schritten) und nicht als Skala, die von selbst weiterwächst.
- Zahlen statt einer Behauptung. Die Statistik ist als Typografie behandelt: Ziffern in der Display-Größe, Labels auf der kleinsten Stufe des Briefings, alles in #6FFF00 oder auf der Textfarbe und nicht auf einer farbigen Karte.
Bewegung & Interaktion
Zeiger nur, wo sie helfen
Die Rückmeldung beschränkt sich auf Hover-Zustände auf Buttons und Links statt auf jeder Karte, der Rest des Layouts ist eine feste Komposition. Druck-Zustände sind ebenso festgelegt wie Hover, ein Tippen bestätigt also genauso wie ein Klick. Ein paar verlässliche Zustände schlagen eine lange Liste von Effekten.
Bewegung, die nicht stört
Diese Seite kommt als stehende Komposition in 640x470, die Hierarchie muss also ohne Bewegung funktionieren, und sie tut es. Nur die Elemente bewegen sich, die auf den Zeiger reagieren.
Warum das Briefing für Lifestyle trägt
Die meisten Lifestyle-Seiten scheitern am Hinzufügen: mehr Sektionen, mehr Verläufe, mehr Behauptungen. Orbis Hello macht es umgekehrt. Die Komposition bleibt auf tiefes blau #13142D und nutzt helles limette #6FFF00 nur für Aktionen, und das reicht, um bewusst zu wirken. Es gibt einem Leser im Bereich Lifestyle den kürzesten ehrlichen Weg zum Angebot.
Was sich in Orbis Hello bewegt
Wenn eine Seite unruhig wirkt, sind es meist zu viele Auftritte. Diese hält die Liste kurz: Hover- und Druckzustände. Nichts in diesem Eintrag Über-uns-Seite animiert um seiner selbst willen.
Wie der Eintrag Über-uns-Seite umbricht
Wenn deine Breakpoints gewählt wurden, damit etwas passt, statt das Layout zu ändern, lies diesen Eintrag. die Skala ist fließend statt gestuft statt einer Liste ausgeblendeter Elemente. Die Reihenfolge ist das Letzte, was sich ändert.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Orbis Hello kopiere?
Der vollständige Prompt hinter der Seite: Layout, Palette, Typografie und Übergänge, dazu eine Übergabe in Studio mit einem Klick, bei der das Briefing schon vorbereitet ist. Der Prompt selbst steht hier nicht; kopiere ihn oder schick ihn an Studio. Die Referenz wurde mit 640x470 erfasst.
Kann ich Über-uns-Seite von Orbis Hello in einem anderen Stack nachbauen?
Orbis Hello 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 viele Farben verwendet Orbis Hello?
Die Akzentfarbe ist helles limette #6FFF00 und erscheint auf den Elementen, die du drücken sollst. Alles andere bleibt auf tiefes blau #13142D, damit die Betonung nie mit dem Layout konkurriert.
