Geschichtet, nach oben wachsend, viele kleine gleiche Dinge, Farbe nach Jahreszeit — die Wiese ist keine Metapher, sie ist die Bauanleitung.
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 dieses System — auf der Website, im Thumbnail, im Reel und im Video.
Keine Hauptfarbe: fünf Felder auf einer staubigen Formel. Kühl trägt, warm würzt — die Wiese ist bunt, das Papier hält sie ruhig.
Geschichtet, nach oben wachsend, viele kleine gleiche Dinge, Farbe nach Jahreszeit — die Wiese ist keine Metapher, sie ist die Bauanleitung.
Mehr braucht es nicht. Alles Weitere ist Komposition.
Aufzähler, Kapitelmarke, Thumbnail-Ecke, Video-Wisch. Wächst immer aus dem Boden — nie hängend, nie gedreht.
Abschnitte treffen sich in einer handgeschnittenen Welle. Nie an einer geraden Linie.
Harter Versatz, 6px, kein Weichzeichner. Alles ist Papier auf Papier — wie ein geschichtetes Kartenprojekt.
Steffis Fotos sind quadratisch und von oben. Sie sitzen im Passepartout — nie beschnitten, nie rund.
Keine Hauptfarbe. Stattdessen fünf Felder — Minze, Kornblume, Rose, Honig, Distel — alle auf dieselbe Formel geschnitten: helle Fläche um 81 % Helligkeit, tiefer Schritt um 41 %, die Sättigung bleibt staubig wie Pigment auf Naturpapier. Und eine klare Gewichtung: Minze und Kornblume tragen den Alltag — zusammen mit Wolke und Tiefe sind das Steffis Töne. Rose und Honig würzen, Distel gehört den stillen Momenten.
Das Rosa spielt doppelt: als Feld Rose trägt es Flächen und Aktionen, als Marke bleibt es exakt der Logo-Ton von heute — Halme, Wortmarke, Signatur.
oklch(97.5% .006 85)oklch(93% .012 195)oklch(31% .03 222)oklch(75.4% .126 7)Jedes Feld hat eine helle Fläche (oben) und einen tiefen Schritt (unten). Die Fläche trägt Text in Tiefe, der tiefe Schritt zeichnet Halme, Linien und Akzenttext. Diese Trennung ist die ganze Kontrast-Absicherung.
81% .05 150 / 41% .055 15581% .04 215 / 40% .05 21882% .055 15 / 42% .085 1083% .065 85 / 43% .07 7581% .045 325 / 41% .06 320
--wiese
setzt den Grundton der Seite — Kanten, Schichten, Buttons. Jedes Modul darf ihn
lokal überstimmen: ein Inhalt, ein Feld. Deshalb bleiben die Vorlagen unten
beim Umschalten stehen — genau so funktioniert Saison: der Grundton dreht sich,
die Wiese bleibt bunt.
Nebeneinander nie zweimal dasselbe Feld, und mindestens ein warmes (Rose, Honig) pro Screen — das hält die Seite warm und die Rotation lebendig.
Offene Frage aus der ersten Runde. Kräftig ist der Papierschnitt: harte Kante, klare Schicht. Sanft nimmt die Linie auf einen hellen Grauton zurück und verkleinert den Versatz. Der Schalter dreht jeden Rahmen auf dieser Seite — Karten, Passepartouts, Thumbnails, Video-Frames.
| Kombination | Verhältnis | Urteil |
|---|---|---|
| Tiefe auf Papier | 12.1 : 1 | AAA |
| Tiefe auf jeder hellen Flä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 |
| Weiß 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 |
Der Logo-Ton ist unverändert #E28597 — er trägt Zeichen und Flächen,
aber nie Fließtext auf hellem Grund. Dafür ist Rose tief da. Genau diese
Trennung verhindert, dass der alte #f28ca2-Fehler zurückkommt.
Sekundärtext (Tiefe soft) bleibt auf Papier, Wolke und Weiß — auf
Farbfeldern trägt Text immer volle Tiefe.
Stempeln,
schneiden,
schichten
Muss zwei Dinge können: bei 90px Versalhöhe im Thumbnail bestehen und bei 17px nicht schreien. Platzhalter — final wird sie aus der Logoschrift abgeleitet.
Für Anleitungen, Materiallisten und 2.117 Blogposts. Warm, rund, mit ordentlichen Umlauten — Größenänderung, Fußzeile, überraschend präzise. Läuft ruhig über lange Strecken.
Gewichte 400 / 500 / 600 / 700. Mehr nicht.
Stempelwiese
Bleibt exklusiv für Wortmarke und Signatur. Nie für Fließtext, nie für Headlines, nie für Buttons. Genau das macht sie wertvoll.
| Stufe | Größe | Zeilenhöhe | Laufweite |
|---|---|---|---|
| Hero | clamp(2.6rem, 1.4rem + 5.4vw, 5.2rem) | 0.95 | −0.03em |
| H1 | clamp(2rem, 1.3rem + 3.2vw, 3.4rem) | 1.02 | −0.02em |
| H2 | clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem) | 1.10 | −0.01em |
| H3 | clamp(1.15rem, 1rem + .7vw, 1.4rem) | 1.25 | 0 |
| Fließtext | 17px | 1.65 | 0 |
| Label | 12px · 600 · Versal | 1 | +0.08em |
Abstände: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128. Keine Zwischenwerte. Freie Komposition, feste Stufen.
1280 × 720. Höchstens vier Wörter. Ein Akzent. Halm-Cluster unten links — das ist die Wiedererkennung im Feed.
A · Projekt. Farbband links, Foto im Passepartout rechts, leicht gekippt. Anleitungen tragen Minze.
B · Steffi. Für Meinung, Katalog-Check, Unboxing — Feld Honig. Gesicht rechts, Aussage links, Klecks als Bühne.
C · Zahl. Für Listen und Technik-Videos — Feld Kornblume. Die Zahl trägt, der Text erklärt.
| Wörter | höchstens 4 |
| Versalhöhe | ≥ 90px (7 % der Breite) |
| Akzent | genau eine --wiese |
| Halm | unten links, 120–160px |
| Sicherheitsrand | 48px rundum |
| Frei lassen | 180 × 60px unten rechts (Zeitstempel) |
| Nie | Text über Gesicht oder Projektmitte |
Steffis Fotos sind von oben und quadratisch. Das ist kein Zufall, sondern der Stil — das System rahmt ihn, statt ihn zu beschneiden.
Reel-Cover. Titel im Band, Marke oben, Materialbrücke unten. Weihnachtsthema → Distel.
Untertitel. Weiß auf Tiefe, 92 % Deckkraft, unteres Drittel, nie mehr als zwei Zeilen.
Feed-Post. Foto im Passepartout, Halm unten links. Fertig.
Intro · 3s. Klecks wächst, Halme wischen von unten ein, Wortmarke stempelt sich.
Lower Third · 4s. Nebel-Riegel, Halm links, zwei Zeilen. Stempelt sich von links ein.
Material-Chip · 5s. Erscheint, während das Produkt benutzt wird. Die Brücke vom Video in den Shop — die wichtigste Stelle im ganzen System.
Outro. Zwei Kacheln, harte Schicht, Halm unten links. Kein Abspann-Chaos.
Produktnamen und Artikelnummern in allen Mockups sind Platzhalter, keine echten Sortimentsdaten.
Papier verschwindet nicht. Es bewegt sich und landet. Diese Regel gilt auf der Website genauso wie im Schnittprogramm.
Stempeln · 320ms. cubic-bezier(.34,1.56,.64,1) — Buttons, Badges, Lower-Third-Auftritt.
Halm-Wisch · 520ms. 40ms Versatz je Halm. Szenenwechsel im Video, Sektions-Reveal auf der Website.
Papier-Schub · 180ms. Versatz wächst von 6 auf 10px, Karte hebt sich 2px. Mehr Hover braucht es nicht.
prefers-reduced-motion schaltet auf den sofortigen Endzustand — nicht auf ein Fade.
Damit ein Skill zuverlässig danach bauen kann, müssen die Regeln maschinell prüfbar sein. Diese sind es.
| 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 (Rose, Honig) pro Screen |
| Weichzeichner-Schatten | Harter Versatz, 6px, kein Blur |
| Foto rund oder oval beschnitten | Quadrat im Passepartout, max. 4px Radius |
| Halme hängend, gedreht, gespiegelt | Immer aus dem Boden wachsend |
| Helles Feld oder Logo-Rosa als Textfarbe | Fläche und Zeichen — Text nimmt den tiefen Schritt |
| Gerade Sektionskante | Wellenkante |
| Mehr als 4 Wörter im Thumbnail | Kürzen, bis es 4 sind |
| Hausschrift für Fließtext | Hausschrift nur für Wortmarke und Signatur |
| Globales Herunterskalieren wie bisher | clamp() mit echten Umbrüchen 600–1100px |