Weißraum Pro.
Ganz in Ruhe.

Deine Kundin soll denken: Das ist durchdacht. Das funktioniert einfach.

• →Kurze Sätze, oft nur drei Wörter
• →Ein Gedanke pro Absatz
• →Nutzen vor Funktion
• →Keine Ausrufezeichen

Weiß und Hellgrau wechseln sich ab. Schwarz kommt nur für die großen Momente, wenn das Produkt auf die Bühne tritt.

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

Woher die Kursanmeldungen kommen

Reihenfolge der Farben: #0071E3, #5E5CE6, #A550D8, #E0336B, #C45500. Blau ist immer die wichtigste Reihe. Bei nur zwei Werten: Blau und Steingrau.

Genau ein Wort oder eine Zeile pro Ansicht bekommt einen weichen Verlauf von Blau über Violett zu Rosé. Alles andere bleibt schwarz auf weiß. Dazu kommt viel, viel Weißraum.

Headlines höchstens fünf Wörter. Lange Wörter lieber umformulieren: „Steuerberatung für Gründerinnen“ statt „Gründerinnensteuerberatung“.

Pill-Form, normale Schreibweise. Blauer Button für die Hauptaktion, dazu ein Textlink „Mehr erfahren ›“. Nie mehr als zwei Aktionen nebeneinander.

Hol dir die Fokus-Vorlage. Kostenlos.

0 von 4 erledigt

So nutzt du „Weißraum Pro“ in deiner KI

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

---
name: weissraum-pro-brand
description: Helles, minimalistisches Premium-Design mit viel Weißraum, Hellgrau-Kacheln, Tiefschwarz und genau einem Blau als Akzent. Große, fette Headlines in Inter Tight, Text in Inter, runde Pill-Buttons, eine Verlaufs-Hervorhebung pro Ansicht. Für Kurse, Software, Templates und Premium-Angebote, die über Klarheit und Qualität verkaufen. Trigger diesen Skill, wenn jemand sagt: "Weißraum Pro", "Weißraum Pro-Design", "im Weißraum Pro-Stil", "wie Apple", "Apple-Look", "Weißraum-Design", "Apple-Stil", "cleanes Design", "minimalistisch hochwertig", "Tech-Look hell". Auch nutzen, wenn ein Angebot das Gefühl „Klar. Hochwertig. Mühelos.“ auslösen soll.
---

# Weißraum Pro · Brand-System

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

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

## Kurzfassung (zuerst lesen)

- **Gefühl:** Klar. Hochwertig. Mühelos. Fühlt sich an wie das Auspacken eines neuen iPhones: Nichts lenkt ab, alles sitzt, alles ist durchdacht.
- **Farben:** Weiß #FFFFFF · Hellgrau #F5F5F7 · Tiefschwarz #1D1D1F · Graphit #424245 · Steingrau #6E6E73 · Silber #D2D2D7
- **Schriften:** Inter Tight (Headlines) · Inter (Fließtext) · Inter (Eyebrow & Labels)
- **Formen:** Karten-Radius 28px, Button-Radius 980px (Pill), in Ruhe keine Schatten, beim Darüberfahren 0 14px 34px rgba(0,0,0,.08)
- **Die 5 wichtigsten Regeln:**
  1. Viel Weißraum. Im Zweifel mehr Abstand.
  2. Blau ist die einzige Akzentfarbe.
  3. Headlines groß, fett, kurz und in normaler Schreibweise.
  4. Ein Verlauf pro Ansicht, auf einem Wort.
  5. Runde Kacheln ohne Rahmen, Schatten erst beim Darüberfahren.

---

## Wirkung & Einsatz

**So fühlt es sich an:** Klar. Hochwertig. Mühelos.
Fühlt sich an wie das Auspacken eines neuen iPhones: Nichts lenkt ab, alles sitzt, alles ist durchdacht.

**Nimm dieses Design, wenn:** Deine Kundin soll denken: Das ist durchdacht. Das funktioniert einfach.

**Passt zu diesen Angeboten:**
- Online-Kurse und Programme mit klarer Struktur
- Software, Apps, Tools und Templates
- Premium-Angebote, die über Qualität verkaufen statt über Rabatt

**Branchen:** Tech, Beratung, Fotografie, Architektur, Produktivität

**Preisgefühl:** Mittel bis Premium. Wirkt teuer, ohne protzig zu sein.

**Lieber nicht, wenn:**
- Dein Angebot lebt von Nähe und Wärme
- Du brauchst viele Infos auf wenig Platz
- Deine Zielgruppe mag es verspielt

---

## Tonalität

