Verlauf & Vertrauen.
Klar in Zahlen.

Deine Kundin soll denken: Die wissen, was sie tun. Hier ist mein Geld sicher.

• →Konkrete Zahlen statt Adjektive
• →Fachbegriffe kurz erklären, nie weglassen
• →Ein Nutzen pro Satz
• →Ruhig bleiben, nie reißerisch

Weiß und Eisweiß tragen die Inhalte. Nachtblau kommt für Produkt, Kennzahlen und den Schluss. Der bunte Verlauf erscheint nur einmal ganz oben.

AA heißt: gut lesbar für Fließtext. Alles unter 4,5 : 1 nur für große Headlines oder Deko verwenden.

Umsatz nach Produkt

Reihenfolge der Farben: #635BFF, #0A9BD8, #0A2540, #E5487D, #D97706. Diagramme auf Weiß mit feinen Linien in #E3E8EE. Zahlen immer in JetBrains Mono mit gleich breiten Ziffern.

Ein schräg angeschnittenes Band aus Violett, Rot, Gelb und Türkis, das sich langsam bewegt. Es steht nur ganz oben im Hero, immer im gleichen Winkel. Darunter bleibt alles weiß, sachlich und präzise. Zahlen stehen in Monospace.

Fachwörter wie „Umsatzsteuervoranmeldung“ in Headlines vermeiden oder auflösen („die Voranmeldung zur Umsatzsteuer“). In Tabellen dürfen sie stehen.

Pill-Buttons in Violett mit Pfeil ›. Zweitbutton mit Rahmen. Auf Nachtblau bleibt der Hauptbutton violett.

Hol dir die Vorlage für deine Monatszahlen.

0 von 4 erledigt

So nutzt du „Verlauf & Vertrauen“ in deiner KI

1. 1Auf „Skill-Text kopieren“ tippen.
2. 2In deiner KI einfügen (siehe unten) oder als Datei verlauf-und-vertrauen-brand-SKILL.md speichern.
3. 3Danach reicht ein Satz wie: „Bau mir eine Salespage im Verlauf & Vertrauen-Design.“

---
name: verlauf-und-vertrauen-brand
description: Seriöses, modernes Business-Design auf Weiß und Eisweiß mit Nachtblau, Violett als Hauptakzent und einem bunten, schrägen Verlaufsband im Hero. Manrope für Headlines, Inter für Text, JetBrains Mono für Zahlen. Feine Rahmen, tiefe Schatten beim Darüberfahren. Für Finanz-, Steuer-, Software- und B2B-Angebote. Trigger diesen Skill, wenn jemand sagt: "Verlauf & Vertrauen", "Verlauf & Vertrauen-Design", "im Verlauf & Vertrauen-Stil", "wie Stripe", "Stripe-Look", "Verlauf-Design", "Stripe-Stil", "Fintech-Design", "seriöses Business-Design", "Zahlen-Design". Auch nutzen, wenn ein Angebot das Gefühl „Kompetent. Modern. Vertrauenswürdig.“ auslösen soll.
---

# Verlauf & Vertrauen · Brand-System

> Showcase mit allen Ansichten: https://8bd-3i1.pages.dev/verlauf-und-vertrauen-showcase.html

> Angelehnt an die Designsprache von Stripe. Eigene Farben, Schriften und Namen: keine Logos, keine Markennamen und keine geschützten Elemente von Stripe übernehmen.

## Kurzfassung (zuerst lesen)

- **Gefühl:** Kompetent. Modern. Vertrauenswürdig. Fühlt sich an wie ein Gespräch mit einer Steuerberaterin, die Technik liebt: Du verstehst plötzlich deine Zahlen und fühlst dich in guten Händen.
- **Farben:** Nachtblau #0A2540 · Schieferblau #425466 · Taubenblau #5D6C7B · Eisweiß #F6F9FC · Weiß #FFFFFF · Violett #635BFF
- **Schriften:** Manrope (Headlines) · Inter (Fließtext) · JetBrains Mono (Zahlen & Code)
- **Formen:** Karten-Radius 16px, Button-Radius 999px (Pill), Rahmen 1 px #E3E8EE plus feiner Schatten, beim Darüberfahren 0 13px 27px -5px rgba(50,50,93,.25)
- **Die 5 wichtigsten Regeln:**
  1. Linksbündig, präzise, viel Weiß.
  2. Violett für alles Klickbare.
  3. Der bunte schräge Verlauf nur einmal ganz oben.
  4. Zahlen immer in Monospace.
  5. Feine Rahmen, tiefe Schatten beim Darüberfahren.

---

