SaaS & KI: das Produkt zeigt sich selbst

Tech-Startup / SaaS / KI-Produkt / Software-Tool

Das echte Produkt-Interface ist der Hero, nicht ein Stockbild oder ein Glow-Verlauf. Eine Groteskfamilie in wenigen Gewichten, Mono nur für Labels und Daten, Graustufen plus genau ein Markenton. Bewegung ist schnell wie in der App selbst (100–200 ms), Inhalte gliedern sich in Funktions-Kapitel, Preise und eine große Sitemap im Footer.

Bauplan tokens.css Alle Techniken

Schrift

Das Produkt zeigt sich selbst

Das echte Produkt-Interface ist der Hero, nicht ein Stockbild oder ein Glow-Verlauf.

Tech-Startup

Headline: Geist
Text: Geist
Akzent: Geist Mono

Farbe

#08090A
#161718
#F7F8F8
#8A8F98
#242728
#7170FF

Bewegung

cubic-bezier(0.2, 0, 0.38, 0.9)

Stil: Animationsstil „Tech präzise“ (Produkt-UI)
Dauer: 100–160 (Hover, Farbe, Buttons), 180–200 (Menüs, Tabs), 300–400 (Drawer/Modal), 500–600 (Einblendung von Sektionen)

Aufbau der Seite

SignaturCommand-Palette (⌘K) und KI-Suche im Header Produkt-UI-Hero mit Perspektiv-Tilt (Screenshot richtet sich beim Scrollen auf)

HeroProdukt-UI-Hero mit Perspektiv-Tilt (Screenshot richtet sich beim Scrollen auf)oderPrompt-Hero mit rotierenden Beispiel-Prompts

Funktionen in Kapiteln (Workflow von Anfang bis Ende)Klebende Produkt-Unternavigation mit Handlung · Unterseiten Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt) · Sticky-Titel und Karten Gleitender Indikator / Segment-Schalter mit Pille Tabs und Segmente mit Pfeiltasten · Automatisch
Feature-Übersicht (Bento nur mit echten, ungleich gewichteten Funktionen und echten UI-Ausschnitten, sonst eine Liste; Spotlight-Glow nur in der Dark-Variante und nur im Bento)Bento-Grid mit lebenden Zellen Karten-Spotlight (Glow folgt der Maus)
Kunden / IntegrationenLogo-Wand / Social-Proof-Band · Kundenlogos als Laufband
Use Cases / KundenstimmenTestimonials neu gedacht · Kundenliste Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Kartenreihe
PreiseVergleichstabelle mit fester Kopfzeile · Paketvergleich Preis-Sektion mit Haltung Gleitender Indikator / Segment-Schalter mit Pille
Was spart ihr? (Rechner mit Live-Ergebnis)Kostenrechner mit Spanne · Badsanierung
FAQ / Sicherheit / DSGVOAkkordeon mit Höhenanimation auf auto · FAQ
Demo / Kontakt (Demo-Anfrage, Enterprise, Support)Kontakt- und Anfrageformular als eigene Sektion
Verträge hier kündigen / widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur bei Verbraucher-Abos)Widerrufs- und Kündigungs-Button · Richtig Seite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Navigation: Mega-Menü mit morphendem gemeinsamem Viewport Command-Palette (⌘K) und KI-Suche im Header Theme- und Sprachumschalter mit View-Transition-Kreis-Reveal · light-dark
Schrift: Rollende Ziffern (Zahlen-Ticker / Odometer)
Hover: Hover-Absicht und Zeitlogik
Mikroanimation: Kopieren-Feedback KI-Streaming-Text und Denk-Indikator mit Shimmer · Archiv-Assistent Toast-Benachrichtigungen im Stapel Skeleton mit Schimmer Toggle-Schalter
Material: Animierter Verlaufsrahmen · border-area
Galerie: Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Kartenreihe
Footer: Mega-Footer mit Sitemap und Utility-Leiste
Buttons: Button-Gruppe expressiv (Toggle, Auswahl, Split) · Split-Button Kopieren-Feedback

OptionalZustandsautomat mit Datenbindung (Rive-Prinzip)

Nicht verwenden

Animierter Mesh-Verlauf der Aurora-Verlauf hinter dem Hero ist das Startup-Klischee schlechthin; keine der drei Referenzen nutzt ihn
Schimmer-/Verlaufs-Text glitzernde 'KI'-Headlines wirken billig; Glanz höchstens als Ladezustand
Smooth Scroll mit Lenis Produktseiten müssen sich wie die App anfühlen, nicht schwimmen
Nachzieh-Cursor (Lerp-Follower)Magnetische Buttons und Elemente Agentur-Gesten ohne Nutzen für Software-Käufer
Interaktives 3D-Objekt im Hero lenkt vom echten Interface ab und kostet Ladezeit
Prozent-Zähler-Preloader (0 bis 100) künstliche Wartezeit vor einem Produkt, das schnell wirken soll
Scramble/Decode-Text (Zeichen entschlüsseln sich) Hacker-Optik passt nur zu Security-/Dev-Nischen, sonst Klischee

Regeln