**Ton:** Knapp, Ruhig, Selbstbewusst

- Kurze Sätze, oft nur drei Wörter
- Ein Gedanke pro Absatz
- Nutzen vor Funktion
- Keine Ausrufezeichen

| Format | Beispiel |
|---|---|
| Headline | Dein Business. Endlich sortiert. |
| Button | Jetzt starten |
| Betreff | Weniger Tabs. Mehr Ruhe. |
| Post | Sechs Wochen. Ein System. Kein Chaos mehr im Kopf. |

- **Diese Wörter passen:** einfach, klar, durchdacht, mühelos, Ruhe
- **Diese Wörter meiden:** revolutionär, krass, unglaublich, Hammer-Angebot, !!!

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 |
|---|---|---|
| Weiß | #FFFFFF | Hauptfläche |
| Hellgrau | #F5F5F7 | Kacheln, zweite Fläche |
| Tiefschwarz | #1D1D1F | Headlines und Text |
| Graphit | #424245 | Fließtext |
| Steingrau | #6E6E73 | Nebentext |
| Silber | #D2D2D7 | Linien, Rahmen |
| Blau | #0071E3 | Buttons, einziger Akzent |
| Linkblau | #0066CC | Textlinks |
| Signal-Orange | #B64400 | nur das Wort „Neu“ |
| Bühnenschwarz | #000000 | Produkt-Bühne |

### Farbregeln
- Blau ist der einzige Akzent: Buttons, Links, aktive Zustände.
- Die Fläche ist zu 80 % Weiß und Hellgrau.
- Schwarz nur als Bühne für Produkte und den Schluss-Aufruf.
- Signal-Orange nur für das Wort „Neu“.
- Keine farbigen Flächen hinter Text, keine Muster.

### Kontrast (WCAG)
| Kombination | Farben | Kontrast | Einsatz |
|---|---|---|---|
| Headline auf Weiß | #1D1D1F auf #FFFFFF | 16,8 : 1 | Fließtext ok |
| Fließtext auf Hellgrau | #424245 auf #F5F5F7 | 9,2 : 1 | Fließtext ok |
| Nebentext auf Weiß | #6E6E73 auf #FFFFFF | 5,1 : 1 | Fließtext ok |
| Button-Text auf Blau | #FFFFFF auf #0071E3 | 4,7 : 1 | Fließtext ok |
| Eyebrow auf Weiß | #B64400 auf #FFFFFF | 5,5 : 1 | Fließtext ok |
| Nebentext auf Schwarz | #A1A1A6 auf #000000 | 8,2 : 1 | Fließtext ok |

### Diagrammfarben (in dieser Reihenfolge)
1. #0071E3
2. #5E5CE6
3. #A550D8
4. #E0336B
5. #C45500

Blau ist immer die wichtigste Reihe. Bei nur zwei Werten: Blau und Steingrau.

---

## Typografie

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

| Rolle | Schrift | Details |
|---|---|---|
| Headlines | Inter Tight | 700 · 40–84 px · Laufweite −2,5 % · Zeilenhöhe 1,05 |
| Fließtext | Inter | 400 · 16–19 px · Zeilenhöhe 1,6 · Farbe Graphit |
| Eyebrow & Labels | Inter | 600 · 13–15 px · normale Schreibweise, keine Sperrung |

### Schriftgrößen
| Rolle | Werte | Beispiel |
|---|---|---|
| Hero | 84 / 1,05 / 700 | Fokus OS |
| H2 | 40 / 1,1 / 700 | Dein Business sortiert. |
| H3 | 24 / 1,2 / 600 | Sechs Wochen, ein System |
| Fließtext | 17 / 1,6 / 400 | Alles an einem Ort, endlich. |
| Klein | 13 / 1,5 / 400 | 14 Tage Rückgaberecht. |

### Typografie-Regeln
- Headlines immer in normaler Schreibweise, nie in Großbuchstaben.
- Große Headlines eng setzen (Laufweite −2,5 %), Fließtext normal.
- Pro Ansicht nur eine Verlaufs-Hervorhebung.
- Eyebrows in Signal-Orange nur für Neues, sonst Steingrau.
- **Deutsche Texte:** `lang="de"` setzen und Headlines mit `hyphens: auto` ausstatten. Headlines höchstens fünf Wörter. Lange Wörter lieber umformulieren: „Steuerberatung für Gründerinnen“ statt „Gründerinnensteuerberatung“.

---

## 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 18px · Buttons 980px (Pill) · Eingabefelder 12px · Bilder 22px
- **Schatten:** in Ruhe keine Schatten, beim Darüberfahren 0 14px 34px rgba(0,0,0,.08)
- **Raster-Abstand zwischen Karten:** 14px

