Solv Gerahmte Fintech-Landingpage – Nachbau-Skill

1. Design-Philosophie

Baue die Seite als poliertes Produkt-Demo, platziert in einer sanft abgerundeten „browserlosen Leinwand“, nicht als randlose Unternehmenswebsite. Der Kontrast entsteht durch drei zusammenwirkende Systeme:

Redaktionelle Zurückhaltung: Große groteske Überschriften, kurze Texte, großzügiger Weißraum und wenige Farben.
Produkt-Haptik: Pill-förmige Steuerelemente, eingebettete Mini-Interfaces, Live-Zahlen, Schieberegler, Akkordeons und Dashboard-Fragmente.
Sanfte filmische Bewegung: Inhalte hüpfen oder fliegen nicht. Sie lösen sich aus Unschärfe, geringer Opazität und bescheidener vertikaler Verschiebung mit einer „ease-out“-Kurve auf und bleiben dann ruhig.

Die Seite sollte sich im Ruhezustand ruhig und während der Interaktion reaktionsschnell anfühlen. Bewegung ist ein Hierarchiewerkzeug, keine Dekoration.

2. Direkt beobachtet vs. abgeleitet

Direkt beobachtet

Ein 22,38-Sekunden-Desktop-Capture mit 60 fps bei 2272×1440.
Ein fixierter fotografischer Waldhintergrund, der eine abgerundete Seitenhülle umgibt.
Weiße, olivfarbene, säurelime, hellblaue, helllavendelfarbene, graue und fotografische Oberflächen.
Hero-Lade-Choreografie mit Unschärfe + Einblendung + vertikaler Verschiebung.
Sanftes vertikales Scrollen mit einem schmalen, limefarbenen Scrollbalken am rechten Rand der Seitenhülle.
Abschnittseinblendungen, die Unschärfe, Opazität und kurze Aufwärtsbewegung nutzen.
Eine horizontale Logo-Leiste.
Ein Live-Rechner mit einem quadratischen Bereichs-Daumen und Echtzeit-Finanzierungsschätzung.
Ein Akkordeon, das die offene Antwort mit animierter Höhe und Plus/Minus-Symbolen austauscht.
Ein Testimonial-Bild mit Zitattext und Seitennummerierungs-Punkten.
Drei Artikelkarten, ein zentrierter CTA-Bereich und ein dunkler, eingebetteter Footer.
Kein offensichtliches Scroll-Jacking oder eine fixierte horizontale Sequenz.

Ableitungen mit hoher Sicherheit

Framer Motion, GSAP ScrollTrigger oder ein ähnliches intersektionsgesteuertes Einblendsystem.
Eine Lenis-ähnliche Smooth-Scrolling-Ebene oder sehr sanftes Trackpad/Browser-Scrollen.
Ein duplizierter CSS-Marque für die Logo-Leiste.
Eine einzige moderne groteske Schriftfamilie; wahrscheinlich im Bereich Suisse/Neue Haas/Aeonik. Die genaue Schriftartidentität ist allein aus dem Capture nicht ermittelbar.
Tablet-/Mobilverhalten wird nicht gezeigt. Die folgenden responsiven Regeln sind Implementierungsanforderungen, die darauf abzielen, die Desktop-Qualität zu bewahren.

3. Visuelles System

3.1 Farb-Token

Diese Werte sind aus dem Capture entnommen oder visuell rekonstruiert. Verwende sie als kanonische Implementierungspalette.

:root {
  /* Kern */
  --ink: #273000;          /* gesampeltes dunkles Oliv; FAQ/Footer/Text */
  --ink-strong: #1f2700;   /* tieferes Oliv für kontraststarke Steuerelemente */
  --acid: #ddff5a;         /* gesampelter Rechner/Akzent-Lime */
  --acid-soft: #efffb0;    /* CTA-Glühen / subtil hervorgehobene Felder */
  --paper: #ffffff;
  --paper-warm: #fbfbf7;

  /* Unterstützende Karten */
  --sky: #cfe7e9;          /* gesampeltes Hellblau */
  --lavender: #d9def8;     /* gesampeltes Helllavendel */
  --mist: #efeee9;         /* Chips, Logo-Statement-Pill */
  --line: rgba(39, 48, 0, 0.14);
  --line-on-dark: rgba(221, 255, 90, 0.16);

  /* Text */
  --text-primary: #273000;
  --text-secondary: #74756d;
  --text-on-dark: #ddff5a;
  --white-muted: rgba(255, 255, 255, 0.72);

  /* Hero-Glas */
  --glass-dark: rgba(48, 43, 39, 0.48);
  --glass-light: rgba(255, 255, 255, 0.82);
  --hero-scrim: linear-gradient(
    180deg,
    rgba(20, 24, 10, 0) 42%,
    rgba(20, 24, 10, 0.24) 68%,
    rgba(20, 24, 10, 0.72) 100%
  );
}