## Wirkung & Einsatz

**So fühlt es sich an:** Kompetent. Modern. Vertrauenswürdig.
Fühlt sich an wie ein Gespräch mit einer Steuerberaterin, die Technik liebt: Du verstehst plötzlich deine Zahlen und fühlst dich in guten Händen.

**Nimm dieses Design, wenn:** Deine Kundin soll denken: Die wissen, was sie tun. Hier ist mein Geld sicher.

**Passt zu diesen Angeboten:**
- Finanz-, Steuer- und Business-Themen
- Software, Tools und Dashboards
- B2B-Beratung und Online-Programme mit Zahlenfokus

**Branchen:** Finanzen, Steuern, SaaS, Beratung, Buchhaltung, KI-Tools

**Preisgefühl:** Mittel bis hoch, auch Abo-Modelle. Wirkt professionell und investitionswürdig.

**Lieber nicht, wenn:**
- Dein Thema ist emotional und weich, etwa Trauer oder Spiritualität
- Deine Zielgruppe schreckt Technik eher ab
- Du verkaufst handgemachte, rustikale Produkte

---

## Tonalität

**Ton:** Präzise, Klar, Souverän

- Konkrete Zahlen statt Adjektive
- Fachbegriffe kurz erklären, nie weglassen
- Ein Nutzen pro Satz
- Ruhig bleiben, nie reißerisch

| Format | Beispiel |
|---|---|
| Headline | Zahlen, die du verstehst. |
| Button | Kostenlos testen › |
| Betreff | Deine Q3-Zahlen in 4 Minuten |
| Post | 18 % mehr Gewinn, ohne mehr zu arbeiten. So sieht es in deinen Zahlen aus. |

- **Diese Wörter passen:** klar, sicher, automatisch, in Minuten, nachvollziehbar
- **Diese Wörter meiden:** Geheimtipp, reich werden, passives Einkommen, Hammer, 100 % garantiert

Allgemein für alle Texte: kurze, aktive Sätze. Verben statt Hauptwörter („du planst“ statt „die Planung“). Keine Gedankenstrich-Einschübe, keine „nicht X, sondern Y“-Formeln, keine Floskeln.

---

## Farben

| Name | Hex | Einsatz |
|---|---|---|
| Nachtblau | #0A2540 | Headlines, dunkle Flächen |
| Schieferblau | #425466 | Fließtext |
| Taubenblau | #5D6C7B | Nebentext |
| Eisweiß | #F6F9FC | zweite Fläche |
| Weiß | #FFFFFF | Hauptfläche |
| Violett | #635BFF | Buttons, Labels, Akzent |
| Lavendel-Hauch | #EEF0FF | Tönung, Tags |
| Türkis | #80E9FF | Akzent auf Nachtblau |
| Verlauf-Rot | #FF333D | nur im Verlauf |
| Verlauf-Gelb | #FFCB57 | nur im Verlauf |

### Farbregeln
- Violett ist die Hauptfarbe für alles, was man anklicken kann.
- Der bunte Verlauf (Violett, Rot, Gelb, Türkis) erscheint einmal pro Seite, schräg im Hero.
- Nachtblau statt Schwarz für Text und dunkle Flächen.
- Türkis nur auf Nachtblau.
- Rot und Gelb nur im Verlauf, nie als Fläche oder Text.

### Kontrast (WCAG)
| Kombination | Farben | Kontrast | Einsatz |
|---|---|---|---|
| Headline auf Weiß | #0A2540 auf #FFFFFF | 15,5 : 1 | Fließtext ok |
| Fließtext auf Eisweiß | #425466 auf #F6F9FC | 7,4 : 1 | Fließtext ok |
| Nebentext auf Weiß | #5D6C7B auf #FFFFFF | 5,4 : 1 | Fließtext ok |
| Button-Text auf Violett | #FFFFFF auf #635BFF | 4,7 : 1 | Fließtext ok |
| Nebentext auf Nachtblau | #ADBDCC auf #0A2540 | 8,1 : 1 | Fließtext ok |
| Türkis auf Nachtblau | #80E9FF auf #0A2540 | 11,1 : 1 | Fließtext ok |

### Diagrammfarben (in dieser Reihenfolge)
1. #635BFF
2. #0A9BD8
3. #0A2540
4. #E5487D
5. #D97706

Diagramme auf Weiß mit feinen Linien in #E3E8EE. Zahlen immer in JetBrains Mono mit gleich breiten Ziffern.

---