---

## Layout

**Abschnitts-Rhythmus einer Salespage:**
1. Hero: Hintergrund #FFFFFF
2. Bühne: dunkle Fläche #000000
3. Vorteile: zweite Fläche #F5F5F7
4. Intro: Hintergrund #FFFFFF
5. Module: zweite Fläche #F5F5F7
6. Stimme: Hintergrund #FFFFFF
7. Produkt: dunkle Fläche #000000
8. Preise: zweite Fläche #F5F5F7
9. FAQ: Hintergrund #FFFFFF
10. CTA: dunkle Fläche #000000

Weiß und Hellgrau wechseln sich ab. Schwarz kommt nur für die großen Momente, wenn das Produkt auf die Bühne tritt.

**Erkennungszeichen: Die Verlaufs-Headline.** Genau ein Wort oder eine Zeile pro Ansicht bekommt einen weichen Verlauf von Blau über Violett zu Rosé. Alles andere bleibt schwarz auf weiß. Dazu kommt viel, viel Weißraum.

- Inhalte zentriert: Headline, darunter ein Satz, darunter zwei Aktionen (Button und „Mehr erfahren ›“).
- Kacheln im Raster mit 14 px Abstand, großzügige Innenabstände.
- Bilder groß und randlos, Produkte freigestellt.

---

## Bausteine

### Buttons
```css
.btn { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-size: 15px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  padding: 12px 24px; border-radius: 980px; transition: all .3s; }
.btn-primary { background: #0071E3; color: #FFFFFF; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,113,227,.25); }
.btn-secondary { background: transparent; color: #1D1D1F; border: 1.5px solid #1D1D1F; }
```
Pill-Form, normale Schreibweise. Blauer Button für die Hauptaktion, dazu ein Textlink „Mehr erfahren ›“. Nie mehr als zwei Aktionen nebeneinander.

### Karten und Kacheln
```css
.card { background: #F5F5F7; border: none; border-radius: 28px; box-shadow: none; padding: 32px; }
.tile { background: #FFFFFF; border: none; border-radius: 18px; padding: 22px; }
.tile:hover { box-shadow: 0 14px 34px rgba(0,0,0,.08); }
```

### Labels, Tags, Eingabefelder
```css
.label { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: #B64400; }
.tag { background: #E8E8ED; color: #1D1D1F; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
input { border: 1px solid #D2D2D7; background: #FFFFFF; border-radius: 12px; padding: 14px 16px; font-size: 16px; }
input:focus { border-color: #0071E3; box-shadow: 0 0 0 3px rgba(0,113,227,.25); }
```

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

---

## Formate

- **Social Media:** Viel Weißfläche, eine Headline mit höchstens fünf Wörtern, ein Wort im Verlauf. Story und Thumbnail auf Schwarz für Kontrast. Kein Text über Fotos.
- **Folien (16:9):** Schwarze Bühne, Headline mit Verlaufs-Wort, ein Satz darunter, drei Schritt-Kacheln in Dunkelgrau. Fortschritt als feine Punkte unten.
- **Dokumente, Workbooks, PDF:** Weißes Blatt mit großen Rändern, Headline mit Verlaufs-Wort, Merksatz in einer hellgrauen Kachel, Schreiblinien in Silber. Druckt sauber, weil es keine dunklen Flächen gibt.
- **Newsletter:** Weißer Hintergrund, Wortmarke links, Datum rechts. Ein Thema pro Mail, Headline mit Verlaufs-Wort, blauer Pill-Button. Absätze mit höchstens drei Sätzen.
- **Artefakte und kleine Tools:** Schwarzer Kopf mit Verlaufs-Titel, helle Tab-Leiste, weiße Kacheln. Schritte als nummerierte Kreise in Linkblau.
- **Salespage:** Weißer Hero mit riesiger Headline, schwarze Bühne für die Schmerzpunkte, Hellgrau für Vorteile und Preise. Das Produkt bekommt eine große Bildfläche. Schluss-Aufruf auf Schwarz.

---

## Bildsprache

Produkte freigestellt auf Weiß oder Schwarz, viel Luft drumherum. Menschen in ruhigen Momenten, natürliches Licht, keine gestellten Lächeln. Keine Collagen, keine Filter.

**Bild-Prompt-Stichworte:**
```
minimal product photography, pure white background, soft studio light,
lots of negative space, calm focused person, natural light,
premium tech aesthetic, clean and precise, no clutter
```

---

## Bewegung & Interaktion