Hero = ein Satz Nutzen (max. 8 Wörter) + Unterzeile + zwei CTAs (Kostenlos testen, Demo) + echtes Produkt-UI als HTML oder scharfer Screenshot; kein Mockup-Laptop.
Prompt-Feld im Hero nur, wenn dahinter eine echte Funktion läuft; sonst produkt-ui-hero-perspektiv-tilt.
Eine Groteskfamilie in maximal drei Gewichten, Mono ausschließlich für Labels, Code, Zahlen; Headline-Laufweite negativ und mit der Größe zunehmend (-0.012em bis -0.022em).
Funktionen als Kapitel in der Reihenfolge des Arbeitsablaufs (Linear: Intake → Planung → KI → Ausliefern), jedes mit einem echten UI-Ausschnitt.
Inhaltsbreite um 1024–1200px halten; lange Zeilen in Feature-Texten auf 60ch begrenzen.
Ein Markenton, sonst Graustufen. Höchstens ein Material-Effekt pro Ansicht: verlaufs-rahmen nur am Prompt-Feld im Fokus; karten-spotlight-glow nur in der Dark-Variante und nur im Bento; kein Linien- oder Punktraster als Hintergrund.
Preise offen zeigen mit Monat/Jahr-Umschalter (gleitender Indikator, Zahl per Odometer); bei Enterprise 'Kontakt' statt Fantasiepreis.
Footer als vollständige Sitemap inkl. Status, Changelog, Sicherheit/DSGVO, Impressum.
rive-datenbindung nur als Zusatz (optional, Priorität F) am Rechner: Das Ergebnis steht immer auch als Text im HTML.
Pflichtangaben und Recht (Leitfaden 8a): bei Verbraucher-Abos Kündigungs-Button (§ 312k BGB; BGH 16.07.2026: keine Halteangebote auf der Bestätigungsseite) und Widerrufs-Button (§ 356a BGB), Preise inkl. MwSt., B2B-Angebote klar als solche kennzeichnen; Chatbots und KI-Funktionen direkt beim Start kennzeichnen (Art. 50 KI-VO); Sicherheitsseite mit Auftragsverarbeitung, Unterauftragnehmern und Serverstandort; Kundenlogos nur mit Erlaubnis – vom Kunden prüfen lassen.

Bild und Ton

Licht: Keine Fotos; echte UI-Ausschnitte als HTML oder scharfer Screenshot in doppelter Auflösung.
Ausschnitt: Ausschnitt einer echten Ansicht, auf die Funktion gezoomt, mit echten Beispieldaten.
Personen: Nein; höchstens Kundenporträts bei Stimmen.
Formate: 16:10, 4:3, 1:1
Nicht: Keine Mockup-Laptops, keine Stock-Teams am Whiteboard, kein Glow- oder Aurora-Hintergrund, keine 3D-Icons.
Anrede: du
Sätze: Kurz, Verb vorn, Nutzen in höchstens 8 Wörtern. Funktionen als Ergebnis, nicht als Feature-Name.
Haltung: Präzise und ruhig, wie gute Software. Bei Software für KMU und Behörden Sie verwenden, dann durchgehend.
Tonproben: Rechnungen in zwei Minuten verschickt., Verbinde dein Postfach und starte mit einer Vorlage.
Nicht schreiben: „revolutionär“, „KI-gestützt“ als Selbstzweck, „Die All-in-One-Lösung für Ihr Business“, Fantasiepreise.

Hero, Raum und Form

Hero-Raster: Text über 8 Spalten linksbündig oder zentriert, darunter das Produkt-UI über alle 12 Spalten bis 1200px.
Hero-Bild: Echtes Produkt-UI 16:10 als HTML oder scharfer Screenshot, perspektivisch geneigt (produkt-ui-hero-perspektiv-tilt); kein Mockup-Laptop.
Überschrift: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), Geist 560–600, über dem UI.
Handlung: „Kostenlos testen“ (Markenton gefüllt) und „Demo ansehen“ (Kontur), nebeneinander unter der Unterzeile. Prompt-Feld nur als hero_variante mit echter Funktion.
Zusatz: Zeile in Geist Mono über der H1 (Version oder Changelog), Kundenlogos als ruhige Reihe unter dem UI.
Sektionsabstand: clamp(64px, 8vw, 128px)
Dichte: dicht
Raum: App-Rhythmus auf 4 px: Panels 16 bis 24 px Innenabstand, Kapitel 64 bis 128 px. Feature-Texte auf 60ch.
Spalten: 12
Maximale Breite: 1200px
Raster: Inhalt 1024 bis 1200px (Regel). Kapitel in der Reihenfolge des Arbeitsablaufs, jedes mit einem UI-Ausschnitt; Bento nur in der Dark-Variante.
Radius klein: 6px
Radius groß: 10px
Schatten: nur das Produkt-UI im Hero bekommt einen tiefen, farblosen Schatten; sonst keiner
Form: Radien aus der App: 6 px für Knöpfe, Felder und Tags, 10 px für Panels. Kein Linien- oder Punktraster als Hintergrund; verlaufs-rahmen nur am Prompt-Feld im Fokus.

Vorbilder