18 KiB
18 KiB
DESIGN.md — markemacht.de
Status: Lebendes Dokument · bildet den tatsächlichen Implementierungsstand der Live-Seiten in _markemacht.de/ ab (index.html, manifest.html, methode.html, denken.html, denken-*.html) sowie assets/css/app.css, assets/js/app.js und den Komponenten unter assets/components/.
Zweck: Aktuelle, code-treue Design-Referenz. Ersetzt das veraltete Entwurfs-Briefing unter dev/based_web_design/markemacht.de_design_system/DESIGN.md (Entwicklungsstand, nicht final).
Naming-Hygiene (Dok. 000 §7): Marke macht. · Brand Rules (Tool) · brand-rules.com (Domain) · markemacht.de · adametz.media. Die Altschreibweise brandwork.io ist unzulässig.
Hinweis: Das Design ist noch nicht final. Dieses Dokument beschreibt den Ist-Zustand; einzelne Festlegungen werden mit den nachgereichten Design-Informationen finalisiert (siehe §12 Offene Punkte).
1. Haltung (führt jede Design-Entscheidung)
- Marke ist die Fähigkeit eines Unternehmens, sich selbst eindeutig zu erklären.
- Klarheit schlägt Kreativität. Struktur schlägt Maßnahmen.
- Die Seite gefällt nicht — sie führt. Ruhig, schwer, präzise.
Die Seite ist ein Denkraum, kein Leistungskatalog. Erfolg = Besucher stellen weniger, aber konkretere Fragen.
2. Dual-Mode-System: „Wirkung“
Die Seite besitzt zwei umschaltbare visuelle Modi (Attribut data-theme auf <html>):
| Modus | data-theme |
Charakter |
|---|---|---|
| Monolithisch (Default, Referenz) | monolith |
Dunkel, hart, eckig (Radius 0), versetzte/gestaffelte Anordnung, Industrie-Anmutung |
| Editorial | editorial |
Warm, hell, leicht gerundet (Radius 4px), geordnete Anordnung, redaktionelle Wärme |
R6 — Invariant ist der Inhalt, nicht das Layout (Dok. 010: Kern fix, Form beweglich): Über beide Wirkungen bleiben Inhalt, Reihenfolge und Hierarchie identisch. Anordnung, Radius und Raum sind Ausdruck und dürfen je Wirkung abweichen. Bedingung: variierende Anordnung muss rasterbasiert/regelhaft sein (fester Raster-Schritt), nicht freihändig.
- Umschaltung über den
.wirkung-switch(Desktop ≥ 760 px) bzw. im Mobile-Drawer. - Persistenz in
localStorageunter Schlüsselmm-wirkung(app.js), mit Cookie-Fallback für robustere seitenübergreifende Zustandsübernahme. - Inline-Script im
<head>jeder Seite setzt das Theme vor dem ersten Paint (kein Flash). Fallback/Default:monolith. - Alle Tokens sind pro Modus als CSS-Custom-Properties definiert; Komponenten lesen nur Tokens, nie Hex direkt.
3. Farbsystem (CSS-Tokens, RGB-Triplets)
Farben liegen als RGB-Triplets vor, damit rgb(var(--token) / <alpha>) möglich ist.
3.1 Monolithisch (:root, [data-theme="monolith"])
| Token | Hex | Einsatz |
|---|---|---|
--color-bg-base |
#0B0B0C |
Grundfläche (--bg) |
--color-bg-surface |
#121214 |
Karten/Container + Platzhalter-Slots (--surface) |
--color-bg-elevated |
#121214 |
Karten (= surface) |
--color-bg-accent-soft |
#26262B |
Hover-Ton (= --line) |
--color-border |
#26262B |
Trennlinien, Rahmen (--line) |
--color-text-primary |
#F4F2EE |
Headlines, Primärtext (--ink) |
--color-text-body |
#E6E4E0 |
Fließtext |
--color-text-dim |
#8C8C92 |
Sekundärtext, Meta (--muted) |
--color-text-mute |
#6C6C72 |
Nav-Links inaktiv, Footer |
--color-accent |
#E8175D |
Signal-Magenta (--signal, Wert fix) |
--color-accent-soft |
#CC527A |
Abgestufter Akzent |
3.2 Editorial ([data-theme="editorial"])
| Token | Hex | Einsatz |
|---|---|---|
--color-bg-base |
#FBFAF2 |
Haupt-Hintergrund (warmweiß) |
--color-bg-surface |
#F5F4EC |
Sektionsflächen |
--color-bg-elevated |
#FFFFFF |
Karten |
--color-bg-accent-soft |
#E9E8E1 |
abgesetzte Flächen |
--color-border |
#E7E4DD |
Trennlinien (--line) |
--color-text-primary |
#191919 |
Headlines |
--color-text-body |
#1B1C17 |
Fließtext |
--color-text-dim |
#444748 |
Sekundärtext |
--color-text-mute |
#747878 |
Meta, Footer |
--color-accent |
#E8175D |
Signal-Magenta |
--color-accent-soft |
#B80046 |
dunklerer Akzent (Hover) |
3.3 Regeln (Magenta-Budget, verbindlich)
- Magenta = Signal, nicht Fläche. Der Wert (
#E8175D) wird nicht geändert — nur wo und wie viel Magenta erscheint. - R1 — Budget (Startseite): Magenta ausschließlich an: aktiver Nav-Zustand · das eine Hero-Wort „Marketingproblem“ · Mono-Signal-Labels (
SYMPTOM 0X) · 2px-Oberkante an genau einer Diagnose-Karte (03) · primärer Action-Link („Audit anfragen“ =.nav-cta). Sonst nirgends. - R2 — nie als Fläche: keine gefüllten Magenta-Pills/-Badges, keine Magenta-Hintergründe, keine Glows. Max. Magenta-Fläche = Linie/Kante ≤ 2px oder reiner Text. Hover erzeugt kein Magenta-Fill mehr.
- R3 — keine Farbverläufe: alle Gradienten entfernt. Bild-/Keyvisual-Platzhalter sind flache
--surface-Töne mit 1px-Rahmen. - R5 — Trennung über Linien, nicht Schatten: Sektionen und Karten via 1px
--line; keinebox-shadow-Tiefen. ::selectionund:focus-visiblenutzen Akzent (UA-/A11y-Funktion, nicht Dekoration).
4. Typografie
4.1 Schriftfamilien (aktuell geladen via Google Fonts)
| Rolle | Monolith | Editorial |
|---|---|---|
Display / Headlines (--ff-display) |
Outfit | Plus Jakarta Sans |
Editorial / Zitate (--ff-editorial) |
Newsreader | Noto Serif |
Fließtext (--ff-body) |
Work Sans | Plus Jakarta Sans |
Meta / Mono (--ff-mono) |
Space Grotesk | Space Grotesk |
Schrift-Regel (verbindlich, CHG-05): Jede Familie hat genau einen Job. Wenn eine Stelle keinen Job erfüllt → falsche Familie.
- Serife (
--ff-editorial) = die denkende Stimme. Nur für erhobene Aussagen (Thesen/zugespitzte Statements) + Zitate — auf Start und Manifest. Auf Denken zusätzlich der Essay-Body selbst. Sonst nirgends. - Grotesk (
--ff-display/--ff-body) = das Gebaute / die Struktur. Headlines, Karten-/Struktur-Titel, kurze Erklär-/Lead-Texte (.lead), Fließtext (.body-text), UI. - Mono (
--ff-mono) = System/Meta. Meta-Labels ([0X],SYMPTOM 0X), System-Marker, Button-Text (beide Wirkungen), Datum.
Methode ist eine Struktur-Seite → grotesk-dominant. Erklär-/Lead-Absätze nutzen
.lead(Grotesk), nicht Serife. Serife nur, wenn eine echte These oder ein Zitat auftritt.
Divergenz zum alten Entwurfs-Briefing (dort: Source Serif 4 / Source Sans 3 / JetBrains Mono). Aktuell implementiert sind die obigen Familien. Endgültige Schriftwahl + Self-Hosting offen (§12).
4.2 Typo-Skala (Tokens, clamp() = responsiv)
| Klasse | Token | Monolith | Editorial |
|---|---|---|---|
.hero-headline |
--fs-hero |
clamp(52px, 8vw, 96px) |
clamp(40px, 5.6vw, 72px) |
.section-headline |
--fs-section |
clamp(36px, 5vw, 56px) |
clamp(28px, 3.6vw, 44px) |
.sub-headline |
— | clamp(22px, 2.4vw, 32px) |
(gleich) |
.editorial |
--fs-editorial |
clamp(22px, 2.6vw, 36px) |
clamp(20px, 1.8vw, 24px) |
.body-text |
--fs-body |
18px |
16px |
.meta |
--fs-meta |
13px uppercase |
13px |
- Display-Gewicht: Monolith 500, Editorial 600. Letter-Spacing Hero −0.02em.
.meta: Monospace, Uppercase, Letterspacing 0.08em (Monolith) / 0.05em (Editorial) — die[01]-Sektionsnummern.- Hervorhebung im Text nur über
.accent(Magenta), nicht über Bold/Kursiv. - Fließtext-Breite begrenzt über
.max-prose(680px) /.max-wide(900px).
5. Layout & Raster
- Container:
--container-max1440px (Monolith) / 1280px (Editorial), zentriert via.shell. - Seitenränder:
--px-horizontalclamp(24px, 8vw, 128px)(Monolith) /clamp(24px, 5vw, 64px)(Editorial). - Vertikale Abstände:
--section-gapclamp(64px, 8vw, 96px)(beide Wirkungen);--block-gapfür.section-tight. Sektionen werden zusätzlich durch eine volle 1px---line(.section/.quote-blockborder-top) getrennt — keine Schatten als Trenner. - Raster:
.grid-12= 12 Spalten, Gap 24px. Utilities.col-1…12,.md:col-1…12,.md:col-start-1…9. - Breakpoint-Logik: Spalten-Utilities greifen ab 900px (
md:). Weitere relevante Grenzen: 720/760 (Switch, Bento), 1080/1100 (Nav-Links/CTA). - Negativraum ist Inhalt: Wirkt eine Sektion „voll“, ist sie falsch.
6. Komponenten (in app.css)
- Header-Komponente
assets/components/header.html:.nav(sticky), Desktop-Links ab 1100px (.nav-links), darunter.menu-btn+.mobile-drawer(Fullscreen-Overlay, ESC schließt)..nav-ctaab 1100px..wirkung-switchab 760px. Active-State und Wirkung-State werden zentral durchapp.jssynchronisiert. - Buttons:
.btn(gefüllt, Mono-Label in beiden Wirkungen, Hover → neutraler Ton, kein Magenta),.btn-ghost(Outline, Hover neutral),.btn-row. Der gefüllte Button ist invertiert zur Grundfläche und kippt über Tokens je Wirkung (bg = --ink,text = --bg): monolithisch = heller Button auf Dunkel, editorial = dunkler Button auf Hell. Solid + Ghost tragen denselben 1px-Rahmen → identische Box-Höhe in einer.btn-row. Icon-Glyphen einheitlicharrow_forward/arrow_downward(nichteast/south), sonst entsteht ein Pfeil-Versatz durch abweichende Glyph-Metriken. - Textlink:
.link-arrow(Unterstrich + Pfeil-Icon, Mono, Hover →--ink, kein Magenta). - CTA-Parität (verbindlich): Der Haupt-CTA einer Conversion-Sektion ist immer ein gefüllter
.btn— nie ein stiller.link-arrow. Derselbe Conversion-Schritt trägt seitenübergreifend dasselbe Gewicht (Start „Bereit für Klarheit?" = Methode[06]Audit)..link-arrowbleibt sekundären Verweisen/Überleitungen vorbehalten. - Karten:
.card(1px-Rahmen, Radius 0, keine Schatten/Lift),.card-accent-border(2px-Magenta-Oberkante, nur Karte 03),.dna-item(Methode),.post-row(Denken monolith) /.post-card+.post-card--row(Denken editorial). - Zitat:
.quote-block+.quote/.quote-dim(großes editoriales Statement). - Sektionsnummer:
.meta/.section-numim Stil[01],[02]… - Denken-Beiträge:
.blog-list-mono(monolith = Langform-Zeilen.post-row) vs..blog-list-editorial(editorial = volle-Breite-Karten.post-card--row). Kein Bildmaterial → keine Featured-/Raster-/Filter-Logik, kein „Mehr laden". Beide Wirkungen zeigen denselben Zeilen-Aufbau (Meta links, Titel + Text rechts); editorial bleibt in Karten. Ganze Zeile/Karte klickbar via Stretched-Link (.post-title-link::after), Linktext = Titel (barrierearm). - Essay-Detail (
denken-*.html):.article-head(Artikelkopf) +.prose(Lesefluss-Container, max. 680px). Im.prose: Absätze = Serife (--ff-editorial, Essay-Body = denkende Stimme),.prose-lead(größerer Einstieg),h2= Grotesk,blockquote= erhobene Aussage mit 2px-Magenta-Signal-Linie. Haupt-CTA als gefüllter.btn(CTA-Parität). - Footer-Komponente
assets/components/footer.html: Copyright, Tracking-Hinweis und die Platzhalter-Links Impressum/Datenschutz/Kontakt. - Tag/Label:
.tag— reiner Mono-Signal-Text (Versalien, Letter-Spacing ≈2px,--signal), keine gefüllte Pille. - Symptome:
.symptoms— gleiches DOM, wirkungsabhängige Anordnung (CHG-03). Invariant: Reihenfolge 01 → 02 → 03, gleiche Kartenbreite/Gewichtung, 2px-Magenta-Oberkante auf Karte 03. Editorial = geordnete 3er-Reihe (je 4 Spalten). Monolithisch = rasterbasierter Versatz (je 8 Spalten, fester Schritt +2 Spalten, links verankert → konstruiert, nicht zufällig). Ab < 720px gestapelt. - Manifest-Konsequenzen:
.manifest-cards— dieselbe Logik wie.symptoms, auf 4 Karten übertragen. Invariant: Reihenfolge 01 → 04, gleiche Gewichtung, 2px-Magenta-Oberkante (.card-accent-border) auf der letzten Karte. Editorial = geordnetes 2×2-Raster (je 6 Spalten). Monolithisch = Treppe mit gleichem Schritt +2 Spalten (je 6 Spalten, letzte Karte an der rechten Kante). Ab < 720px gestapelt. - Serif-Kommentar:
.comment— markiert einen Serif-Absatz (Denk-Stimme) als Annotation: eingerückt mit 2px-Magenta-Strich links (border-left, Magenta = Linie ≤2px, kein Fläche). - Editorial-Split:
.split+.split-visual(Methode: Theorie → Praxis), flacher Slot. - Icons: Material Symbols Outlined (nur funktional: Pfeile, Menü, Schließen).
Theme-spezifische Sichtbarkeit: .only-mono / .only-editorial, .blog-list-mono / .blog-list-editorial schalten einzelne Layout-Varianten pro Wirkung. Das Symptom-Layout ist vereinheitlicht (kein .symptoms-mono / .symptoms-editorial mehr).
7. Radius & Form
Radius ist ein Wirkungs-Token (R4/CHG-06), nicht global. Ein einziger Wert --radius pro Wirkung, der auf alle Elemente angewandt wird (Karten, Buttons, Bild-Slots, Wirkung-Toggle). Die Legacy-Tokens zeigen auf --radius.
| Token | Monolith | Editorial |
|---|---|---|
--radius (Quelle) |
0px |
4px (Startwert) |
--radius-card |
var(--radius) |
var(--radius) |
--radius-btn |
var(--radius) |
var(--radius) |
--radius-pill |
var(--radius) |
var(--radius) |
Der Unterschied ist gewollt und trägt die Wirkung: monolithisch durchgehend eckig, editorial durchgehend gleich leicht gerundet — kein gemischter Radius innerhalb einer Wirkung. (:focus-visible nutzt unabhängig davon einen 2px-Ring.)
8. Keyvisual — Der Monolith
- Bedeutung: Marken-DNA, Regelwerk, Unverrückbarkeit. Nicht: Macht, KI, Technologie, Erlösung.
- Aktueller Stand: flacher Platzhalter-Slot (
.monolith,.monolith--edge,.monolith--texture) —--surface-Ton + 1px---line, keine Gradienten/Glows, Radius 0. Positionierung rechts, angeschnitten/randständig, nie mittig, viel Negativraum (CHG-08). Slot-Format/Position bleiben reserviert bis zum echten Asset. - Zielbild (Dok. 19): Beton / Basalt / mattes Metall, hartes gerichtetes Licht, frontal/Augenhöhe, fragmentiert. Umsetzung als 3D-Render, Foto realer Betonobjekte oder kuratierte KI-Generierung. Realer Asset noch offen (§12).
- Verboten: Menschen, Gesichter, Stockfotos, Symbolik, Nebel-Drama, Glow, Farbverläufe als Emotion.
9. Motion & Interaktion (app.js)
- Scroll-Reveal:
[data-reveal]via IntersectionObserver, max 400 ms ease-out (--transition-reveal), optionaldata-reveal-delay. - Transitions:
--transition-fast150ms ·--transition-medium300ms (Theme-Wechsel) · Reveal 400ms. prefers-reduced-motionwird respektiert (Reveals sofort sichtbar, keine Transitions).- Erlaubt: dezente Hover-States (Farbwechsel zu neutralem Ton/
--ink, nicht zu Magenta), Theme-Crossfade. Nicht erlaubt: Scroll-Hijacking, Mouse-Trails, Auto-Play, animierte Gradients, Zahlen-Counter.
10. Accessibility
:focus-visiblemit Magenta-Outline + Offset; Skip-Link „Zum Inhalt springen“.- Semantik:
<nav>,<header>,<main id="main">,<section>,<article>, korrekte Heading-Hierarchie. - ARIA: Drawer (
aria-hidden,aria-controls,aria-expanded), Wirkung-Switch (role="group",aria-pressed). - Magenta nie als einziges Unterscheidungsmerkmal (zusätzlich Unterstrich/Kontext).
- Eigene
@media print-Regeln (Serif, Schwarz/Weiß, Nav/Footer/Keyvisual ausgeblendet). - Ziel: WCAG 2.1 AA.
11. Seitenstruktur (Ist-Stand)
| Seite | Datei | Inhalt (Kurz) |
|---|---|---|
| Start | index.html |
Hero (Diagnose-These) · Symptome [01] · Zitat · Kernthese · Audit-CTA |
| Manifest | manifest.html |
Hero · Einleitung · Zentralthese · Vier Konsequenzen · Überleitung |
| Methode | methode.html |
Hero „Brand Engineering“ · Haltung · Theorie→Praxis · Fünf DNA-Bausteine · Der Architekt · Audit-Überleitung |
| Denken | denken.html |
Blog-Übersicht (monolith Langform-Zeilen / editorial volle-Breite-Karten, ohne Bilder) — jeder Beitrag verlinkt auf seine Detailseite |
| Beitrag (Detail) | denken-*.html |
Essay-Detailseite: Artikelkopf (Meta · Titel · Dek) · Essay-Body (Serife) · Weiterlesen · Audit-CTA. Vorlagen: denken-agilitaet, denken-architektursanierung, denken-fuehrung-durch-reduktion |
| Audit | audit.html |
Eigene Anfrage-Seite: Diagnose-These · typische Auslöser · Ablauf · Mailto-Anfrage |
- Navigation (kanonisch): Start · Manifest · Methode · Denken · CTA „Audit anfragen“ (→
audit.html). - Marken-DNA in
methode.html= exakt die fünf Bausteine aus Wissensdokument 002 (Identitätskern, Positionierungslogik, Sprach-/Tonalitätsregeln, Themen-/Relevanzrahmen, Entscheidungs-/Grenzregeln). - Footer: Copyright + „Keine Cookies, kein Tracking.“ + Links Impressum/Datenschutz/Kontakt (aktuell
#-Platzhalter).
12. Offene Punkte (vor „Design final“ zu entscheiden)
- Dual-Mode behalten? Bleiben beide Wirkungen (monolith + editorial) dauerhaft, oder wird auf eine finalisiert?
- Schriftwahl + Self-Hosting: aktuelle Familien bestätigen oder auf Briefing-Familien angleichen; Google-Fonts → self-hosted (Performance/Privacy).
- Echter Monolith-Asset statt CSS-Platzhalter (3D/Foto/KI gemäß Dok. 19).
- Footer-Links mit echten Zielen belegen (Impressum, Datenschutz, Kontakt
info@markemacht.de). - Audit: Anfrageprozess/Formular finalisieren; aktuell eigene Seite
audit.htmlmit Mailto-Anfrage. - Dok. 19 (Keyvisual-Briefing) ist als veraltet markiert und sollte mit diesem Stand harmonisiert werden (u. a. Akzent = Magenta, nicht „Blau“).
- Doppelter Projektordner
Marke Macht 2/entfernen/ignorieren — kanonisch ist_markemacht.de/.