Stille Stunde.
Atme durch.

Deine Kundin soll denken: Hier darf ich langsam sein. Hier passt jemand auf mich auf.

• →Langsam schreiben: kurze Sätze, viele Pausen
• →Einladen statt auffordern: „Du kannst“, „Wenn du magst“
• →Keine Heilversprechen, keine Diagnosen
• →Sicherheit geben: was passiert, wie lange, was du brauchst

Oben ein dunkler Abendhimmel, danach helle, nebelige Flächen mit viel Luft. Nachthimmel kommt noch einmal für die Übung, der Abendverlauf für den Schluss-Aufruf.

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

Wann die Teilnehmerinnen üben

Reihenfolge der Farben: #2F5D99, #7C93D9, #5FAFA5, #12264A, #A9B8D6. Blau zuerst, dann Lavendel und Salbei. Weiche runde Balken, viel Abstand. Keine Warnfarben.

Leichte Schriftstärken wirken bei langen Wörtern schnell dünn. Headlines kurz halten und eher zwei kurze Sätze nehmen als einen langen. Silbentrennung einschalten.

Pill-Buttons in Dämmerblau mit weißer Schrift, normale Schreibweise. Auf Dunkel werden sie weiß mit Tiefsee-Schrift. Zweitbutton mit feinem Rahmen.

Hol dir die Abendübung zum Anhören.

0 von 4 erledigt

So nutzt du „Stille Stunde“ in deiner KI

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

---
name: stille-stunde-brand
description: Beruhigendes, kühles Design mit Nachthimmel-Blau, sanften Abendverläufen, Morgennebel-Flächen und Lavendel als leisem Akzent. Outfit in leichter Stärke für Headlines, Nunito Sans für Text, weiche Radien, ein atmender Kreis als Erkennungszeichen. Für Achtsamkeit, Coaching, therapienahe Angebote, Schlaf und Selbstfürsorge. Trigger diesen Skill, wenn jemand sagt: "Stille Stunde", "Stille Stunde-Design", "im Stille Stunde-Stil", "wie Calm", "Calm-Look", "Stille-Stunde-Design", "Calm-Stil", "beruhigendes Design", "Achtsamkeits-Design", "sanftes Nachtblau", "Therapie-Design". Auch nutzen, wenn ein Angebot das Gefühl „Ruhig. Sicher. Aufgehoben.“ auslösen soll.
---

# Stille Stunde · Brand-System

> Showcase mit allen Ansichten: https://8bd-3i1.pages.dev/stille-stunde-showcase.html

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

## Kurzfassung (zuerst lesen)

- **Gefühl:** Ruhig. Sicher. Aufgehoben. Fühlt sich an wie der Moment am Abend, wenn das Licht draußen blau wird und du endlich durchatmest: Nichts muss mehr, alles darf.
- **Farben:** Nachthimmel #12264A · Tiefsee #1C3A66 · Dämmerblau #2F5D99 · Abendblau #3E6FA8 · Lavendel #B9C3F2 · Mondlicht #EAF1F8
- **Schriften:** Outfit (Headlines) · Nunito Sans (Fließtext) · Nunito Sans (Labels)
- **Formen:** Karten-Radius 28px, Button-Radius 999px (Pill), sehr weiche blaue Schatten 0 10px 40px rgba(18,38,74,.06)
- **Die 5 wichtigsten Regeln:**
  1. Viel Luft, wenige Elemente.
  2. Nur Blau, Lavendel und ein Hauch Salbei.
  3. Leichte Headlines in Outfit, nie fett.
  4. Weiche Radien und sehr weiche Schatten.
  5. Langsam und freundlich schreiben, nie drängen.

---

## Wirkung & Einsatz

**So fühlt es sich an:** Ruhig. Sicher. Aufgehoben.
Fühlt sich an wie der Moment am Abend, wenn das Licht draußen blau wird und du endlich durchatmest: Nichts muss mehr, alles darf.

**Nimm dieses Design, wenn:** Deine Kundin soll denken: Hier darf ich langsam sein. Hier passt jemand auf mich auf.

