# Stempelwiese — Design-Sprache „Wiese" **Stand:** 03.08.2026 · Entwurf 3 (bunt & staubig) · gilt für Website, YouTube, Instagram, Video Ein System, kein Baukasten. Feste Tokens, geführte Prinzipien, freie Komposition. --- ## 1. Die Idee in einem Satz Das „w" im Logo sind drei Grashalme — wir machen den **Halm** zum kleinsten Baustein der Marke und bauen daraus alles: Aufzähler, Kante, Übergang, Ecke, Bildmarke. Eine Wiese ist geschichtet, wächst nach oben, besteht aus vielen kleinen gleichen Dingen und wechselt die Farbe mit der Jahreszeit. Genau so verhält sich das Design. --- ## 2. Farb-Tokens **Leitsatz:** Keine Hauptfarbe. Fünf Felder — Minze, Kornblume, Rose, Honig, Distel — alle auf dieselbe Formel geschnitten: helle Fläche um 81 % L, tiefer Schritt um 41 % L, Chroma staubig (0.04–0.09), wie Pigment auf Naturpapier. **Gewichtung: kühl trägt, warm würzt.** Minze und Kornblume führen den Alltag — zusammen mit Wolke und Tiefe sind das Steffis Töne. Rose und Honig setzen die warmen Akzente, Distel gehört den stillen Momenten. Kontrast entsteht aus Helligkeit; Buntheit aus der Rotation der Felder, nie aus mehr Sättigung. ### Primitive | Token | OKLch | Hex | Rolle | |---|---|---|---| | `--papier` | `oklch(97.5% 0.006 85)` | `#F9F6F2` | Seitengrund, warm | | `--wolke` | `oklch(93% 0.012 195)` | `#DFEAEA` | zweite Fläche, Passepartout — Wolken-Dunst | | `--weiss` | `oklch(100% 0 0)` | `#FFFFFF` | Karten, Bildgrund | | `--tiefe` | `oklch(31% 0.03 222)` | `#1F343B` | Text, Zeichen, Kanten — tiefes Seeblau | | `--tiefe-soft` | `oklch(47.5% 0.028 220)` | `#4B6067` | Sekundärtext — nur auf Papier, Wolke, Weiß | | `--marke` | `oklch(75.4% 0.126 7)` | `#E28597` | **Logo-Ton, unverändert** — nie Fließtext | | `--rose` | `oklch(82% 0.055 15)` | `#E6B6B9` | Feld: Aktionen, Produkt des Monats | | `--rose-tief` | `oklch(42% 0.085 10)` | `#743742` | tiefer Schritt | | `--honig` | `oklch(83% 0.065 85)` | `#DBC597` | Feld: Meinung, Katalog | | `--honig-tief` | `oklch(43% 0.07 75)` | `#664A1F` | tiefer Schritt | | `--minze` | `oklch(81% 0.05 150)` | `#ABCBB0` | Feld: Anleitungen | | `--minze-tief` | `oklch(41% 0.055 155)` | `#31533D` | tiefer Schritt | | `--kornblume` | `oklch(81% 0.04 215)` | `#A5C8D1` | Feld: Technik, Listen | | `--kornblume-tief` | `oklch(40% 0.05 218)` | `#254E5A` | tiefer Schritt · zugleich `--accent` | | `--distel` | `oklch(81% 0.045 325)` | `#D0B7D1` | Feld: Weihnachten, Ruhe | | `--distel-tief` | `oklch(41% 0.06 320)` | `#59405F` | tiefer Schritt | | `--linie` | `oklch(91% 0.008 85)` | `#E4E1DB` | Trennlinien | ### Semantisch ``` --bg: var(--papier) --fg: var(--tiefe) --surface: var(--weiss) --muted: var(--tiefe-soft) --border: var(--linie) --accent: var(--kornblume-tief) --wiese: --wiese-auf: --wiese-hell: --wiese-tief: --kante: var(--tiefe) /* Rahmenfarbe */ --kante-mm: 2px /* Rahmenstärke */ ``` `--wiese` setzt den Grundton einer Seite (`data-wiese` am `body`); jedes Modul darf ihn lokal überstimmen (`data-wiese` am Modul): **ein Inhalt, ein Feld.** So bleibt die Marke bunt, ohne dass eine Farbe sie besitzt — und Saison bleibt eine Token-Änderung: der Grundton dreht sich, die Module rotieren weiter. | Feld | `--wiese` | `--wiese-tief` | Inhalt | |---|---|---|---| | Minze | `--minze` | `--minze-tief` | Anleitungen — **Grundton-Standard** | | Kornblume | `--kornblume` | `--kornblume-tief` | Technik, Listen | | Rose | `--rose` | `--rose-tief` | Aktionen, Produkt des Monats | | Honig | `--honig` | `--honig-tief` | Meinung, Katalog-Check | | Distel | `--distel` | `--distel-tief` | Weihnachten, Ruhe-Themen | Jedes Feld hat **zwei Schritte**: die helle Fläche trägt Text in `--tiefe`, der tiefe Schritt zeichnet Halme und Akzenttext. Weiß auf Farbe gibt es nur auf dem tiefen Schritt. Diese Trennung ist die ganze Kontrast-Absicherung. ### Kontrast — gerechnet | Kombination | Verhältnis | Urteil | |---|---|---| | `--tiefe` auf `--papier` | 12.1:1 | AAA | | `--tiefe` auf jeder hellen Feldfläche | 7.1 – 7.7:1 | AAA | | tiefer Schritt auf seiner Fläche | 4.9 – 5.1:1 | AA | | tiefer Schritt auf `--papier` | 7.6 – 8.4:1 | AAA | | `--weiss` auf tiefem Schritt | 8.2 – 9.1:1 | AAA | | `--marke` auf `--tiefe` | 5.0:1 | AA | | `--marke` auf `--papier` | 2.4:1 | **nur Fläche & Zeichen** | **Regeln, prüfbar:** 1. Helle Feldflächen und `--marke` sind Flächen und Zeichen — nie Fließtext auf hellem Grund. 2. Text auf einer hellen Feldfläche ist immer `--tiefe` — nie Weiß, nie `--tiefe-soft`. 3. Ein Inhalt, ein Feld — und nebeneinander nie zweimal dasselbe Feld. 4. Mindestens ein warmes Feld (Rose oder Honig) pro Screen. 5. Die Logo-Halme sind immer `--marke`. Baustein-Halme folgen `--wiese-tief`. --- ## 3. Schrift | Rolle | Familie | Einsatz | |---|---|---| | Display | **Bricolage Grotesque** 700/800 | Headlines, Thumbnails, Video-Titel | | Fließtext | **Figtree** 400/500/600 | alles Lesbare | | Zeichen | **Stempelwiese v3** (Hausschrift) | nur Wortmarke und Signatur | Bricolage steht als Platzhalter für eine Display-Schrift, die aus der Logoschrift abgeleitet werden kann. Sie muss zwei Dinge können: fett bei 90px+ Versalhöhe im Thumbnail bestehen und bei 17px Fließtext nicht schreien. ### Stufen (`clamp`, echte Umbrüche 600–1100px) ``` --t-hero: clamp(2.6rem, 1.4rem + 5.4vw, 5.2rem) / 0.95 lh / -0.03em --t-h1: clamp(2.0rem, 1.3rem + 3.2vw, 3.4rem) / 1.02 lh / -0.02em --t-h2: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem) / 1.10 lh / -0.01em --t-h3: clamp(1.15rem, 1.0rem + 0.7vw, 1.4rem) / 1.25 lh --t-body: 1.0625rem / 1.65 lh --t-small: 0.875rem / 1.5 lh --t-label: 0.75rem · 600 · 0.08em tracking · uppercase ``` ### Abstände `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128` — keine Zwischenwerte. Sektionsabstand: `clamp(64px, 8vw, 128px)`. --- ## 4. Die vier Bausteine **1 · Der Halm** — die drei Halme aus dem Logo-„w", als eigenständige Form. Aufzählungszeichen, Kapitel-Marke, Thumbnail-Ecke, Video-Wisch, Schritt-Anzeige. Immer aus dem Boden wachsend, nie hängend. Farbe = `--wiese-tief` (Logo-Halme: `--marke`). **2 · Die Kante** — Abschnitte treffen sich in einer handgeschnittenen Welle, nie an einer geraden Linie. Zwei Wellenpfade, oben und unten, aus dem Bestand übernommen. **3 · Die Schicht** — harter Versatzschatten, `6px 6px 0`, kein Weichzeichner. Alles ist Papier auf Papier. Hover: Versatz wächst auf `10px`, Karte hebt sich `2px`. **4 · Der Rahmen** — Steffis Projektfotos sind quadratisch und von oben. Sie sitzen immer in einem Passepartout aus `--wolke` mit `--weiss`-Kante, darunter eine versetzte Farbschicht. Das Foto wird nie beschnitten, nie gerundet über 4px. --- ## 5. Bewegung | Name | Kurve | Dauer | Wofür | |---|---|---|---| | **Stempeln** | `cubic-bezier(.34,1.56,.64,1)` | 320ms | Buttons, Badges, Lower-Third-Auftritt | | **Halm-Wisch** | `cubic-bezier(.22,1,.36,1)`, 40ms Versatz | 520ms | Szenenwechsel, Sektions-Reveal | | **Papier-Schub** | `cubic-bezier(.2,.8,.3,1)` | 180ms | Karten-Hover | **Regel: Nichts blendet ein.** Papier verschwindet nicht, es bewegt sich und landet. `prefers-reduced-motion` schaltet auf sofortigen Endzustand, nicht auf Fade. --- ## 6. Flächen-Regeln ### YouTube-Thumbnail (1280×720) - Höchstens **4 Wörter**, Versalhöhe ≥ 90px - Halm-Cluster immer unten links, Größe 120–160px - Genau **ein** `--wiese`-Akzent, nie zwei Akzentfarben - Sicherheitsrand 48px; unten rechts 180×60px für den Zeitstempel frei lassen - Text nie über Gesicht oder Projektmitte ### Instagram - Cover 1080×1350, Reel 1080×1920 - Untertitel: `--weiss` auf `--tiefe` bei 92% Deckkraft, unteres Drittel, max 2 Zeilen - Feed bleibt quadratisch — das ist Steffis Fotostil, nicht Zufall ### Video - Intro 3s: Klecks wächst, Halme wischen ein, Wortmarke stempelt - Lower Third: `--wolke`-Riegel, Halm links, zwei Zeilen, 4s Standzeit - **Material-Chip**: Produktname + Artikelnummer, `--weiss` auf `--wiese`, rechts unten, 5s — die Brücke vom Video zu Stampin’ Up! - Outro: Klecks, zwei Kacheln, Wortmarke --- ## 7. Die Materialbrücke Die wichtigste wiederkehrende Stelle im ganzen System. Sie sieht überall gleich aus: - **Im Blogpost**: Liste mit Miniatur, Name, Artikelnummer, Preis → Affiliate-Link zu Stampin’ Up! (es gibt keinen eigenen Shop/Warenkorb) - **Im Video**: Chip unten rechts, während das Produkt benutzt wird - **Im Reel**: gleicher Chip, oberes Drittel wegen der UI-Leiste - **Auf Produktseiten**: gleiche Karte, nur größer Immer `--wiese` als Fläche, `--weiss` als Text, Halm als Marke, harte Schicht darunter. --- ## 8. Do / Don't | Nicht | Sondern | |---|---| | Eine Hauptfarbe für die ganze Marke | Fünf Felder, eine Formel — ein Inhalt, ein Feld | | Zwei Akzentfarben in einem Bild | Eine `--wiese` pro Fläche | | Zweimal dasselbe Feld nebeneinander, alles kühl | Felder rotieren, mindestens ein warmes pro Screen | | Weichzeichner-Schatten | Harter Versatz, 6px | | Foto rund beschneiden | Quadrat im Passepartout | | Halme hängend oder gedreht | Immer aus dem Boden wachsend | | Helles Feld oder `--marke` als Text | Nur als Fläche — Text nimmt den tiefen Schritt | | Gerade Sektionskante | Wellenkante | | Mehr als 4 Wörter im Thumbnail | Kürzen, bis es 4 sind | --- ## 9. Was hier noch fehlt - Display-Schrift final: aus der Logoschrift ableiten statt Bricolage - Halm-Cluster als Icon-Font oder SVG-Sprite für die Redaktionstools - Zustandsdefinition Formulare (Fehler, Erfolg, Leer) — folgt mit dem Blogpost-Template - Blogpost-Template, das 2.117 Bestandsposts trägt