- Inhalte blenden beim Laden sanft von unten ein (0,6 s, einmal).
- Kacheln heben sich beim Darüberfahren um 2 px und bekommen einen weichen Schatten.
- Keine Dauer-Animationen außer dem Ticker.
- Alle Übergänge 0,25 bis 0,4 Sekunden. Bei `prefers-reduced-motion` alle Animationen ausschalten.
- Tastatur-Fokus immer sichtbar: 3 px Rahmen in #0071E3.

---

## Was dieses Design NICHT ist

- Keine zweite Akzentfarbe neben Blau
- Keine Headlines in Großbuchstaben
- Keine Rahmen um Karten
- Keine Muster, Texturen oder Illustrationen
- Keine verspielten Schriften
- Keine Ausrufezeichen und keine Rabatt-Optik

---

## CSS-Variablen (kopierfertig)

```css
:root {
  --line-strong: #C7C7CC;
  --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,.16);
  --tile-dark: #1D1D1F;
  --tile-border-dark: none;
  --tag-bg-dark: #1D1D1F;
  --tag-ink-dark: #F5F5F7;
  --card-border: none;
  --tile-border: none;
  --shadow: none;
  --shadow-hover: 0 14px 34px rgba(0,0,0,.08);
  --r-pill: 999px;
  --r-icon: 50%;
  --r-chip: 12px;
  --r-bar: 999px;
  --r-avatar: 50%;
  --r-slide-tile: 10px;
  --slide-gap: 1.2cqw;
  --tab-w: 600;
  --quote-size: 20px;
  --tag-track: 0;
  --wm-tf: none;
  --focus-ring: rgba(0,113,227,.25);
  --doc-border: none;
  --strip-gap: 0px;
  --bg: #FFFFFF;
  --alt: #F5F5F7;
  --soft: #EEF4FD;
  --paper: #FFFFFF;
  --card: #F5F5F7;
  --tile: #FFFFFF;
  --tile-on-bg: #F5F5F7;
  --tile-on-soft: #FFFFFF;
  --ink: #1D1D1F;
  --ink2: #424245;
  --ink3: #6E6E73;
  --line: #D2D2D7;
  --accent: #0071E3;
  --accent-bg: #0071E3;
  --on-accent: #FFFFFF;
  --accent-text: #0066CC;
  --label: #B64400;
  --dark: #000000;
  --on-dark: #F5F5F7;
  --on-dark2: #A1A1A6;
  --label-dark: #FF8A3D;
  --accent-text-dark: #2997FF;
  --x-color: #0066CC;
  --tag-bg: #E8E8ED;
  --tag-ink: #1D1D1F;
  --focus: #0071E3;
  --ticker-bg: #FFFFFF;
  --dot: #0071E3;
  --nav-bg: rgba(255,255,255,.82);
  --tab-active: #1D1D1F;
  --r-card: 28px;
  --r-tile: 18px;
  --r-btn: 980px;
  --r-input: 12px;
  --r-media: 22px;
  --r-slide: 22px;
  --r-doc: 22px;
  --grid-gap: 14px;
  --f-display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-label: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --f-btn: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-quote: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --h-w: 700;
  --h-track: -0.025em;
  --h-lh: 1.06;
  --h-tf: none;
  --hero-size: clamp(44px,8.5vw,84px);
  --l-size: 14px;
  --l-w: 600;
  --l-track: 0;
  --l-tf: none;
  --b-size: 15px;
  --b-w: 500;
  --b-track: 0;
  --b-tf: none;
  --b-pad: 12px 24px;
  --btn-bg: #0071E3;
  --btn-ink: #FFFFFF;
  --btn-shadow: 0 8px 24px rgba(0,113,227,.25);
  --btn-sec-hover-ink: #FFFFFF;
  --input-border: 1px solid #D2D2D7;
  --input-bg: #FFFFFF;
  --star: #1D1D1F;
  --ph: linear-gradient(160deg,#F5F5F7 0%,#E3E3E8 100%);
  --ph-ink: #424245;
  --ph-chip: rgba(255,255,255,.85);
  --poll-bg: rgba(255,255,255,.14);
  --poll-ink: #F5F5F7;
  --doc-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 48px rgba(0,0,0,.08);
  --tile-hover: #FFFFFF;
  --sa-ink: #FFFFFF;
  --sa-ink2: rgba(255,255,255,.86);
  --sa-btn-ink: #0071E3;
  --f-script: 'Inter', 'Helvetica Neue', Arial, 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 Inter Tight, 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
- [ ] Mindestens ein großer Weißraum-Moment pro Ansicht
- [ ] Nur ein Verlauf pro Ansicht
- [ ] Höchstens zwei Aktionen nebeneinander