**Passt zu diesen Angeboten:**
- Achtsamkeits-, Meditations- und Schlafkurse
- Coaching und Begleitung bei Stress und Überforderung
- Therapienahe Angebote und Selbsthilfe-Programme

**Branchen:** Achtsamkeit, Coaching, Psychologie, Yoga, Schlaf, Gesundheit

**Preisgefühl:** Einstieg bis Mitte, auch Abos. Wirkt vertrauenswürdig und sanft.

**Lieber nicht, wenn:**
- Du willst Energie und Aufbruch vermitteln
- Dein Angebot ist laut und schnell
- Deine Zielgruppe will zuerst Zahlen und Fakten

---

## Tonalität

**Ton:** Sanft, Ruhig, Zugewandt

- Langsam schreiben: kurze Sätze, viele Pausen
- Einladen statt auffordern: „Du kannst“, „Wenn du magst“
- Keine Heilversprechen, keine Diagnosen
- Sicherheit geben: was passiert, wie lange, was du brauchst

| Format | Beispiel |
|---|---|
| Headline | Atme ein. Lass los. |
| Button | Erste Übung anhören |
| Betreff | Zehn Minuten nur für dich |
| Post | Dein Kopf darf heute Abend früher Feierabend machen. Zehn Minuten reichen. |

- **Diese Wörter passen:** Ruhe, sanft, Pause, wenn du magst, aufgehoben
- **Diese Wörter meiden:** sofort, radikal, heilt, garantiert, Durchbruch

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 |
|---|---|---|
| Nachthimmel | #12264A | dunkle Flächen |
| Tiefsee | #1C3A66 | Verlauf oben |
| Dämmerblau | #2F5D99 | Buttons, Links |
| Abendblau | #3E6FA8 | Verlauf Mitte |
| Lavendel | #B9C3F2 | Akzent auf Dunkel |
| Mondlicht | #EAF1F8 | zweite Fläche |
| Morgennebel | #F4F7FB | Hauptfläche |
| Tinte | #13233D | Headlines |
| Schiefer | #3F5170 | Fließtext |
| Salbei-Aqua | #7FD1C7 | Fortschritt, Haken |

### Farbregeln
- Nur Blautöne, Lavendel und ein Hauch Salbei.
- Der Abendverlauf (Tiefsee, Abendblau, Lavendel) für Hero und Schluss-Aufruf.
- Keine Warnfarben wie Rot oder Orange, auch nicht für Fehler: dafür Dämmerblau mit klarem Text.
- Salbei-Aqua nur für Fortschritt und Haken.

### Kontrast (WCAG)
| Kombination | Farben | Kontrast | Einsatz |
|---|---|---|---|
| Headline auf Morgennebel | #13233D auf #F4F7FB | 14,6 : 1 | Fließtext ok |
| Fließtext auf Morgennebel | #3F5170 auf #F4F7FB | 7,5 : 1 | Fließtext ok |
| Nebentext auf Mondlicht | #5A6A83 auf #EAF1F8 | 4,8 : 1 | Fließtext ok |
| Button-Text auf Dämmerblau | #FFFFFF auf #2F5D99 | 6,7 : 1 | Fließtext ok |
| Fließtext auf Nachthimmel | #C2CDE3 auf #12264A | 9,4 : 1 | Fließtext ok |
| Lavendel auf Nachthimmel | #B9C3F2 auf #12264A | 8,7 : 1 | Fließtext ok |

### Diagrammfarben (in dieser Reihenfolge)
1. #2F5D99
2. #7C93D9
3. #5FAFA5
4. #12264A
5. #A9B8D6

Blau zuerst, dann Lavendel und Salbei. Weiche runde Balken, viel Abstand. Keine Warnfarben.

---