Farbnutzungsregeln

Verwende --paper für etwa 65–75 % der Seitenoberfläche.
Verwende --ink für einen großen Abschnitt und den Footer, nicht für jede Karte.
Reserviere --acid für primäre Call-to-Actions, den Rechner, FAQ-Typografie, den benutzerdefinierten Scrollbalken und kleine Status-Chips.
Verwende nicht mehr als eine blasse unterstützende Farbe in einer kleinen Komponente. Eine Karte ist weiß, blau, lavendel, lime, oliv oder fotografisch – kein mehrfarbiger Farbverlauf.
Vermeide reines Schwarz für Text und Steuerelemente. Das Oliv-Schwarz ist ein wichtiger Teil des ursprünglichen Charakters.
Das Waldhintergrundbild hinter der Hülle sollte gedämpft genug bleiben, dass die Seitenhülle immer dominant ist. Füge bei Bedarf einen subtilen Cyan/Creme-Waschgang hinzu.

3.2 Typografie

Schriftart

Das Capture verwendet eine neutrale Neo-Grotesk mit kompaktem Sperren und weicher Geometrie. Verwende diesen Stack:

font-family: "Suisse Intl", "Neue Haas Grotesk Text", "Inter", "Helvetica Neue", Arial, sans-serif;

Verwende für eine Open-Source-Implementierung Inter Tight für Auszeichnungen und Inter für Fließtext. Führe keine serifenbetonte oder nichtproportionale Sekundärfamilie ein.

Gewichtssystem

Auszeichnung: 400–500. Die große Schrift ist nicht fett.
Abschnittsüberschrift: 400–500.
Fließtext: 400.
Hervorhebung im Fließtext: 600.
Buttons/Navigation: 500–600.
Große numerische Anzeige: 500.

Desktop-Schriftgrößensystem

:root {
  --fs-hero: clamp(3.75rem, 4.35vw, 5.15rem);       /* ~60–82px */
  --fs-section-xl: clamp(3rem, 3.4vw, 4.25rem);    /* ~48–68px */
  --fs-section: clamp(2.5rem, 2.8vw, 3.65rem);     /* ~40–58px */
  --fs-card-title: clamp(2rem, 2.2vw, 3rem);       /* ~32–48px */
  --fs-quote: clamp(1.75rem, 2vw, 2.75rem);        /* ~28–44px */
  --fs-body-lg: 1.25rem;                           /* 20px */
  --fs-body: 1rem;                                 /* 16px */
  --fs-small: 0.875rem;                            /* 14px */
}

Zeilenhöhe und Buchstabenabstand

Hero/große Überschriften: line-height: 0.96–1.02, letter-spacing: -0.045em.
Abschnittsüberschriften: line-height: 0.98–1.05, letter-spacing: -0.04em.
Kartentitel: line-height: 1.0–1.08, letter-spacing: -0.035em.
Fließtext: line-height: 1.42–1.55, letter-spacing: -0.01em.
Buttons/Navigation: line-height: 1, letter-spacing: -0.01em.
Große Währungswerte: letter-spacing: -0.055em; verwende Tabellenziffern.

.numeric {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.055em;
}

Zeilenlängenregeln

Hero-Fließtext: 42–54 Zeichen.
Abschnitts-Fließtext: 48–64 Zeichen.
FAQ-Antwort: 62–76 Zeichen.
Lasse keine Auszeichnungsüberschrift mehr als 14–18 Wörter oder mehr als drei Zeilen auf Mobilgeräten haben.

3.3 Abstände und Rasterrhythmus

Verwende eine 4px-Basis, wobei die meisten sichtbaren Abstände Vielfache von 8 sind.

:root {
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
}

Desktop-Hüllenmaße

Aus dem 2272×1440-Capture:

Seitenhüllenbreite: ungefähr 90vw.
Horizontaler Außenabstand: ungefähr 5vw.
Sichtbarer oberer/unterer Außenabstand: ungefähr 3–3,5vh.
Hülleneckenradius: 28–32px.
Interner Abschnittsabstand: 56–64px links/rechts.
Großer vertikaler Abschnittsabstand: 96–144px.
Abstand zwischen Hauptkarten: 20–28px.
Dünne Trennlinien: 1px bei 12–16 % Deckkraft.

Raster

Verwende ein 12-Spalten-Raster innerhalb der Hülle.

.section-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 1.4vw, 1.75rem);
}

Kompositionsverhältnisse:

