blush studio.
verliebt in details.

Deine Kundin soll denken: Das ist genau mein Ding. Und ich will es meinen Freundinnen zeigen.

• →Schreiben wie an die beste Freundin
• →Kurz, gern mit einem Augenzwinkern
• →Höchstens ein Emoji pro Text, am liebsten ♡
• →Echte Fotos aus der Community zeigen

Blush und Weiß wechseln sich ab, Puder für Kacheln. Lakritz als eine kräftige Pause in der Mitte, Kirschrot 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.

Was die Community am liebsten macht

Reihenfolge der Farben: #C8261A, #1A1A1A, #E0606A, #9C6B60, #C08478. Kirschrot und Lakritz zuerst, danach Rosétöne. Balken mit runden Enden.

In Headlines dürfen auch Substantive klein geschrieben werden, das gehört zum Stil. Fließtext bleibt immer in normaler Rechtschreibung. Syne ist breit: Headlines kurz halten, höchstens fünf Wörter.

Pill-Buttons in Lakritz, klein geschrieben. Beim Darüberfahren werden sie kirschrot. Auf dunklen Flächen wird der Button blush.

hol dir den 3-tage-glow-plan.

0 von 4 erledigt

So nutzt du „Blush Studio“ in deiner KI

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

---
name: blush-studio-brand
description: Junges, feminines Design in Blush-Rosa und Weiß mit Kirschrot als Akzent und Lakritz-Schwarz für Buttons. Headlines in Syne, klein geschrieben, DM Sans für Text, Caveat für Handschrift-Notizen, runde Sticker, Pill-Buttons und große Radien. Für Challenges, Mini-Kurse, Communitys, Beauty und Lifestyle. Trigger diesen Skill, wenn jemand sagt: "Blush Studio", "Blush Studio-Design", "im Blush Studio-Stil", "wie Glossier", "Glossier-Look", "Blush-Design", "Glossier-Stil", "rosa Design", "feminin jung", "Millennial Pink". Auch nutzen, wenn ein Angebot das Gefühl „Jung. Leicht. Ein bisschen verliebt.“ auslösen soll.
---

# Blush Studio · Brand-System

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

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

## Kurzfassung (zuerst lesen)

- **Gefühl:** Jung. Leicht. Ein bisschen verliebt. Fühlt sich an wie die erste Bestellung bei deiner Lieblings-Beautymarke: rosa Tüte, Sticker drin und eine Notiz, die dich angrinst.
- **Farben:** Blush #F7D9D3 · Puder #FBEDEA · Weiß #FFFFFF · Kirschrot #C8261A · Koralle-Hell #F7A8A0 · Lakritz #1A1A1A
- **Schriften:** Syne (Headlines) · DM Sans (Fließtext) · Caveat (Handschrift-Notiz)
- **Formen:** Karten-Radius 28px, Button-Radius 999px (Pill), in Ruhe keine Schatten, Sticker mit harter Kante 0 4px 0 #1A1A1A
- **Die 5 wichtigsten Regeln:**
  1. Headlines klein geschrieben, ein Wort in Kirschrot.
  2. Blush und Weiß als Flächen, Lakritz für Buttons.
  3. Runde Sticker und eine Handschrift-Notiz als Erkennungszeichen.
  4. Alles rund: Pills, große Radien.
  5. Schreiben wie an die beste Freundin.

---

## Wirkung & Einsatz

**So fühlt es sich an:** Jung. Leicht. Ein bisschen verliebt.
Fühlt sich an wie die erste Bestellung bei deiner Lieblings-Beautymarke: rosa Tüte, Sticker drin und eine Notiz, die dich angrinst.

**Nimm dieses Design, wenn:** Deine Kundin soll denken: Das ist genau mein Ding. Und ich will es meinen Freundinnen zeigen.

**Passt zu diesen Angeboten:**
- Challenges, Mini-Kurse und Mitmach-Formate
- Communitys und Abos für junge Frauen
- Beauty-, Lifestyle- und Selfcare-Produkte

**Branchen:** Beauty, Lifestyle, Selfcare, Mode, Café, Social Media

**Preisgefühl:** Einstieg. Wirkt erschwinglich und macht Lust auf mehr.

**Lieber nicht, wenn:**
- Dein Thema ist ernst und sachlich
- Deine Zielgruppe ist über 50 und mag es klassisch
- Du verkaufst 1:1-Angebote ab 2.000 €

---

## Tonalität

**Ton:** Verspielt, Ehrlich, Nahbar

- Schreiben wie an die beste Freundin
- Kurz, gern mit einem Augenzwinkern
- Höchstens ein Emoji pro Text, am liebsten ♡
- Echte Fotos aus der Community zeigen

