Über diese Vorlage
Palomar Labs hält den Entscheidungsweg fest: Hinter dem Eintrag Landingpage stehen 7.574 Zeichen Briefing. Farbe bleibt auf weiß #F5F3EF darunter und tiefes grün #2D3A2E für die Schrift begrenzt, gesetzt in Montserrat. Geliefert wird React und Tailwind CSS, erfasst bei 1920x1422, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung bleibt auf Übergänge von 240ms, cubic-bezier(0.16, 1, 0.3, 1) und eine Videospur in Schleife beschränkt. Lass es beim Schreiben offen: Die 7.574 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Produktmarketer, die brauchen, dass die Komposition (Landingpage) auch mit 6,7s Video in Schleife hinter dem Text lesbar bleibt.
- Gemacht für Content-Leads, die ein Landingpage-Design neu betexten, dessen Headline so lang bleiben muss wie die von Palomar Labs.
- Gemacht für Frontend-Entwickler, die den 240ms-Takt und die cubic-bezier(0.16, 1, 0.3, 1)-Kurve festgelegt haben wollen, bevor sie ein Keyframe schreiben.
Was enthalten ist
- Obere Zeile: Wortmarke, Links, eine Aktion. Die Wortmarke hält die linke Kante, rechts davon laufen die Links, alles in Montserrat gesetzt, damit die Leiste zur Seite darunter gehört und nicht zu einem eigenen System. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1920x1422, damit die Medien darunter bis an den Rand durchlaufen. Bleib bei vier oder fünf Links; die Zeile ist dafür bemessen.
- Am Viewport gemessen. Schrift und Abstände stammen hier aus einer einzigen Liste: Abstände in 20px-Schritten, 240ms Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1). Ein Nachbau, der diese Zahlen trifft, sieht ohne weitere Anpassung aus wie die Referenz.
- Zurückhaltende Navigation. Die Leiste überlagert Landingpage, statt Raum darunter zu belegen, damit die Komposition die volle Höhe des ersten Bildschirms behält. Übernimm dieses Muster, wenn die Navigation einen lauten ersten Screen überstehen soll.
- Werte zum Nachmessen. Die Abstände sind genauso zitiert (Abstände in 20px-Schritten, 240ms Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1)) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Interaktion sitzt auf den Bedienelementen
Die Seite reagiert nur dort, wo man handeln kann: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Nichts auf der Seite öffnet ein Modal oder kapert das Scrollen; die Interaktionen bleiben am Element. Ein paar verlässliche Zustände schlagen eine lange Liste von Effekten.
Eine Dauer für die Bedienelemente
Hover-, Druck- und Fokuszustände lösen sich alle in 240ms auf, deshalb wirkt die Oberfläche unmittelbar. Weil die Werte kurz sind, fällt ein Nachbau mit langsameren Zeiten sofort auf.
Die Zahlen hinter dem Eintrag Landingpage
Jede Beziehung auf dieser Seite ist ein Wert, den du prüfen kannst: Abstände in 20px-Schritten, 240ms Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1). Genau das macht Palomar Labs nachbaubar statt nur reproduzierbar. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Die Zeitwerte hinter dem Eintrag Landingpage
Eine Preset-Bibliothek würde mehr Bewegung liefern als diese Seite. Das Briefing verlangt weniger: Übergänge von 240ms, eine Medienschleife von 6,7s und Hover- und Druckzustände, und nichts Dekoratives obendrauf. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Warum diese Komposition für SaaS trägt
Palomar Labs funktioniert, weil die Hierarchie entschieden und nicht dekoriert ist. Das Briefing hat die Zahlen schon festgelegt: Abstände in 20px-Schritten, 240ms Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1), damit neuer Text in den Rahmen fällt, statt ihn wieder aufzureißen. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Palomar Labs kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1920x1422, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Tailwind CSS, um Palomar Labs nachzubauen?
Palomar Labs 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 Palomar Labs 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 1920x1422 erfasst.