Hero-Inhalt: linke 6–7 Spalten; schwebende Dashboard-Karte: rechte 3 Spalten.
Produktübersicht: Kopie 5 Spalten; visuelle Module 6–7 Spalten.
Feature-Trio: ungefähr 3 / 3 / 4,5 Spalten, wobei die fotografische Karte am breitesten ist.
Rechner: 5,5 / 5,5 Spalten mit einem großzügigen mittleren Abstand.
FAQ: 5 / 7 Spalten.
Artikel: gleiche 4-Spalten-Karten.
Footer: Markenblock 4 Spalten; Navigation/Kontakt/Standort/Sprachen füllen den Rest.

3.4 Radius-Konventionen

:root {
  --radius-shell: 2rem;      /* 32px */
  --radius-section: 1.5rem;  /* 24px */
  --radius-card: 1.25rem;    /* 20px */
  --radius-ui: 1rem;         /* 16px */
  --radius-chip: 999px;
}

Regeln:

Äußere Seitenhülle: 28–32px.
Große Medien- und Abschnittskarten: 20–24px.
Mini-Dashboard-Karten: 14–18px.
Buttons, Tags, segmentierte Navigation und Statement-Chips: volle Pillenform.
Vermeide das Mischen vieler willkürlicher Radien. Verwende nur diese fünf Werte.

3.5 Schatten und Höhe

Das Original verlässt sich mehr auf Kontrast und Unschärfe als auf offensichtliche Schatten.

:root {
  --shadow-shell: 0 24px 70px rgba(26, 34, 12, 0.18);
  --shadow-float: 0 18px 50px rgba(25, 31, 8, 0.18);
  --shadow-ui: 0 8px 24px rgba(25, 31, 8, 0.10);
}

Die Seitenhülle erhält einen großen, weichen Schatten.
Das schwebende Hero-Dashboard erhält einen mittelweichen Schatten.
Die meisten Feature-Karten haben keinen Schatten; verwende Rand oder Farbtrennung.
Verwende niemals scharfe schwarze Schatten oder mehrere gestapelte Schatten.

4. Layout-Architektur

4.1 Globale Leinwand

Der Waldhintergrund bleibt fixiert, während die abgerundete Inhaltshülle scrollt.

html {
  background: #b9d9d8;
}

body {
  margin: 0;
  color: var(--text-primary);
  background:
    linear-gradient(90deg, rgba(174, 219, 224, 0.34), rgba(250, 249, 218, 0.34)),
    url('/images/forest-background.avif') center / cover fixed;
}

.page-shell {
  width: min(90vw, 132rem);
  margin: 3.25vh auto;
  border-radius: var(--radius-shell);
  overflow: clip;
  background: var(--paper);
  box-shadow: var(--shadow-shell);
  position: relative;
}

Setze keinen schweren Rand um die Hülle. Der Kontrast zum Hintergrund ist ausreichend.

4.2 Abschnittsreihenfolge

Hero / Navigation
Kunden-Statement-Chip + sich wiederholende Logo-Leiste
Produktübersicht – Überschrift/Kopie links, zwei Produktgeschichten-Karten rechts
Wachstumskapital-Feature-Trio
Transparenter Gebührenrechner
FAQ-Akkordeon
Testimonial-Medien/Karussell
Neueste Artikel
Finanzierungsexperte CTA
Dunkler eingebetteter Footer

4.3 Hero-Komposition

Höhe: min(92svh, 82rem) auf Desktop; mindestens 760px.
Randloses Bild innerhalb der Hülle.
Die obere Navigation schwebt über dem Bild.
Die Kopie ist unten links verankert.
Die Produkt-/Dashboard-Karte ist unten rechts verankert.
Füge eine dunkle untere Abdeckung für die Lesbarkeit und einen sehr subtilen warmen Überzug über dem Foto hinzu.

.hero {
  min-height: min(92svh, 82rem);
  position: relative;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
  z-index: -1;
}

4.4 Navigation

Desktop besteht aus drei unabhängigen Clustern:

Links: eine durchscheinende dunkle Pillenform, die 3 Links enthält.
Mitte: weißes Logo.
Rechts: eine dunkle durchscheinende Konto-Pillenform plus eine separate kreisförmige Menüschaltfläche.

Verwende backdrop-filter: blur(14px) und eine halbtransparente Oberfläche. Halte die Navigationshöhe bei 58–64px.

Bei Breiten unter 900px:

Verstecke die linke Link-Pillenform.
Behalte das zentrierte Logo.
Behalte eine primäre Aktion und das Menüsymbol.
Stelle sicher, dass das Logo optisch zentriert bleibt, nicht mathematisch durch ungleiche Seitensteuerelemente verschoben.

4.5 Logo-Leiste