| Format | Beispiel |
|---|---|
| Headline | glow von innen. |
| Button | jetzt mitmachen |
| Betreff | psst, tag 1 startet morgen ♡ |
| Post | 21 tage. 5 minuten am morgen. und am ende erkennst du deine haut nicht wieder. |

- **Diese Wörter passen:** glow, gemeinsam, easy, ritual, du
- **Diese Wörter meiden:** Anti-Aging, Problemzonen, perfekt, makellos, Sie

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 |
|---|---|---|
| Blush | #F7D9D3 | Hauptfarbe, Flächen |
| Puder | #FBEDEA | Kacheln, zweite Fläche |
| Weiß | #FFFFFF | Grundfläche |
| Kirschrot | #C8261A | Akzent, Sticker, Handschrift |
| Koralle-Hell | #F7A8A0 | Akzent auf Schwarz |
| Lakritz | #1A1A1A | Headlines, Buttons |
| Mokka | #3D3533 | Fließtext |
| Taupe | #6B5F57 | Nebentext |
| Rosenholz | #EDB9AE | Bildflächen, Verläufe |
| Linie | #EDD3CD | Trenner |

### Farbregeln
- Blush ist die Hauptfläche, Weiß die Pause.
- Kirschrot für Sticker, ein Wort pro Headline und den Schluss-Aufruf.
- Buttons in Lakritz, beim Darüberfahren Kirschrot.
- Keine kalten Farben, kein Grau.

### Kontrast (WCAG)
| Kombination | Farben | Kontrast | Einsatz |
|---|---|---|---|
| Headline auf Blush | #1A1A1A auf #F7D9D3 | 13,1 : 1 | Fließtext ok |
| Fließtext auf Weiß | #3D3533 auf #FFFFFF | 12,0 : 1 | Fließtext ok |
| Nebentext auf Blush | #6B5F57 auf #F7D9D3 | 4,7 : 1 | Fließtext ok |
| Weiß auf Kirschrot | #FFFFFF auf #C8261A | 5,6 : 1 | Fließtext ok |
| Kirschrot auf Weiß | #C8261A auf #FFFFFF | 5,6 : 1 | Fließtext ok |
| Button-Text auf Lakritz | #FFFFFF auf #1A1A1A | 17,4 : 1 | Fließtext ok |

### Diagrammfarben (in dieser Reihenfolge)
1. #C8261A
2. #1A1A1A
3. #E0606A
4. #9C6B60
5. #C08478

Kirschrot und Lakritz zuerst, danach Rosétöne. Balken mit runden Enden.

---

## Typografie

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&family=Caveat:wght@500;600;700&display=swap">
```

| Rolle | Schrift | Details |
|---|---|---|
| Headlines | Syne | 700 · 34–80 px · klein geschrieben · Laufweite −3 % |
| Fließtext | DM Sans | 400 · 15–17 px · Zeilenhöhe 1,6 |
| Handschrift-Notiz | Caveat | 600 · 22–36 px · nur für kurze Randnotizen |

### Schriftgrößen
| Rolle | Werte | Beispiel |
|---|---|---|
| Hero | 80 / 1,0 / 700 | glow club |
| H2 | 40 / 1,05 / 700 | 21 tage, ein ritual |
| H3 | 22 / 1,15 / 700 | deine morgenroutine |
| Fließtext | 17 / 1,6 / 400 | Jeden Morgen eine kleine Aufgabe. |
| Notiz | Caveat 26 / 1,1 / 600 | genau dein ding |

### Typografie-Regeln
- Headlines in Syne 700, immer klein geschrieben.
- Ein Wort pro Headline in Kirschrot.
- Handschrift nur für Randnotizen mit höchstens sechs Wörtern.
- Buttons und Labels klein geschrieben.
- **Deutsche Texte:** `lang="de"` setzen und Headlines mit `hyphens: auto` ausstatten. In Headlines dürfen auch Substantive klein geschrieben werden, das gehört zum Stil. Fließtext bleibt immer in normaler Rechtschreibung. Syne ist breit: Headlines kurz halten, höchstens fünf Wörter.

---

## 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 22px · Buttons 999px (Pill) · Eingabefelder 999px · Bilder 24px
- **Schatten:** in Ruhe keine Schatten, Sticker mit harter Kante 0 4px 0 #1A1A1A
- **Raster-Abstand zwischen Karten:** 12px

---

## Layout

**Abschnitts-Rhythmus einer Salespage:**
1. Hero: Tönung #F7D9D3
2. Gefühl: Hintergrund #FFFFFF
3. Vorteile: zweite Fläche #FBEDEA
4. Intro: Hintergrund #FFFFFF
5. Tage: Tönung #F7D9D3
6. Community: dunkle Fläche #1A1A1A
7. Stimmen: Hintergrund #FFFFFF
8. Preise: zweite Fläche #FBEDEA
9. FAQ: Hintergrund #FFFFFF
10. CTA: Akzentfläche #C8261A

Blush und Weiß wechseln sich ab, Puder für Kacheln. Lakritz als eine kräftige Pause in der Mitte, Kirschrot für den Schluss-Aufruf.

**Erkennungszeichen: Sticker &amp; Handschrift.** Runde Sticker, leicht schräg, mit harter schwarzer Kante unten. Dazu eine handschriftliche Notiz in Kirschrot, wie mit Kuli an den Rand geschrieben. Headlines klein geschrieben, wie eine Nachricht an die beste Freundin.

- Runde Formen überall: Pill-Buttons, große Radien, runde Sticker.
- Sticker leicht schräg auf Bildern und im Hero platzieren, nie über Text.
- Viel Bild, viel Rosa, wenig Linien.

---

## Bausteine

### Buttons
```css
.btn { font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: 0; text-transform: lowercase;
  padding: 14px 28px; border-radius: 999px; transition: all .3s; }