## Typografie

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap">
```

| Rolle | Schrift | Details |
|---|---|---|
| Headlines | Manrope | 700 · 32–76 px · Laufweite −2 % |
| Fließtext | Inter | 400 · 15–18 px · Zeilenhöhe 1,6 |
| Zahlen & Code | JetBrains Mono | 500 · 12–28 px · gleich breite Ziffern |

### Schriftgrößen
| Rolle | Werte | Beispiel |
|---|---|---|
| Hero | 76 / 1,05 / 700 | Zahlenklar |
| H2 | 40 / 1,1 / 700 | Dein Finanz-Cockpit |
| H3 | 22 / 1,25 / 600 | Alles auf einen Blick |
| Fließtext | 17 / 1,6 / 400 | Jede Buchung landet automatisch an der richtigen Stelle. |
| Kennzahl | Mono 28 / 1,2 / 500 | +18,4 % |

### Typografie-Regeln
- Headlines in Manrope 700, ruhig und präzise, nie in Großbuchstaben.
- Ein Wort pro Headline darf den Verlauf tragen.
- Alle Zahlen in JetBrains Mono mit gleich breiten Ziffern (tabular-nums).
- Eyebrows in Violett, normale Schreibweise, 15 px fett.
- **Deutsche Texte:** `lang="de"` setzen und Headlines mit `hyphens: auto` ausstatten. Fachwörter wie „Umsatzsteuervoranmeldung“ in Headlines vermeiden oder auflösen („die Voranmeldung zur Umsatzsteuer“). In Tabellen dürfen sie stehen.

---

## Abstände, Formen, Schatten

- **Raster:** 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 px. Nur diese Werte für Abstände verwenden.
- **Container:** Text max. 760 px breit (rund 65 Zeichen pro Zeile), breite Layouts max. 1100 px.
- **Abschnitts-Abstand:** Desktop 96 px oben und unten, Handy 56 px. Seitenrand mindestens 16 px.
- **Radius:** Karten 16px · Kacheln 10px · Buttons 999px (Pill) · Eingabefelder 6px · Bilder 12px
- **Schatten:** Rahmen 1 px #E3E8EE plus feiner Schatten, beim Darüberfahren 0 13px 27px -5px rgba(50,50,93,.25)
- **Raster-Abstand zwischen Karten:** 16px

---

## Layout

**Abschnitts-Rhythmus einer Salespage:**
1. Hero: Hintergrund #FFFFFF
2. Problem: zweite Fläche #F6F9FC
3. Vorteile: Hintergrund #FFFFFF
4. Produkt: dunkle Fläche #0A2540
5. Funktionen: zweite Fläche #F6F9FC
6. Stimmen: Hintergrund #FFFFFF
7. Zahlen: dunkle Fläche #0A2540
8. Preise: zweite Fläche #F6F9FC
9. FAQ: Hintergrund #FFFFFF
10. CTA: dunkle Fläche #0A2540

Weiß und Eisweiß tragen die Inhalte. Nachtblau kommt für Produkt, Kennzahlen und den Schluss. Der bunte Verlauf erscheint nur einmal ganz oben.

**Erkennungszeichen: Der schräge Verlauf.** Ein schräg angeschnittenes Band aus Violett, Rot, Gelb und Türkis, das sich langsam bewegt. Es steht nur ganz oben im Hero, immer im gleichen Winkel. Darunter bleibt alles weiß, sachlich und präzise. Zahlen stehen in Monospace.

- Headlines linksbündig, nicht zentriert.
- Karten mit 1 px Rahmen und sehr feinem Schatten, beim Darüberfahren ein tiefer blauer Schatten.
- Kennzahlen in Kacheln mit großen Mono-Zahlen.

---

## Bausteine

### Buttons
```css
.btn { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  padding: 11px 20px; border-radius: 999px; transition: all .3s; }
.btn-primary { background: #635BFF; color: #FFFFFF; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(99,91,255,.3); }
.btn-secondary { background: transparent; color: #0A2540; border: 1.5px solid #0A2540; }
```
Pill-Buttons in Violett mit Pfeil ›. Zweitbutton mit Rahmen. Auf Nachtblau bleibt der Hauptbutton violett.

### Karten und Kacheln
```css
.card { background: #FFFFFF; border: 1px solid #E3E8EE; border-radius: 16px; box-shadow: 0 2px 5px rgba(50,50,93,.04), 0 1px 1.5px rgba(0,0,0,.03); padding: 32px; }
.tile { background: #F6F9FC; border: none; border-radius: 10px; padding: 22px; }
.tile:hover { box-shadow: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3); }
```

### Labels, Tags, Eingabefelder
```css
.label { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: #635BFF; }
.tag { background: #EEF0FF; color: #3A31C7; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
input { border: 1px solid #C9D3DE; background: #FFFFFF; border-radius: 6px; padding: 14px 16px; font-size: 16px; }
input:focus { border-color: #635BFF; box-shadow: 0 0 0 3px rgba(99,91,255,.25); }
```

### Weitere Bausteine (alle im Showcase zu sehen)
- **Schmerzpunkte:** Liste mit feinen Trennlinien (#E3E8EE), links ein Kreis mit ✕ in #635BFF. Beim Darüberfahren rückt die Zeile 6 px ein.
- **Vorher / nachher:** Kachel, oben das Vorher klein und durchgestrichen, darunter das Nachher kräftig.
- **Module:** Kachel mit großer Nummer in der Headline-Schrift (#635BFF), Titel, kurzer Beschreibung und Tag. Nummern nur, wenn die Reihenfolge wirklich zählt.
- **Kundenstimmen:** Zitat in Manrope 19 px, darunter rundes Kürzel, Name und Beruf.
- **Preis-Pakete:** drei Kacheln nebeneinander, das empfohlene Paket mit 2 px Rahmen in #635BFF und Tag „Empfohlen“.
- **FAQ:** Zeilen mit Trennlinien, rechts ein Kreis mit +. Offen: Kreis gefüllt in #635BFF, das + dreht sich zum ×.
- **Checkliste:** echte Checkboxen in #635BFF, erledigte Punkte grau und durchgestrichen, darunter „2 von 4 erledigt“.
- **Hinweis-Box:** Fläche #EEF0FF, rundes i-Symbol in #635BFF.
- **Formular (Freebie):** Vorname, E-Mail, Datenschutz-Checkbox (nicht vorausgewählt), Button. Fehlermeldungen sagen, was zu tun ist.
- **Tabelle:** Kopfzeile im Label-Stil, letzte Spalte in #635BFF hervorgehoben.

---

## Formate

- **Social Media:** Nachtblau oder Weiß als Fläche, eine große Kennzahl in Mono als Blickfang, dünne Verlaufslinie oben. Text sachlich, eine Aussage pro Kachel.
- **Folien (16:9):** Nachtblaue Folie mit feiner Verlaufslinie oben, linke Headline mit Verlaufs-Wort, Kennzahlen in Kacheln mit 1 px Rahmen. Zahlen in Mono.
- **Dokumente, Workbooks, PDF:** Weißes Blatt, Headline links, Faustregel in einer Lavendel-Kachel, Kennzahlen in Mono. Druckt hell. Der bunte Verlauf kommt im Dokument nicht vor.
- **Newsletter:** Weiß, Wortmarke links, Ausgabenummer im Kopf, feine Verlaufslinie oben. Headline mit Verlaufs-Wort, drei kurze Absätze, violetter Pill-Button mit Pfeil.
- **Artefakte und kleine Tools:** Nachtblauer Kopf mit Türkis-Label, Tabs auf Eisweiß, Inhalte als Kacheln mit feinem Rahmen. Schritte als violette Kreise.
- **Salespage:** Schräger Verlauf über dem Hero, Headline links, Nachtblau für das Produkt und den Schluss. Preise als drei Karten mit Rahmen, empfohlenes Paket violett umrandet.

---

## Bildsprache

Interfaces und Dashboards statt Stockfotos. Wenn Menschen, dann bei der Arbeit, ruhig, mit Tageslicht. Grafiken in Violett und Türkis, viel Weiß.

**Bild-Prompt-Stichworte:**
```
clean fintech interface, dashboard on laptop, soft gradient violet cyan,
minimal workspace, daylight, modern professional woman working,
precise data visualization, white background, trustworthy
```

---

## Bewegung & Interaktion

- Der Verlauf im Hero bewegt sich langsam (16 s, hin und zurück).
- Karten heben sich beim Darüberfahren und bekommen einen tiefen blauen Schatten.
- Zahlen dürfen beim ersten Anzeigen hochzählen.
- Alle Übergänge 0,25 bis 0,4 Sekunden. Bei `prefers-reduced-motion` alle Animationen ausschalten.
- Tastatur-Fokus immer sichtbar: 3 px Rahmen in #635BFF.

---

## Was dieses Design NICHT ist

- Kein Schwarz, immer Nachtblau
- Kein Verlauf auf Buttons oder Flächen außer dem Hero-Band
- Keine zentrierten Textblöcke
- Keine verspielten Schriften oder Handschrift
- Keine Stockfotos mit Geldscheinen oder Münzen

---

## CSS-Variablen (kopierfertig)

```css
:root {
  --line-strong: #C9D3DE;
  --on-accent2: rgba(255,255,255,.86);
  --line-accent: rgba(255,255,255,.25);
  --tile-accent: rgba(255,255,255,.14);
  --line-dark: rgba(255,255,255,.14);
  --tile-dark: rgba(255,255,255,.06);
  --tile-border-dark: 1px solid rgba(255,255,255,.1);
  --tag-bg-dark: rgba(128,233,255,.14);
  --tag-ink-dark: #80E9FF;
  --card-border: 1px solid #E3E8EE;
  --tile-border: none;
  --shadow: 0 2px 5px rgba(50,50,93,.04), 0 1px 1.5px rgba(0,0,0,.03);
  --shadow-hover: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3);
  --r-pill: 999px;
  --r-icon: 50%;
  --r-chip: 8px;
  --r-bar: 4px;
  --r-avatar: 50%;
  --r-slide-tile: 10px;
  --slide-gap: 1.2cqw;
  --tab-w: 600;
  --quote-size: 19px;
  --tag-track: 0;
  --wm-tf: none;
  --focus-ring: rgba(99,91,255,.25);
  --doc-border: 1px solid #E3E8EE;
  --strip-gap: 0px;
  --bg: #FFFFFF;
  --alt: #F6F9FC;
  --soft: #EEF0FF;
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --tile: #F6F9FC;
  --tile-on-bg: #F6F9FC;
  --tile-on-soft: #FFFFFF;
  --ink: #0A2540;
  --ink2: #425466;
  --ink3: #5D6C7B;
  --line: #E3E8EE;
  --accent: #635BFF;
  --accent-bg: #635BFF;
  --on-accent: #FFFFFF;
  --accent-text: #635BFF;
  --label: #635BFF;
  --dark: #0A2540;
  --on-dark: #FFFFFF;
  --on-dark2: #ADBDCC;
  --label-dark: #80E9FF;
  --accent-text-dark: #80E9FF;
  --x-color: #635BFF;
  --tag-bg: #EEF0FF;
  --tag-ink: #3A31C7;
  --focus: #635BFF;
  --ticker-bg: #F6F9FC;
  --dot: #635BFF;
  --nav-bg: rgba(255,255,255,.92);
  --tab-active: #635BFF;
  --r-card: 16px;
  --r-tile: 10px;
  --r-btn: 999px;
  --r-input: 6px;
  --r-media: 12px;
  --r-slide: 14px;
  --r-doc: 12px;
  --grid-gap: 16px;
  --f-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --f-label: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --f-btn: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --f-quote: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --h-w: 700;
  --h-track: -0.02em;
  --h-lh: 1.1;
  --h-tf: none;
  --hero-size: clamp(40px,7.5vw,76px);
  --l-size: 15px;
  --l-w: 600;
  --l-track: 0;
  --l-tf: none;
  --b-size: 15px;
  --b-w: 600;
  --b-track: 0;
  --b-tf: none;
  --b-pad: 11px 20px;
  --btn-bg: #635BFF;
  --btn-ink: #FFFFFF;
  --btn-shadow: 0 8px 20px rgba(99,91,255,.3);
  --btn-sec-hover-ink: #FFFFFF;
  --input-border: 1px solid #C9D3DE;
  --input-bg: #FFFFFF;
  --star: #635BFF;
  --ph: linear-gradient(120deg,#A960EE 0%,#FF333D 38%,#FFCB57 62%,#90E0FF 100%);
  --ph-ink: #0A2540;
  --ph-chip: rgba(255,255,255,.88);
  --poll-bg: rgba(255,255,255,.12);
  --poll-ink: #FFFFFF;
  --doc-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
  --tile-hover: #F6F9FC;
  --sa-ink: #FFFFFF;
  --sa-ink2: rgba(255,255,255,.86);
  --sa-btn-ink: #635BFF;
  --f-script: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --num-w: 700;
}
```

---

## Prüfliste vor der Abgabe

- [ ] Nur Farben aus der Palette oben verwendet
- [ ] Fließtext hat mindestens 4,5 : 1 Kontrast, kleinste Schrift 12 px
- [ ] Headlines in Manrope, Fließtext in Inter
- [ ] Deutsche Headlines mit Silbentrennung, keine Wörter abgeschnitten
- [ ] Auf dem Handy (400 px) einspaltig, nichts scrollt seitlich
- [ ] Tastatur-Fokus sichtbar, Bewegungen abschaltbar
- [ ] Alle Zahlen in JetBrains Mono
- [ ] Verlauf höchstens einmal pro Seite
- [ ] Headlines linksbündig