Weißer Abschnitt.
Zentrierter Statement-Chip über den Logos.
Logos in einer horizontal beschnittenen Leiste mit dupliziertem Inhalt.
Die Logogröße sollte visuell normalisiert sein, nicht auf identische Rohbreiten gesetzt.
Verwende eine Graustufen-/Oliv-Behandlung und eine geringere Deckkraft für ausgewählte Marken.

4.6 Produktübersicht

Große zweizeilige Überschrift auf der linken Seite.
Zwei Pill-Buttons direkt darunter.
Zwei kurze Absätze; die ersten Wörter in jedem Absatz sind halbfett.
Die rechte Seite verwendet zwei unterschiedlich gefärbte Karten, die vertikal versetzt sind, um Asymmetrie zu erzeugen.
Die dunkle Karte ist schmaler/größer als die hellblaue Karte und enthält eine Mini-Produkt-Benutzeroberfläche.

4.7 Wachstums-Feature-Trio

Die Abschnittsüberschrift erstreckt sich über den größten Teil der Zeile, mit einer kleinen, umrissenen „Mehr erfahren“-Pillenform, die rechts ausgerichtet ist.
Drei Karten:
1. Sanfte grüne, fotografische/verlaufshinterlegte Karte mit eingebetteter weißer Benutzeroberfläche.
2. Lavendelfarbene Karte mit einem Saldo-Übersichts-Panel.
3. Breite fotografische Karte mit großer weißer Überschrift und unterer Textüberlagerung.
Die Karten teilen sich Höhe und Radius, aber nicht die Breite.

4.8 Rechner

Weißer Abschnitt mit großem Weißraum darüber und darunter.
Links: Überschrift, 2–3-zeilige Beschreibung, dunkler Pill-CTA.
Rechts: Säurelime-Karte mit Kopfzeile, Trennlinie, Währungswert, Bereichsregler, Trennlinie, Finanzierungsschätzung.
Die Rechnerkarte ist ungefähr quadratisch und sollte nicht breiter als 650px werden.

4.9 FAQ

Dunkler Oliv-Abschnitt in voller Breite.
Linke Spalte: limefarbener Titel und Zusammenfassung.
Rechte Spalte: vier Akkordeon-Zeilen.
Es ist immer nur eine Antwort geöffnet.
Die Trennlinien der Zeilen sind äußerst subtil.
Plus wird zu Minus, ohne dass der gesamte Symbolcontainer rotiert.

4.10 Testimonial

Fotografische Karte in voller Breite direkt unterhalb des FAQ.
Großes Porträt/Video-Standbild.
Der unscharfe Vordergrund am unteren Bildrand ist Teil der Fotografie, keine Benutzeroberflächenunschärfe.
Zitat und Quellenangabe befinden sich über einem dunkleren unteren linken Farbverlauf.
Zwei kleine Seitennummerierungs-Punkte/Schaltflächen unten rechts.
Behandle es strukturell als Karussell, auch wenn in der Aufnahme nur eine Folienüberleitung sichtbar ist.

4.11 Artikel

Weißer Abschnitt mit Titel links und kleiner „Alle anzeigen“-Aktion rechts.
Drei gleiche Karten.
Jede Karte verwendet ein 16:9- oder etwas höheres Bild mit einem dunklen unteren Farbverlauf und einem weißen Artikeltitel.
Titel sind kurz und unten links verankert.

4.12 CTA

Zentrierter Inhalt in einem hohen Abschnitt.
Der Hintergrund wechselt von oben weiß zu ganz unten sehr blassem Lime.
Überschrift: zwei Zeilen, maximale Breite etwa 520–620px.
Kleiner Experten-Avatar-Cluster und dunkle primäre Pillenform.
Behalte etwa 120–180px oberen und unteren Atemraum bei.

4.13 Footer

Der CTA-Hintergrund setzt sich hinter dem Footer fort.
Der Footer selbst ist ein eingebettetes, dunkles olivfarbenes abgerundetes Rechteck mit 24–32px Außenabstand.
Marke oben links, Navigation oben rechts, Kontakt/Standort/Sprachen im unteren Bereich, soziale Kreise unten links.
Der Footer sollte sich wie ein kompaktes Dashboard-Panel anfühlen, nicht wie ein traditioneller randloser rechtlicher Footer.

5. Responsives Verhalten

Das Capture zeigt keine responsiven Zustände. Implementiere Folgendes, um die Absicht zu bewahren.

5.1 Breakpoints

// tailwind.config.ts
screens: {
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
  '2xl': '1536px',
}

5.2 Desktop ≥ 1200px

Behalte die 90vw-Hülle und alle mehrspaltigen Kompositionen bei.
Verwende 56–64px internen horizontalen Abstand.
Her

…

[gekürzt für die Übersetzung]

In Ihrer bevorzugten KI fragen

Dokumentation