.btn-primary { background: #1A1A1A; color: #FFFFFF; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(26,26,26,.18); }
.btn-secondary { background: transparent; color: #1A1A1A; border: 1.5px solid #1A1A1A; }
```
Pill-Buttons in Lakritz, klein geschrieben. Beim Darüberfahren werden sie kirschrot. Auf dunklen Flächen wird der Button blush.

### Karten und Kacheln
```css
.card { background: #FFFFFF; border: none; border-radius: 28px; box-shadow: none; padding: 32px; }
.tile { background: #FBEDEA; border: none; border-radius: 22px; padding: 22px; }
.tile:hover { box-shadow: 0 10px 30px rgba(200,38,26,.12); }
```

### Labels, Tags, Eingabefelder
```css
.label { font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em; text-transform: lowercase; color: #C8261A; }
.tag { background: #F7D9D3; color: #1A1A1A; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
input { border: 1.5px solid #1A1A1A; background: #FFFFFF; border-radius: 999px; padding: 14px 16px; font-size: 16px; }
input:focus { border-color: #1A1A1A; box-shadow: 0 0 0 3px rgba(200,38,26,.18); }
```

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

---

## Formate

- **Social Media:** Blush als Fläche, Headline klein geschrieben mit einem roten Wort, runder Sticker oben rechts. Stories in Kirschrot mit Umfrage. Echte Fotos aus der Community, keine Filter.
- **Folien (16:9):** Blush-Folie mit großem Radius, Headline klein geschrieben, ein Wort in Kirschrot, drei weiße Kacheln mit runden Ecken.
- **Dokumente, Workbooks, PDF:** Weißes Blatt mit Blush-Rahmen, Tagebuch-Charakter, Tipp-Box in Blush, Schreiblinien. Druckt hell, die Farbe kommt nur aus dem Rahmen.
- **Newsletter:** Blush-Kopf mit klein geschriebener Wortmarke, „Hey Anna“, drei kurze Absätze, schwarzer Pill-Button, Gruß mit ♡. Betreff klein geschrieben.
- **Artefakte und kleine Tools:** Blush-Kopf, weiße Tabs, Kacheln in Puder mit großem Radius. Schritte als runde Kreise in Kirschrot.
- **Salespage:** Blush-Hero mit Sticker-Badge, Schmerz auf Weiß, Vorteile auf Puder, Intro mit großem Flatlay, Stimmen mit roten Sternen, Schluss in Kirschrot.

---

## Bildsprache

Helle, natürliche Fotos mit viel Rosa: Flatlays, Badezimmer, lachende Gesichter ohne Filter, echte Haut. Tageslicht von vorn. Gern mit Stickern oder Handschrift darüber.

**Bild-Prompt-Stichworte:**
```
soft pink aesthetic, millennial pink, dewy natural skin, no makeup look,
bright daylight, flatlay on pink, playful stickers,
candid laughing young women, clean bathroom shelf, fresh and youthful
```

---

## Bewegung & Interaktion

- Kacheln kippen beim Darüberfahren minimal (−0,6°).
- Sticker wackeln beim Laden einmal leicht.
- Buttons werden beim Darüberfahren kirschrot.
- Alle Übergänge 0,25 bis 0,4 Sekunden. Bei `prefers-reduced-motion` alle Animationen ausschalten.
- Tastatur-Fokus immer sichtbar: 3 px Rahmen in #C8261A.

---

## Was dieses Design NICHT ist

- Keine kalten oder grauen Töne
- Keine eckigen Formen
- Keine Headlines in Großbuchstaben
- Keine Fachsprache wie „Anti-Aging“ oder „Problemzonen“
- Nicht mehr als ein Emoji pro Text

---

## CSS-Variablen (kopierfertig)

```css
:root {
  --line-strong: #D9B8B0;
  --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,.08);
  --tile-border-dark: none;
  --tag-bg-dark: #F7D9D3;
  --tag-ink-dark: #1A1A1A;
  --card-border: none;
  --tile-border: none;
  --shadow: none;
  --shadow-hover: 0 10px 30px rgba(200,38,26,.12);
  --r-pill: 999px;
  --r-icon: 50%;
  --r-chip: 50%;
  --r-bar: 999px;
  --r-avatar: 50%;
  --r-slide-tile: 18px;
  --slide-gap: 1.2cqw;
  --tab-w: 600;
  --quote-size: 18px;
  --tag-track: 0.02em;
  --wm-tf: lowercase;
  --focus-ring: rgba(200,38,26,.18);
  --doc-border: 1.5px solid #F7D9D3;
  --strip-gap: 0px;
  --bg: #FFFFFF;
  --alt: #FBEDEA;
  --soft: #F7D9D3;
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --tile: #FBEDEA;
  --tile-on-bg: #FBEDEA;
  --tile-on-soft: #FFFFFF;
  --tile-hover: #F7D9D3;
  --ink: #1A1A1A;
  --ink2: #3D3533;
  --ink3: #6B5F57;
  --line: #EDD3CD;
  --accent: #1A1A1A;
  --accent-bg: #C8261A;
  --on-accent: #FFFFFF;
  --sa-ink: #FFFFFF;
  --sa-btn-ink: #C8261A;
  --accent-text: #C8261A;
  --label: #C8261A;
  --dark: #1A1A1A;
  --on-dark: #FFFFFF;
  --on-dark2: #D9CFCC;
  --label-dark: #F7A8A0;
  --accent-text-dark: #F7A8A0;
  --x-color: #C8261A;
  --tag-bg: #F7D9D3;
  --tag-ink: #1A1A1A;
  --focus: #C8261A;
  --ticker-bg: #F7D9D3;
  --dot: #C8261A;
  --nav-bg: rgba(255,255,255,.93);
  --tab-active: #C8261A;
  --r-card: 28px;
  --r-tile: 22px;
  --r-btn: 999px;
  --r-input: 999px;
  --r-media: 24px;
  --r-slide: 28px;
  --r-doc: 24px;
  --grid-gap: 12px;
  --f-display: 'Syne', 'Arial Black', Arial, sans-serif;
  --f-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-label: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'DM Mono', ui-monospace, Consolas, monospace;
  --f-btn: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-quote: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-script: 'Caveat', 'Segoe Print', cursive;
  --h-w: 700;
  --h-track: -0.03em;
  --h-lh: 1.02;
  --h-tf: lowercase;
  --hero-size: clamp(42px,8vw,80px);
  --l-size: 13px;
  --l-w: 600;
  --l-track: 0.02em;
  --l-tf: lowercase;
  --b-size: 15px;
  --b-w: 600;
  --b-track: 0;
  --b-tf: lowercase;
  --b-pad: 14px 28px;
  --btn-bg: #1A1A1A;
  --btn-ink: #FFFFFF;
  --btn-shadow: 0 8px 22px rgba(26,26,26,.18);
  --btn-sec-hover-ink: #FFFFFF;
  --input-border: 1.5px solid #1A1A1A;
  --input-bg: #FFFFFF;
  --star: #C8261A;
  --ph: radial-gradient(circle at 30% 30%,#FFE9E3 0,#F7D9D3 45%,#EDB9AE 100%);
  --ph-ink: #1A1A1A;
  --ph-chip: rgba(255,255,255,.88);
  --poll-bg: #FFFFFF;
  --poll-ink: #1A1A1A;
  --sa-ink2: rgba(255,255,255,.86);
  --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 Syne, Fließtext in DM Sans
- [ ] Deutsche Headlines mit Silbentrennung, keine Wörter abgeschnitten
- [ ] Auf dem Handy (400 px) einspaltig, nichts scrollt seitlich
- [ ] Tastatur-Fokus sichtbar, Bewegungen abschaltbar
- [ ] Headlines klein geschrieben
- [ ] Höchstens eine Handschrift-Notiz pro Ansicht
- [ ] Sticker überdecken keinen Text