# Bauplan: SaaS & KI: das Produkt zeigt sich selbst

Rezept `saas-produkt-praezise` · Tech-Startup / SaaS / KI-Produkt / Software-Tool · Stimmung: präzise, technisch, ruhig, kompetent · Stand 02.11.2026

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.

## Dateien

- `tokens.css` in diesem Ordner: Schriften, Farben, Kurven, Dauern, Button-Grundwerte. Zuerst einbinden, dann nur diese Variablen verwenden.
- Rezept im Detail: https://cecodesign.de/lab/fundus/rezepte.json (id `saas-produkt-praezise`) und https://cecodesign.de/lab/fundus/rezepte/saas-produkt-praezise/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `geist` · Text: `geist` · Akzent: `geist-mono`
- Größen: Stufen wie Linear: 1.0625 / 1.25 / 1.5 / 2 / 2.5 / 3 / 3.5 / 4 / 4.5rem. h1 clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), wght 560–600, Laufweite -0.022em, Zeilenhöhe 1.0; h2 clamp(2rem, 1.4rem + 2vw, 3rem), -0.018em, 1.1; Fließtext 1rem–1.0625rem, wght 400, -0.006em, Zeilenhöhe 1.6; Geist Mono 0.75–0.8125rem für Labels, Code, Kennzahlen. Gewichte maximal 400 / 500 / 600 (Linear arbeitet mit 510 / 590).
- Techniken: [Eine Familie, wenige Gewichte (Hierarchie über Größe)](https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/demo) `eine-familie-wenig-gewichte`, [Enge Laufweite und Zeilenabstand bei riesigen Headlines](https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo) `headline-laufweite-zeilenabstand`, [Mono als Label- und Metaschrift (kleine Versalien)](https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/demo) `mono-labels-versal`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`

## Farbe

Graustufen tragen alles, ein einziger Markenton für Primär-Button, Fokus und aktive Zustände. Dark Mode ist bei Dev-Tools Standard (Linear, Raycast), für KMU-Software eher heller Grund wie n8n (#fafafa) mit dunkler Variante. Statusfarben nur in UI-Ausschnitten, nie als Deko-Verlauf.

- `--farbe-grund` #08090A (Grund dunkel (Linear bg-primary) bzw. #FAFAFA hell (n8n grey-50))
- `--farbe-flaeche` #161718 (Panel/Karte (Linear))
- `--farbe-text` #F7F8F8 (Text auf dunkel)
- `--farbe-text-2` #8A8F98 (Sekundärtext/Meta (Linear tertiary))
- `--farbe-linie` #242728 (Linien/Ränder (Raycast border))
- `--farbe-marke` #7170FF (Markenton für Aktion/Fokus (Linear accent; im Template austauschbar))

## Bewegung

- Animationsstil: [Animationsstil „Tech präzise“ (Produkt-UI)](https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/demo) `token-tech-praezise`
- Kurve: cubic-bezier(0.2, 0, 0.38, 0.9) (token-tech-praezise, productive); Eintritt cubic-bezier(0, 0, 0.38, 0.9), Austritt cubic-bezier(0.2, 0, 1, 0.9); Drawer/Modal expressive cubic-bezier(0.4, 0.14, 0.3, 1)
- Dauer: 100–160 (Hover, Farbe, Buttons), 180–200 (Menüs, Tabs), 300–400 (Drawer/Modal), 500–600 (Einblendung von Sektionen)
- Regel: UI reagiert so schnell wie die App: die productive-Kurve des Stils für fast alles, Drawer und Sheets mit der expressive-Kurve. Einblendungen nur Deckkraft + 4–8 px y, ohne Federn. Überschwinger höchstens für einen einzelnen Bestätigungs-Moment. Alle Animationen hinter prefers-reduced-motion.

## Raum, Raster, Form (als Variablen in tokens.css)

- Basis in px: 4
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 20, 24, 32, 48, 64, 96
- Sektionsabstand: clamp(64px, 8vw, 128px)
- Dichte: dicht
- Hinweis: App-Rhythmus auf 4 px: Panels 16 bis 24 px Innenabstand, Kapitel 64 bis 128 px. Feature-Texte auf 60ch.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 32px)
- Spaltenabstand: clamp(16px, 2vw, 24px)
- 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
- Pillenform für Buttons: False
- Linie: 1px #242728 auf Dunkel; auf Hell dieselbe Linie aus Graustufen
- 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.

## Bildsprache

- 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.

## Ton der Texte (Beispiele nur als Tonprobe, nicht übernehmen)

- 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: „revolutionär“, „KI-gestützt“ als Selbstzweck, „Die All-in-One-Lösung für Ihr Business“, Fantasiepreise.

## Hero

Ein Satz Nutzen (höchstens 8 Wörter), Unterzeile, zwei CTAs (Kostenlos testen, Demo) und das echte Produkt-UI als HTML oder scharfer Screenshot (produkt-ui-hero-perspektiv-tilt), kein Mockup-Laptop. prompt-hero-eingabefeld nur als Variante, wenn dahinter eine echte Funktion des Produkts läuft; KI-Funktionen direkt am Feld kennzeichnen (Art. 50 KI-VO).

- Raster: Text über 8 Spalten linksbündig oder zentriert, darunter das Produkt-UI über alle 12 Spalten bis 1200px.
- 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.

- Hero: [Produkt-UI-Hero mit Perspektiv-Tilt (Screenshot richtet sich beim Scrollen auf)](https://cecodesign.de/lab/fundus/hero-layouts/produkt-ui-hero-perspektiv-tilt/demo) `produkt-ui-hero-perspektiv-tilt`
- Nur unter der Bedingung oben: [Prompt-Hero mit rotierenden Beispiel-Prompts](https://cecodesign.de/lab/fundus/hero-layouts/prompt-hero-eingabefeld/demo) `prompt-hero-eingabefeld`

## Sektionen in dieser Reihenfolge

1. **Funktionen in Kapiteln (Workflow von Anfang bis Ende)**: [Klebende Produkt-Unternavigation mit Handlung](https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/demo?v=unterseiten) `lokale-produktnavigation` · Variante „Unterseiten“, [Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt)](https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=titel) `split-screen-sticky-seiten` · Variante „Sticky-Titel und Karten“, [Gleitender Indikator / Segment-Schalter mit Pille](https://cecodesign.de/lab/fundus/navigation/gleitender-indikator/demo) `gleitender-indikator`, [Tabs und Segmente mit Pfeiltasten](https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto) `tabs-pfeiltasten-focusgroup` · Variante „Automatisch“
2. **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](https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/demo) `bento-grid-interaktiv`, [Karten-Spotlight (Glow folgt der Maus)](https://cecodesign.de/lab/fundus/hover/karten-spotlight-glow/demo) `karten-spotlight-glow`
3. **Kunden / Integrationen**: [Logo-Wand / Social-Proof-Band](https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=laufband) `logo-wand-social-proof` · Variante „Kundenlogos als Laufband“
4. **Use Cases / Kundenstimmen**: [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=liste) `testimonials-neu-gedacht` · Variante „Kundenliste mit Hover-Zitat“, [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek) `css-native-karussell` · Variante „Kartenreihe mit Peek“
5. **Preise**: [Vergleichstabelle mit fester Kopfzeile](https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete) `vergleichstabelle-sticky` · Variante „Paketvergleich mit Abrechnungs-Umschalter“, [Preis-Sektion mit Haltung](https://cecodesign.de/lab/fundus/hero-layouts/preis-section-editorial/demo) `preis-section-editorial`, [Gleitender Indikator / Segment-Schalter mit Pille](https://cecodesign.de/lab/fundus/navigation/gleitender-indikator/demo) `gleitender-indikator`
6. **Was spart ihr? (Rechner mit Live-Ergebnis)**: [Kostenrechner mit Spanne](https://cecodesign.de/lab/fundus/sektionen/kostenrechner-konfigurator/demo?v=bad) `kostenrechner-konfigurator` · Variante „Badsanierung“
7. **FAQ / Sicherheit / DSGVO**: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq) `akkordeon-hoehe-auto` · Variante „FAQ mit Suche und Sprunglinks“
8. **Demo / Kontakt (Demo-Anfrage, Enterprise, Support)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`
9. **Verträge hier kündigen / widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur bei Verbraucher-Abos)**: [Widerrufs- und Kündigungs-Button](https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig) `widerruf-und-kuendigung-schaltflaeche` · Variante „Richtig“, [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg) `barrierefreiheit-seite` · Variante „Informationen nach BFSG“