## Typografie

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&display=swap">
```

| Rolle | Schrift | Details |
|---|---|---|
| Headlines | Outfit | 300 · 34–80 px · leicht, nie fett |
| Fließtext | Nunito Sans | 400 · 16–18 px · Zeilenhöhe 1,7 |
| Labels | Nunito Sans | 700 · 12–13 px · Großbuchstaben · Sperrung 8 % |

### Schriftgrößen
| Rolle | Werte | Beispiel |
|---|---|---|
| Hero | 80 / 1,1 / 300 | Ruhepol |
| H2 | 40 / 1,15 / 300 | Acht Wochen, mehr Ruhe |
| H3 | 24 / 1,25 / 400 | Deine Abendübung |
| Fließtext | 17 / 1,7 / 400 | Setz dich bequem hin und schließ die Augen. |
| Label | 13 / 700 / Sperrung 8 % | Woche 3 |

### Typografie-Regeln
- Headlines in Outfit 300, nie fetter als 400.
- Ein Wort pro Headline in Dämmerblau (auf Dunkel: Lavendel).
- Labels in Großbuchstaben mit leichter Sperrung, sonst normale Schreibweise.
- Großzügige Zeilenhöhe im Fließtext, viel Abstand zwischen Absätzen.
- **Deutsche Texte:** `lang="de"` setzen und Headlines mit `hyphens: auto` ausstatten. Leichte Schriftstärken wirken bei langen Wörtern schnell dünn. Headlines kurz halten und eher zwei kurze Sätze nehmen als einen langen. Silbentrennung einschalten.

---

## 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 28px · Kacheln 20px · Buttons 999px (Pill) · Eingabefelder 16px · Bilder 24px
- **Schatten:** sehr weiche blaue Schatten 0 10px 40px rgba(18,38,74,.06)
- **Raster-Abstand zwischen Karten:** 14px

---

## Layout

**Abschnitts-Rhythmus einer Salespage:**
1. Hero: dunkle Fläche #12264A
2. Gefühl: Hintergrund #F4F7FB
3. Vorteile: zweite Fläche #EAF1F8
4. Intro: Hintergrund #F4F7FB
5. Wochen: Tönung #E3EAF8
6. Stimmen: Hintergrund #F4F7FB
7. Übung: dunkle Fläche #12264A
8. Preise: zweite Fläche #EAF1F8
9. FAQ: Hintergrund #F4F7FB
10. CTA: Akzentfläche linear-gradient(160deg,#1C3A66 0%,#3E6FA8 70%,#7C93D9 100%)

Oben ein dunkler Abendhimmel, danach helle, nebelige Flächen mit viel Luft. Nachthimmel kommt noch einmal für die Übung, der Abendverlauf für den Schluss-Aufruf.

**Erkennungszeichen: Der atmende Kreis.** Ein weicher Kreis in Lavendel, der langsam größer und kleiner wird, im Takt von vier Sekunden ein und vier Sekunden aus. Dazu ein Abendverlauf von Tiefsee zu Lavendel, leichte Headlines in Outfit und viel Luft. Nichts blinkt, nichts drängt.

- Viel Luft: doppelte Abstände zwischen Abschnitten.
- Weiche Radien (20–28 px) und sehr weiche Schatten.
- Inhalte eher zentriert, wenige Elemente pro Ansicht.

---

## Bausteine

### Buttons
```css
.btn { font-family: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
  padding: 14px 28px; border-radius: 999px; transition: all .3s; }
