Über diese Vorlage
Liquid Glass CTA ist eine brauchbare Referenz für dieses Publikum: die Komposition (Call-to-Action-Block), ausgelegt für ein KI- oder SaaS-Produkt, vermessen und bereit zum Nachbauen. Das Farbschema ist schwarz #111111 darunter und gedämpftes indigo #9A83AB für die Akzente, und die Seite ist in Instrument Serif gesetzt. Es kommt als React und Tailwind CSS, damit sich der ganze Call-to-Action-Block ohne Design-Übergabe in ein Projekt heben lässt. Nimm es als Briefing für ein KI- oder SaaS-Produkt: Der Eintrag Call-to-Action-Block muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Übernimm den 640x466-Rahmen und Abstände in 200px-Schritten aus diesem Call-to-Action-Block-Design, bevor du irgendetwas anderes mitnimmst.
- Produktteams, die die Call-to-Action-Copy selbst schreiben und jede Zeile auf die Länge halten müssen, die die Display-Schrift vorgibt.
- Gemacht für Product Manager, die ein Call-to-Action-Block-Design auf einen Sprint und ohne neue Assets begrenzen müssen.
Was enthalten ist
- Größen stehen im Briefing. Das Briefing legt Abstände in 200px-Schritten fest und überlässt den Rest der Anordnung, das Gegenteil einer Skala, die von selbst wächst. Die Rahmenproportionen sind zusammen mit den Größen festgehalten, damit ein Nachbau auch das Seitenverhältnis trifft.
- Belege oberhalb des Falzes. Die Zahlenzeile ist der Beleg: drei oder vier Ziffern in einer Zeile, kleine Labels darunter, in derselben Instrument Serif wie die Oberfläche, damit sie als Daten und nicht als Dekoration gelesen wird. Die Ziffern tragen den Akzent in #9A83AB, während alles um sie herum auf der Textfarbe bleibt.
- Das Briefing nennt die Stufen. Die Abstände sind genauso zitiert (Abstände in 200px-Schritten) und nicht als Skala, die von selbst weiterwächst.
- Zahlen statt einer Behauptung. Die Ziffern sind als Schrift gesetzt und nicht in einer Karte: Instrument Serif in der Display-Größe mit Labels eine Stufe darunter.
Bewegung & Interaktion
Bewegung, die nicht stört
Diese Seite kommt als stehende Komposition in 640x466, die Hierarchie muss also ohne Bewegung funktionieren, und sie tut es. Nur die Elemente bewegen sich, die auf den Zeiger reagieren. Beschränke Bewegung auf die Bedienelemente.
Fast keine Bewegung
Das Briefing lässt Animation weg und überlässt die Seite dem 640x466-Layout, nur Hover- und Druckzustände ändern sich.
Liquid Glass CTA als Spezifikation lesen
Fast jede Entscheidung hier ist ein prüfbarer Wert: Abstände in 200px-Schritten. Das Medium ist ein Standbild in 640x466. Die Schrift bleibt in Instrument Serif, ein Ersatz muss also dieselben Proportionen behalten. Nichts in diesem Eintrag Call-to-Action-Block hängt an einer Voreinstellung.
Was du in Liquid Glass CTA zuerst änderst
Ein Template verlangt, dass du sein Layout akzeptierst; diese Referenz verlangt, dass du es behältst und alles darin änderst. Der Unterschied: Abstände in 200px-Schritten bleiben fest, während das Thema wandert. Dein Akzent muss denselben Kontrasttest bestehen wie der der Referenz.
Wie der Eintrag Call-to-Action-Block umbricht
Wenn der Text lang ist, bricht zuerst das schmale Layout. Hier greift die Klemmung: eine Größe zwischen 50px und 200px fängt die Änderung auf, und die Skala ist fließend statt gestuft. Die Skala folgt dem Viewport; die Abfolge bleibt.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Liquid Glass CTA kopiere?
Das erfasste Briefing umfasst 10.077 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.
Ist das Briefing zu Liquid Glass CTA dasselbe wie der Prompt, den ich selbst schreiben würde?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 10.077 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Liquid Glass CTA 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.