## Signatur (Pflicht)

- [Command-Palette (⌘K) und KI-Suche im Header](https://cecodesign.de/lab/fundus/navigation/command-palette-und-ki-suche/demo) `command-palette-und-ki-suche`
- [Produkt-UI-Hero mit Perspektiv-Tilt (Screenshot richtet sich beim Scrollen auf)](https://cecodesign.de/lab/fundus/hero-layouts/produkt-ui-hero-perspektiv-tilt/demo) `produkt-ui-hero-perspektiv-tilt`

## Buttons

- Haupthandlung: [Button-Gruppe expressiv (Toggle, Auswahl, Split)](https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/demo?v=split) `button-gruppe-expressiv` · Variante „Split-Button mit Menü“
- Nebenhandlung: [Kopieren-Feedback](https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/demo) `kopieren-feedback`

## Weitere Bausteine

- Navigation: [Mega-Menü mit morphendem gemeinsamem Viewport](https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/demo) `mega-menue-morphing-viewport`, [Command-Palette (⌘K) und KI-Suche im Header](https://cecodesign.de/lab/fundus/navigation/command-palette-und-ki-suche/demo) `command-palette-und-ki-suche`, [Theme- und Sprachumschalter mit View-Transition-Kreis-Reveal](https://cecodesign.de/lab/fundus/navigation/theme-umschalter-view-transition/demo?v=light-dark) `theme-umschalter-view-transition` · Variante „light-dark() auch für Bilder“
- Schrift: [Rollende Ziffern (Zahlen-Ticker / Odometer)](https://cecodesign.de/lab/fundus/schrift-animationen/zahlen-odometer/demo) `zahlen-odometer`
- Hover: [Hover-Absicht und Zeitlogik](https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/demo) `hover-absicht-timing`
- Mikroanimation: [Kopieren-Feedback](https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/demo) `kopieren-feedback`, [KI-Streaming-Text und Denk-Indikator mit Shimmer](https://cecodesign.de/lab/fundus/mikroanimationen/ki-streaming-text-denkindikator/demo?v=archiv) `ki-streaming-text-denkindikator` · Variante „Archiv-Assistent eines Studios“, [Toast-Benachrichtigungen im Stapel](https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/demo) `toast-stapel`, [Skeleton mit Schimmer](https://cecodesign.de/lab/fundus/mikroanimationen/skeleton-shimmer/demo) `skeleton-shimmer`, [Toggle-Schalter](https://cecodesign.de/lab/fundus/mikroanimationen/toggle-switch/demo) `toggle-switch`
- Material: [Animierter Verlaufsrahmen](https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/demo?v=saas) `verlaufs-rahmen` · Variante „background-clip: border-area (Glas-Preiskarte)“
- Galerie: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek) `css-native-karussell` · Variante „Kartenreihe mit Peek“
- Footer: [Mega-Footer mit Sitemap und Utility-Leiste](https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/demo) `mega-footer-sitemap`

## Grundausstattung (jede Seite)

- [Native Seitenübergänge zwischen echten Seiten (Cross-document View Transitions)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo) `vt-cross-document-mpa`
- [Native CSS-Scroll-Reveals mit view()](https://cecodesign.de/lab/fundus/scroll/css-view-reveal-nativ/demo) `css-view-reveal-nativ`
- [Unterstreichungs-Varianten](https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo) `unterstreichung-varianten`
- [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
- [Gestaltetes Cookie-/Consent-Banner (DSGVO-konform)](https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/demo) `consent-banner-gestaltet`
- [Fokus-Stil als Gestaltungssystem](https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo) `fokus-stil-system`
- [Sprunglinks und Landmarken](https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/demo) `sprunglinks-landmarken`
- [Schalter „Bewegung reduzieren“ mit Pause-Knöpfen](https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/demo) `bewegung-pausieren-schalter`
- [Fehlerseite und Leerzustände](https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo) `fehlerseite-leerzustand`
- [Natives Modal mit <dialog>](https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/demo) `dialog-modal-nativ`
- [Zoom- und textabstandfestes Layout](https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/demo) `zoom-und-textabstand-robust`
- [Kontrastmodus und contrast-color()](https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/demo) `kontrastmodus-forced-colors`
- [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo) `firmendaten-strukturiert`
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`

## Optional (nur als Zusatz)

- [Zustandsautomat mit Datenbindung (Rive-Prinzip)](https://cecodesign.de/lab/fundus/mikroanimationen/rive-datenbindung/demo) `rive-datenbindung`

## Nicht verwenden

- mesh-gradient-shader – der Aurora-Verlauf hinter dem Hero ist das Startup-Klischee schlechthin; keine der drei Referenzen nutzt ihn
- shimmer-gradient-text – glitzernde 'KI'-Headlines wirken billig; Glanz höchstens als Ladezustand
- smooth-scroll-lenis – Produktseiten müssen sich wie die App anfühlen, nicht schwimmen
- cursor-follower-lerp / magnetische-elemente – Agentur-Gesten ohne Nutzen für Software-Käufer
- interaktives-3d-hero – lenkt vom echten Interface ab und kostet Ladezeit
- prozent-zaehler – künstliche Wartezeit vor einem Produkt, das schnell wirken soll
- scramble-decode – 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.

## Vor der Abgabe

Checkliste in https://cecodesign.de/lab/fundus/leitfaden.txt, Abschnitt 12. Rechtliches immer „vom Kunden prüfen lassen“.