.btn-primary { background: #2F5D99; color: #FFFFFF; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(47,93,153,.25); }
.btn-secondary { background: transparent; color: #13233D; border: 1.5px solid #13233D; }
```
Pill-Buttons in Dämmerblau mit weißer Schrift, normale Schreibweise. Auf Dunkel werden sie weiß mit Tiefsee-Schrift. Zweitbutton mit feinem Rahmen.

### Karten und Kacheln
```css
.card { background: #FFFFFF; border: none; border-radius: 28px; box-shadow: 0 10px 40px rgba(18,38,74,.06); padding: 32px; }
.tile { background: #F4F7FB; border: none; border-radius: 20px; padding: 22px; }
.tile:hover { box-shadow: 0 16px 44px rgba(18,38,74,.12); }
```

### Labels, Tags, Eingabefelder
```css
.label { font-family: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #2F5D99; }
.tag { background: #E3EAF8; color: #1C3A66; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
input { border: 1px solid #C3CFE0; background: #FFFFFF; border-radius: 16px; padding: 14px 16px; font-size: 16px; }
input:focus { border-color: #2F5D99; box-shadow: 0 0 0 3px rgba(47,93,153,.22); }
```

### Weitere Bausteine (alle im Showcase zu sehen)
- **Schmerzpunkte:** Liste mit feinen Trennlinien (#DCE4EF), links ein Kreis mit ✕ in #2F5D99. 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 (#2F5D99), Titel, kurzer Beschreibung und Tag. Nummern nur, wenn die Reihenfolge wirklich zählt.
- **Kundenstimmen:** Zitat in Outfit 21 px, darunter rundes Kürzel, Name und Beruf.
- **Preis-Pakete:** drei Kacheln nebeneinander, das empfohlene Paket mit 2 px Rahmen in #2F5D99 und Tag „Empfohlen“.
- **FAQ:** Zeilen mit Trennlinien, rechts ein Kreis mit +. Offen: Kreis gefüllt in #2F5D99, das + dreht sich zum ×.
- **Checkliste:** echte Checkboxen in #2F5D99, erledigte Punkte grau und durchgestrichen, darunter „2 von 4 erledigt“.
- **Hinweis-Box:** Fläche #E3EAF8, rundes i-Symbol in #2F5D99.
- **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 #2F5D99 hervorgehoben.

---

## Formate

- **Social Media:** Nachthimmel oder Abendverlauf als Fläche, eine leichte Headline mit Lavendel-Wort, viel Luft. Stories mit sanfter Umfrage. Naturfotos in der blauen Stunde.
- **Folien (16:9):** Folie im Abendverlauf, leichte Headline, ein Lavendel-Wort, drei weiche Kacheln. Viel Rand, wenig Text.
- **Dokumente, Workbooks, PDF:** Weißes Blatt mit weichem Schatten, Tagebuch-Charakter, Gedanke in einer Mondlicht-Kachel, Schreiblinien in hellem Blau. Druckt hell und freundlich.
- **Newsletter:** Weißer Brief mit Nachthimmel-Kopf, „Liebe Anna“, drei langsame Absätze, ein Pill-Button in Dämmerblau. Gruß mit einem guten Wunsch.
- **Artefakte und kleine Tools:** Kopf im Abendverlauf, helle Tabs, weiche Kacheln, Schritte als Kreise in Dämmerblau. Gern mit atmendem Kreis.
- **Salespage:** Dunkler Abendhimmel im Hero, danach helle Nebelflächen mit viel Luft, Wochen als weiche Kacheln, Stimmen groß und ruhig, Schluss im Abendverlauf.

---

## Bildsprache

Natur in der blauen Stunde: Seen, Nebel, Himmel, Wasser. Menschen in ruhigen Momenten, oft von hinten oder mit geschlossenen Augen. Kühle, weiche Farben, nie grell.

**Bild-Prompt-Stichworte:**
```
blue hour landscape, calm lake with mist, soft night sky gradient,
peaceful person with closed eyes, gentle light, cool blue and lavender tones,
serene nature, meditation, quiet and safe atmosphere
```

---

## Bewegung & Interaktion

- Der atmende Kreis wird in 8 Sekunden größer und kleiner (4 ein, 4 aus).
- Inhalte blenden langsam ein (0,8 s), nie von der Seite.
- Beim Darüberfahren werden Schatten etwas tiefer. Keine Sprünge.
- Alle Übergänge 0,25 bis 0,4 Sekunden. Bei `prefers-reduced-motion` alle Animationen ausschalten.
- Tastatur-Fokus immer sichtbar: 3 px Rahmen in #2F5D99.

---

## Was dieses Design NICHT ist

- Keine Warnfarben wie Rot oder Orange
- Keine fetten Headlines
- Keine harten Kanten
- Keine Countdowns und kein Zeitdruck
- Keine Heilversprechen
- Kein grelles Licht in Fotos

---

## CSS-Variablen (kopierfertig)

```css
:root {
  --line-strong: #C3CFE0;
  --on-accent2: rgba(255,255,255,.86);
  --line-accent: rgba(255,255,255,.22);
  --tile-accent: rgba(255,255,255,.12);
  --line-dark: rgba(255,255,255,.14);
  --tile-dark: rgba(255,255,255,.07);
  --tile-border-dark: none;
  --tag-bg-dark: rgba(185,195,242,.18);
  --tag-ink-dark: #E3E8FF;
  --card-border: none;
  --tile-border: none;
  --shadow: 0 10px 40px rgba(18,38,74,.06);
  --shadow-hover: 0 16px 44px rgba(18,38,74,.12);
  --r-pill: 999px;
  --r-icon: 50%;
  --r-chip: 50%;
  --r-bar: 999px;
  --r-avatar: 50%;
  --r-slide-tile: 16px;
  --slide-gap: 1.2cqw;
  --tab-w: 600;
  --quote-size: 21px;
  --tag-track: 0.02em;
  --wm-tf: none;
  --focus-ring: rgba(47,93,153,.22);
  --doc-border: none;
  --strip-gap: 0px;
  --bg: #F4F7FB;
  --alt: #EAF1F8;
  --soft: #E3EAF8;
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --tile: #F4F7FB;
  --tile-hover: #EAF1F8;
  --tile-on-bg: #FFFFFF;
  --tile-on-soft: #FFFFFF;
  --ink: #13233D;
  --ink2: #3F5170;
  --ink3: #5A6A83;
  --line: #DCE4EF;
  --accent: #2F5D99;
  --accent-bg: linear-gradient(160deg,#1C3A66 0%,#3E6FA8 70%,#7C93D9 100%);
  --on-accent: #FFFFFF;
  --sa-btn-ink: #1C3A66;
  --accent-text: #2F5D99;
  --label: #2F5D99;
  --dark: #12264A;
  --on-dark: #FFFFFF;
  --on-dark2: #C2CDE3;
  --label-dark: #B9C3F2;
  --accent-text-dark: #B9C3F2;
  --x-color: #2F5D99;
  --tag-bg: #E3EAF8;
  --tag-ink: #1C3A66;
  --focus: #2F5D99;
  --ticker-bg: #EAF1F8;
  --dot: #7C93D9;
  --nav-bg: rgba(244,247,251,.92);
  --tab-active: #2F5D99;
  --r-card: 28px;
  --r-tile: 20px;
  --r-btn: 999px;
  --r-input: 16px;
  --r-media: 24px;
  --r-slide: 24px;
  --r-doc: 24px;
  --grid-gap: 14px;
  --f-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --f-label: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --f-mono: ui-monospace, Consolas, monospace;
  --f-btn: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --f-quote: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --h-w: 300;
  --h-track: -0.02em;
  --h-lh: 1.12;
  --h-tf: none;
  --hero-size: clamp(42px,8vw,80px);
  --num-w: 200;
  --l-size: 13px;
  --l-w: 700;
  --l-track: 0.08em;
  --l-tf: uppercase;
  --b-size: 15px;
  --b-w: 700;
  --b-track: 0;
  --b-tf: none;
  --b-pad: 14px 28px;
  --btn-bg: #2F5D99;
  --btn-ink: #FFFFFF;
  --btn-shadow: 0 10px 26px rgba(47,93,153,.25);
  --btn-sec-hover-ink: #FFFFFF;
  --input-border: 1px solid #C3CFE0;
  --input-bg: #FFFFFF;
  --star: #2F5D99;
  --ph: linear-gradient(180deg,#1C3A66 0%,#3E6FA8 55%,#B9C3F2 100%);
  --ph-ink: #13233D;
  --ph-chip: rgba(255,255,255,.88);
  --poll-bg: rgba(255,255,255,.14);
  --poll-ink: #FFFFFF;
  --doc-shadow: 0 18px 50px rgba(18,38,74,.08);
  --sa-ink: #FFFFFF;
  --sa-ink2: rgba(255,255,255,.86);
  --f-script: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
}
```

---

## 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 Outfit, Fließtext in Nunito Sans
- [ ] Deutsche Headlines mit Silbentrennung, keine Wörter abgeschnitten
- [ ] Auf dem Handy (400 px) einspaltig, nichts scrollt seitlich
- [ ] Tastatur-Fokus sichtbar, Bewegungen abschaltbar
- [ ] Pro Ansicht wenige Elemente und viel Luft
- [ ] Kein Rot, kein Orange
- [ ] Bei Gesundheitsthemen der Hinweis „ersetzt keine Therapie“