166 lines
No EOL
14 KiB
Markdown
166 lines
No EOL
14 KiB
Markdown
# 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 `--line` trennen. Keine `box-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 `--line` getrennt). **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" |