14 KiB
Marke macht. — Designkorrekturen (Schritt 1: Design)
Scope: Nur Erscheinungsbild, Struktur, Token — seitenübergreifend (Start, Manifest, Denken). Keine Copy-Änderungen (das ist Schritt 2). Bilder kommen als letzter Schritt — hier nur Platzhalter-Regeln. Referenz-Variante: „monolithisch" (dunkel). Regeln gelten für beide Wirkungen, außer wo explizit eine Variante genannt ist. Grundsatz für alle Änderungen: Magenta = Signal, nicht Fläche. Jede Schrift hat einen Job. Kanten sind hart (monolithisch) bzw. leicht weich (editorial). Invariant ist der Inhalt, nicht das Layout.
1. Design-Token (Source of Truth)
Bestehende Werte beibehalten, wo vorhanden. Hex-Werte sind Startwerte zum Kalibrieren.
Farbe
| Token | monolithisch (dunkel) | editorial (hell) | Zweck |
|---|---|---|---|
--bg |
#0B0B0C |
bestehender Creme-Ton | Grundfläche |
--surface (Karten) |
#121214 |
#FFFFFF |
Karten/Container |
--ink |
#F4F2EE |
near-black | Haupttext |
--muted |
#8C8C92 |
gedämpftes Grau | Sekundärtext |
--line |
#26262B |
#E7E4DD |
Trennlinien, Rahmen |
--signal (Magenta) |
bestehender Magenta-Token (≈ #F31E6B) |
identisch | nur Signal |
Magenta-Wert nicht ändern. Geändert wird ausschließlich, wo und wie viel Magenta erscheint (siehe §2 und CHG-01).
Schrift-Rollen
| Token | Familie (bestehend) | Job |
|---|---|---|
--font-grotesk |
eure Grotesk, eng/schwer | Headlines, Sektions-Titel, Karten-Titel — die „gebaute" Stimme |
--font-serif |
eure Serife | Denk-Stimme: Zitate + Manifest + Denken-Essays |
--font-mono |
eure Monospace | System/Meta: Sektions-Labels, Symptom-Labels, Button-Text, Datum |
Form / Radius (Wirkungs-Token — bewusst unterschiedlich)
| Token | monolithisch | editorial | Zweck |
|---|---|---|---|
--radius |
0 |
8px (umgesetzt) |
Härte-vs-Weichheit als Träger des Wirkungsunterschieds |
Der Radius ist gewollt ungleich: monolithisch eckig/Beton, editorial etwas weicher. Im editorial ein Radius-Wert konsequent auf alle Elemente (Karten, Buttons, Slots, Toggle, Filter), damit „weicher" nicht in „verspielt" kippt.
2. Globale Regeln (gelten für die ganze Seite)
- R1 — Magenta-Budget: Magenta erscheint ausschließlich an diesen Stellen: aktiver Nav-Zustand · das eine Hero-Wort „Marketingproblem" · Mono-Signal-Labels (
SYMPTOM 0X) · 2px-Oberkante an genau einer Diagnose-Karte · primärer Action-Link („Audit anfragen"). Sonst nirgends. - R2 — Magenta nie als Fläche: keine gefüllten Magenta-Pills/-Badges, keine Magenta-Hintergründe, keine Glows. Max. Magenta-Fläche pro Element = Linie/Kante bis 2px oder reiner Text.
- R3 — Keine Farbverläufe: alle Gradienten raus (Hero-Bildfläche, Karten-Bildflächen, weiche Glows). Platzhalter = flacher Flächenton in
--surface/--line, kein Verlauf. - R4 — Radius ist Wirkungs-Token, nicht global:
--radius=0(monolithisch), kleiner einheitlicher Wert ≈4px(editorial). Der Unterschied ist gewollt und trägt die Wirkung; nicht global vereinheitlichen. - R5 — Trennung über Linien, nicht Schatten: Sektionen und Karten durch 1px
--linetrennen. Keinebox-shadow-Tiefen. - R6 — Invariant ist der Inhalt, nicht das Layout: Über beide Wirkungen bleiben Inhalt, Reihenfolge und Hierarchie identisch (Kern). Anordnung, Radius, Raum sind Ausdruck und dürfen je Wirkung abweichen (Dok. 010: Kern fix, Form beweglich). Bedingung: variierende Anordnung muss rasterbasiert/regelhaft sein, nicht freihändig.
- R7 — Schrift-Job-Test: für jede Magenta-Stelle und jede Serif-Stelle muss in einem Satz begründbar sein, warum sie dort steht. Wenn nicht → Dekoration → entfernen.
- R8 — Stimmen-Regel (seitenübergreifend): Die Rolle der Serife ist konstant = „die denkende/erhobene Stimme". Ihr Umfang richtet sich nach Inhaltstyp:
- Serife → erhobene Aussagen, Zitate, reflektierende Schlusssätze (Start, Manifest) und der laufende Essay-Body auf Artikel-Seiten (Denken).
- Grotesk → Headlines, Karten-/Strukturinhalte, kurze diagnostische Erklär-/Teaser-Texte, UI.
- Mono → Meta-Labels, System-Marker, Button-Text, Datum. Kein Schriftwechsel innerhalb eines zusammenhängenden Gedankens; wo Stimme und Struktur aufeinandertreffen, entscheidet Hierarchie (siehe CHG-09), nicht ein Mix.
3. Konkrete Änderungen
CHG-01 — Magenta-Pills durch Magenta-Text ersetzen
Wo: alle Label-Pills (z. B. SYMPTOM 01/02/03; im hellen Layout zusätzlich Kategorie-Tags, sofern vorhanden).
Statt: Text in gefüllter Magenta-Pille.
Soll: Label in --font-mono, Versalien, Letter-Spacing ≈ 2px, Farbe --signal, kein Hintergrund, kein Border.
Prüfkriterium: keine gefüllte Magenta-Fläche mehr im DOM; Labels lesen als reiner farbiger Mono-Text.
CHG-02 — Verläufe entfernen (Platzhalter)
Wo: Hero-Bild-Slot (rechts oben), alle Karten-Bildflächen, dekorative Glows.
Soll: flacher Flächenton (--surface bzw. 1 Stufe neben --bg), kein linear-/radial-gradient. Slot-Format und Position bleiben.
Prüfkriterium: kein gradient() in den betroffenen Flächen; Platzhalter ist einfarbig matt.
CHG-03 — Symptom-Karten: Anordnung je Wirkung gewollt unterschiedlich
Wo: Sektion [01] DIAGNOSE.
Soll: Anordnung bleibt bewusst verschieden — monolithisch versetzt/gestaffelt, editorial geordnet. Invariant über beide Wirkungen: Reihenfolge 01 → 02 → 03, gleiche Gewichtung der drei Karten, Magenta-Kante auf Karte 03 (siehe CHG-04).
Bedingung: Der Versatz im monolithischen Bereich ist rasterbasiert — ein konsequenter, gleicher Versatz-Schritt, an der Baseline verankert (liest sich als konstruiert/engineered, nicht als zufälliger Scatter).
Prüfkriterium: Reihenfolge und Hierarchie in beiden Varianten gleich; der Versatz folgt einem festen Raster-Schritt, nicht freien Pixelwerten.
CHG-04 — Diagnostische Kante nur an Karte 03
Wo: Symptom-Karten.
Soll: Karte 01 und 02 = Oberkante 1px --line. Karte 03 (zugespitzt) = Oberkante 2px --signal. Sonst keine farbigen Kanten.
Prüfkriterium: genau eine Karte trägt eine Magenta-Kante.
CHG-05 — Schrift-Rollen sauber zuordnen
Wo: ganze Seite. Soll:
--font-grotesk: Hero-H1, „Drei Anzeichen…", „Textklarheit erzwingt Denkklarheit", Karten-Titel.--font-serif: nur das Zitat „Marke ist kein Gefühl. Marke ist ein Regelwerk." — zweite Zeile in--muted.--font-mono:[00]/[01]/[02],SYMPTOM 0X, Button-Text, Datum.- Diagnose-Fließtext (Symptom-Beschreibungen) bleibt Grotesk/Sans, gedämpft — keine Serife. Prüfkriterium: Serife taucht auf Start ausschließlich im Zitat auf.
CHG-06 — Radius als Wirkungs-Token umsetzen
Wo: Karten, Buttons, Bild-Slots, Wirkung-Toggle, Filter-Elemente.
Soll: border-radius: var(--radius) mit --radius: 0 (monolithisch) und --radius: 8px (editorial — umgesetzt; 4px war zu wenig Differenz). Im editorial derselbe Wert auf alle genannten Elemente.
Prüfkriterium: monolithisch durchgehend eckig; editorial durchgehend gleich leicht gerundet — kein gemischter Radius innerhalb einer Wirkung. Obergrenze ~8px, sonst verliert auch editorial die „Beton"-Härte.
CHG-07 — Sektions-Trennung & Rhythmus
Wo: zwischen allen Sektionen.
Soll: volle 1px-Trennlinie --line; vertikales Sektions-Padding großzügig (Startwert clamp(64px, 8vw, 96px)); keine Schatten als Trenner.
Prüfkriterium: Sektionsgrenzen sind Linien, keine Schlagschatten.
CHG-08 — Hero-Bild-Slot vorbereiten (für späteren Bild-Schritt)
Wo: Hero, rechts oben.
Soll: Slot bleibt reserviert, angeschnitten (darf Viewport/Containerkante schneiden), viel Negativraum, Kante per var(--radius). Bis zum Bild: flacher --surface-Ton ohne sichtbaren Rahmen (sonst liest sich der leere Slot als „Bild fehlt" statt als gewollter Raum).
Prüfkriterium: Slot ist rechteckig, randständig, ohne Verlauf, ohne wirkende Platzhalter-Umrandung.
CHG-09 — Hervorgehobene Aussage (Lead-Muster, seitenübergreifend)
Wo: erhobene Kern-Aussagen (z. B. Manifest-Lead „In den meisten Unternehmen wird »Marke«…").
Soll: Serife, leicht eingerückt, mit linker 2–3px---signal-Rule. Eine evtl. nachfolgende, erläuternde Fortsetzung bleibt zurücktretender Sans-Body in --muted. Die Magenta-Rule macht den Schrift-/Gewichtswechsel als gewollte Hierarchie lesbar, nicht als Bruch.
Prüfkriterium: Lead = Serife + Magenta-Rule + Einrückung; Fortsetzung = Sans/gedämpft; kein Schriftwechsel ohne dieses Hierarchie-Signal.
CHG-10 — Karten als ein System (seitenübergreifend)
Wo: Symptom-Karten (Start), Konsequenz-Karten (Manifest), Bausteine (Methode), Index-Einträge (Denken). Soll: eine gemeinsame Karten-Sprache: Mono-Magenta-Label, Grotesk-Titel, Sans-Body; Anordnung je Wirkung (gestaffelt monolithisch / geordnet editorial, rasterbasiert). Für die Magenta-Hervorhebung gilt eine Set-Typ-Unterscheidung:
- Argument-Set (steigert sich auf eine Pointe zu: Start-Symptome, Manifest-Konsequenzen) → genau eine Karte trägt die 2px-
--signal-Oberkante, und zwar die inhaltlich stärkste/zugespitzte (Climax, nicht nur „die letzte"). - Aufzählungs-Set (gleichwertige Elemente ohne Zuspitzung: Methode-„Fünf Bausteine", Denken-Index) → keine Hervorhebung, keine Magenta-Kante. Gleichgewichtung ist hier die Aussage. Das gilt ausdrücklich auch für „Grenzregeln": trotz des thematischen „roten Bereichs" keine Sonder-Kante, da sich das Set nicht zuspitzt. Prüfkriterium: identische Karten-Tokens über alle Seiten; Argument-Sets genau eine Magenta-Kante (auf der stärksten Karte); Aufzählungs-Sets keine.
Denken (Index + Artikel)
CHG-11 — Denken-Index: bildlose Liste, gleichgewichtet
Wo: Übersichtsseite „Denken". Soll:
- Form: Beitrags-Liste über die volle Breite in beiden Wirkungen (Meta links: Kategorie + Datum; rechts: Titel + kurzer Teaser; Einträge durch Haarlinien
--linegetrennt). Kein Karten-/Bild-Grid. Der Wirkungsunterschied wird über Farbe/Kontrast/Radius getragen, nicht über Liste-vs-Grid. - Typo: Seiten-Intro („Ein Denkraum für Klarheit…") = Serife (erhobene Stimme); Beitrags-Titel = Grotesk; Teaser = Sans/gedämpft; Meta (Kategorie, Datum) = Mono.
- Bilder: keine dekorativen Beitragsbilder/Thumbnails. Ausnahme nur, wenn ein Bild selbst Substanz ist (Diagramm/Struktur-Skizze, die das Argument trägt). Der eine reservierte Marken-Hero-Slot oben darf bleiben; die Beitragsliste bleibt bildlos.
- Gewichtung: alle Beiträge gleich behandelt, chronologisch. Kein „Featured", keine Hervorhebung, keine Magenta-Kante auf einzelnen Beiträgen. Hervorhebung passiert ausschließlich extern (Social/Newsletter), nie im Verzeichnis selbst. Prüfkriterium: identische Listenform in beiden Wirkungen; keine Beitragsbilder; kein Eintrag visuell bevorzugt; Serife nur im Intro.
CHG-12 — Kein Filter-UI (vorerst); Kategorien nur als Labels
Wo: Filterzeile und Kategorie-Auszeichnung der Beiträge. Soll: Die interaktive Filterzeile (Alle / Diagnose / Einordnung / System) entfernen — bei wenigen Beiträgen täuscht sie eine Bibliothek vor („kein Rauschen"). Wieder einführen erst ab Umfang, der nicht mehr überfliegbar ist (Daumenwert ~12–15 Beiträge). Bis dahin chronologisch. Die drei Kategorien bleiben als Labels am Beitrag: Magenta-Mono-Text (wie CHG-01), keine Pillen, keine Verläufe. Prüfkriterium: keine Filter-Schaltflächen auf dem Index; Kategorie erscheint nur als Mono-Magenta-Label je Beitrag.
CHG-13 — Artikel-Body = Serife (greift R8 auf der Lese-Seite) · ✅ umgesetzt
Wo: Detail-/Artikel-Template eines Denken-Beitrags. Soll: der laufende Essay-Body = Serife (lange Lesestrecke, Denkraum-Stimme); Zwischenüberschriften = Grotesk; Standfirst/Zusammenfassung = Grotesk/Sans; Meta/Marker = Mono; hervorgehobene Aussagen/Zitate nach CHG-09. Magenta nur als Signal (Links, aktiver Zustand), nie als Fläche. Kontextueller Abschluss-CTA = gefüllter Button mit artikelspezifischem Titel. Prüfkriterium: Fließtext des Artikels ist Serife; Struktur-/Meta-Elemente Grotesk bzw. Mono. Status: umgesetzt (Detailseite steht).
CHG-14 — Fixed-Header-Offset (funktional, seitenübergreifend)
Wo: alle Seiten mit fixierter Nav (Nav ist dauerhaft oben am Bildschirm).
Soll: Nav erhält einen deckenden Hintergrund (--bg der jeweiligen Wirkung), damit darunterlaufender Inhalt nicht durchscheint. Inhalt bekommt scroll-padding-top in Nav-Höhe (plus kleiner Puffer), damit angesprungene Anker/Überschriften und das Standfirst nicht hinter der Nav verschwinden.
Prüfkriterium: kein Text wird beim Scrollen/Ankern von der Nav verdeckt; Standfirst vollständig sichtbar (Regressionsfall: langes Standfirst monolithisch).
CHG-15 — Long-Form-Typografie (Artikel-Body) · ✅ umgesetzt
Wo: Artikel-Template (Serif-Body), gilt für alle künftigen Beiträge.
Soll: Absatzabstand zwischen <p> ~1em; Zeilenhöhe Serif-Body ~1.6–1.7; Lead-Absatz nur leicht größer als Body (Hierarchie, kein Größensprung mitten im Text), im monolithischen zusätzlich gedämpft. Eigenständige Gedanken stehen als getrennte Absätze, nicht als Block.
Prüfkriterium: sichtbarer Abstand zwischen Absätzen; Body atmet; Lead→Body liest sich als Hierarchie. Status: umgesetzt (Stand „Führung durch Reduktion").
4. Bewusst NICHT geändert
- Inhalte/Copy bleiben unverändert (Schritt 2).
- Wirkung-Schalter bleibt; er ist die Demonstration „Form beweglich, Inhalt fix".
- Magenta als Markenfarbe ist gesetzt (bewusste Entscheidung); Dok. 19 ist hier ausgeklammert.
- Bildmotive (Monolith o. a.) folgen im letzten Schritt, je Variante.
5. Weiterer Punkt
- WP-1: Wortmarke schreibweise „MARKE MACHT"