markemacht/_markemacht.de/dev/first design/design.md

# Design-Briefing markemacht.de

### Übergabedokument für Entwickler & Designer

**Projekt:** markemacht.de
**Auftraggeber:** ADAMETZ.MEDIA / Kevin Adametz
**Status:** Verbindlich
**Version:** 1.0
**Zweck:** Vollständige Arbeitsgrundlage für Konzept, Design und Implementierung

---

## 1. Projektrahmen

markemacht.de ist keine Agentur-Website, kein SaaS-Auftritt, kein Leistungskatalog.

Die Seite ist ein **Denkraum** für Unternehmer und Geschäftsführer im Mittelstand. Sie verkauft keine Services, sondern erzeugt **Einsicht**: Besucher sollen erkennen, dass ihr Kommunikationsproblem in Wahrheit ein Markenproblem ist — und dass Klarheit baubar ist.

Die Seite ist Teil eines Drei-Säulen-Systems:

- **markemacht.de** — Denkraum und Diagnose (dieses Projekt)
- **brandwork.io** — Marken-Infrastruktur (eigenständige Anwendung)
- **adametz.media** — persönliche Autorität (eigenständige Seite)

Dieses Briefing betrifft ausschließlich **markemacht.de**.

---

## 2. Markenhaltung (kompakt)

Drei Kernsätze, die jede Design- und Inhaltsentscheidung bestehen müssen:

> Marke ist die Fähigkeit eines Unternehmens, sich selbst eindeutig zu erklären.

> Klarheit schlägt Kreativität. Struktur schlägt Maßnahmen.

> Wir erklären nicht, warum wir gut sind. Wir erklären, warum das Problem existiert.

Die Seite wirkt **ruhig, schwer, präzise**. Sie gefällt nicht — sie führt.

---

## 3. Referenzkorridor

Zwei bestätigte Referenzseiten definieren den Zielkorridor. Beide **zusammen** ergeben das Zielbild. Keine einzeln.

### 3.1 pellonium.com — liefert Gewicht und Ruhe


### 3.2 anthropic.com — liefert typografische Haltung und Wärme





## 4. Farbsystem

Verbindlich. Keine Abweichung ohne Rücksprache.

| Rolle | Hex | Einsatz |
|---|---|---|
| Primär (Basis) | `#0A0A0A` | Haupt-Hintergrund, dominante Flächen |
| Flächen 1 | `#363636` | Sektionsflächen, Karten-Hintergrund |
| Flächen 2 | `#474747` | Abgesetzte Blöcke, Trennelemente |
| Signal-Primär | `#E8175D` | Akzent, Hervorhebung, Interaktion |
| Signal-Sekundär | `#CC527A` | Hover, abgestufte Hervorhebung |
| Neutral-Grau | `#A8A7A7` | Fließtext-Sekundär, Meta-Informationen |
| Reinweiß | `#FFFFFF` | Primäre Typografie auf dunklem Grund |

### Regeln

- Signal-Primär (`#E8175D`) — nur für: Akzentlinien, aktive Zustände, Marken-Signatur, singuläre Hervorhebungen in der Typografie
- Das Magenta ist kein Schmuck. Es ist ein **Schnitt**. Es markiert, wo Klarheit entsteht.

---

## 5. Typografie-System

Die Typografie ist das zentrale Führungselement der Seite. Nicht das Bild.

### 5.1 Schriftfamilien

| Funktion | Schrift | Fallback |
|---|---|---|
| Display / Headlines | **Outfit** (geometrische Grotesk) | system-ui, sans-serif |
| Editorial / Zitate / Manifest | **Source Serif 4** oder **Instrument Serif** | Georgia, serif |
| Fließtext | **Source Sans 3** | system-ui, sans-serif |
| Meta / Code / Nummerierung | **JetBrains Mono** | ui-monospace, monospace |

Die Serif ist **neu** im System und kommt aus der anthropic-Referenz. Sie wird sparsam eingesetzt: für Manifest-Passagen, Schlüsselzitate, Section-Intros. Sie trägt die Wärme ins System.

### 5.2 Typografische Hierarchie (Empfehlung)

- **Hero-Headline:** Outfit, 72–96 px, font-weight 500, line-height 1.05, letter-spacing -0.02em
- **Section-Headline:** Outfit, 48–56 px, font-weight 500, line-height 1.1
- **Sub-Headline:** Outfit, 24–28 px, font-weight 400
- **Manifest / Zitat:** Source Serif, 32–40 px, font-weight 400, line-height 1.3, kursiv erlaubt
- **Fließtext:** Source Sans, 18 px, line-height 1.6
- **Meta / Section-Nummer:** JetBrains Mono, 13 px, uppercase, letter-spacing 0.08em

### 5.3 Typografische Regeln

- Keine Verspieltheit, keine dekorativen Schnitte, keine Ligaturen als Effekt
- Kein Wechsel zwischen mehr als drei Schriftgrößen in einer Sektion
- Maximale Textbreite im Fließtext: 65 Zeichen pro Zeile
- Überschriften dürfen den Bildrand schneiden, aber nie mittig zentriert stehen
- Hervorhebungen innerhalb von Text: ausschließlich durch Magenta-Signalfarbe auf einzelnen Worten oder kurzen Phrasen — niemals durch Bold oder Kursiv

---

## 6. Layout-Prinzipien

### 6.1 Rasterlogik

- 12-Spalten-Grid, aber **editorial interpretiert**: Inhalte dürfen 6–8 Spalten nutzen, niemals volle Breite bei Fließtext
- Asymmetrische Anordnung bevorzugt: Überschriften links, Text rechts — oder umgekehrt
- Großzügige vertikale Abstände zwischen Sektionen: mindestens 160 px Desktop, 96 px Mobile
- Horizontale Seitenränder: 5–8 % der Viewport-Breite

### 6.2 Nummerierung

Jede Hauptsektion trägt eine Nummerierung im Stil von pellonium: `[01]`, `[02]`, `[03]`.

- Platzierung: links oben in der Sektion, Monospace-Schrift
- Farbe: Neutral-Grau `#A8A7A7`
- Wirkung: Ordnung sichtbar machen, Lesefluss strukturieren

### 6.3 Negativraum

Negativraum ist Inhalt, nicht Leere. Mindestens 40 % jeder Sektion bleibt unbedruckt.

Faustregel: Wenn eine Sektion „voll" wirkt, ist sie falsch.

### 6.4 Responsive

- Mobile-First-Denken, aber Desktop-First-Inszenierung
- Breakpoints: 640 / 768 / 1024 / 1280 / 1536
- Auf Mobile: Typografie-Hierarchie bleibt intakt, nur Skalierung angepasst
- Nummerierungen bleiben auch auf Mobile sichtbar

---

## 7. Seitenarchitektur

Die Seite folgt einer fünfteiligen Argumentationskette. Keine Funnel-Logik. Keine „Features / Pricing / About"-Struktur.

### 7.1 Startseite — Die Irritation

**Funktion:** Konfrontation mit der Diagnose

**Inhaltselemente:**
- Hero mit einer einzigen Kernaussage (Beispiel): *„Wenn Sie Ihr Unternehmen nicht erklären können, haben Sie kein Marketingproblem — sondern ein Markenproblem."*
- Kein Sub-Headline-Erklärungstext darunter. Die Aussage steht allein.
- **Ein** nächster Schritt: Textlink zu „Warum Marke kein Marketingthema ist" (führt zu Sektion 7.2)
- Keine CTAs, keine Formulare, keine Logo-Leiste

**Keyvisual:** Monolith-Fragment, angeschnitten, nicht mittig

### 7.2 Das Manifest — Die Diagnose

**Funktion:** Problem sprachlich präzise benennen

**Inhaltselemente:**
- Längerer Editorial-Text (Serif), strukturiert in 4–6 nummerierten Abschnitten:
  - Warum Produkte nicht mehr gewinnen
  - Warum Vergleichbarkeit entsteht
  - Warum Marketing scheitert
  - Warum KI das Problem verschärft
- Ton: ruhig, sachlich, nicht missionarisch
- Jeder Abschnitt mit Nummerierung und kurzer Section-Headline

**Keyvisual:** Monolith-Detail oder Textur-Ausschnitt

### 7.3 Die Methode — Die Einordnung

**Funktion:** Warum Brand Engineering notwendig ist

**Inhaltselemente:**
- Denklogik der Methode in 3–5 Kernsätzen
- Keine Prozessgrafiken, keine Infografiken, keine Flowcharts
- Einfache typografische Gliederung reicht aus

### 7.4 Das System — Die Lösung

**Funktion:** Zeigen, dass die Lösung existiert

**Inhaltselemente:**
- Kurze Vorstellung der drei Säulen:
  - Denkrahmen (markemacht.de)
  - Infrastruktur (brandwork.io)
  - Autorität (adametz.media)
- Pro Säule: 2–3 Sätze, kein Icon, keine Feature-Liste
- Kernbotschaft prominent platziert: *„Klarheit lässt sich bauen — wenn man sie ernst nimmt."*

### 7.5 Der nächste Schritt — Die Entscheidung

**Funktion:** Einen einzigen logischen Einstieg anbieten

**Inhaltselemente:**
- Vorstellung des Marken-Klarheits-Audits
- Umfang, Dauer, Preisrahmen in klarer Form
- **Ein** Kontaktweg (z. B. direkter Link zu Terminvereinbarung oder Formular)
- Keine alternativen CTAs, keine Newsletter-Abfrage, keine Whitepaper-Downloads

---

## 8. Keyvisual — Der Monolith

### 8.1 Semantische Bedeutung

Der Monolith ist das zentrale Bildmotiv der Seite. Er steht für: Marken-DNA, Regelwerk, Unverrückbarkeit.

Er steht **nicht** für: Technologie, KI, Macht, Überlegenheit, Erlösung.

### 8.2 Bildregeln

- **Materialität:** Beton, Basalt, mattes Metall, dunkler Stein — nie glänzend, nie futuristisch
- **Licht:** hartes, gerichtetes Licht, klare Kanten, keine weichen Verläufe
- **Perspektive:** frontal oder leicht orthogonal, Augenhöhe — keine Heldenperspektive
- **Sichtbarkeit:** niemals vollständig, immer angeschnitten oder fragmentiert
- **Platzierung:** nie mittig, bevorzugt links oder rechts im Raster, viel Negativraum
- **Farbe:** dominant Schwarz/Dunkelgrau, Magenta nur als Kantenreflex oder Lichtlinie

### 8.3 Einsatz auf der Seite

- Hero-Sektion: reduzierte Hero-Version mit maximalem Negativraum
- Manifest-Sektion: Detail-Version (Textur, Kante, Ausschnitt)
- Übrige Sektionen: typografisch geführt, kein Bildzwang

Umsetzung möglich als: 3D-Rendering (Blender, Cinema4D), Fotografie realer Betonobjekte, oder kuratierte KI-Generierung. Alle drei Wege zulässig, solange die Bildregeln eingehalten werden.

---

## 9. Motion & Interaktion

Bewegung dient der Orientierung, nicht der Unterhaltung.

### Erlaubt

- Sanfte Scroll-Reveals bei Section-Übergängen (max. 400 ms, ease-out)
- Zurückhaltende Hover-States auf Links (Farbwechsel zu Magenta, keine Transformationen)
- Cursor-Responsivität bei interaktiven Elementen (subtiler Richtungsbezug)
- Dezente Parallax-Tiefe beim Keyvisual (max. 5 % Versatz)

### Nicht erlaubt

- Scroll-Hijacking
- Mouse-Trail-Effekte
- Animierte Gradient-Hintergründe
- Auto-Play-Videos
- „Magic Cursor"-Spielereien
- Zoom-Effekte auf Sektionswechsel
- Animierte Zahlen-Counter

> Wenn Bewegung erklären muss, warum sie da ist — entfernen.

---

## 10. Visuelle No-Gos

Absolut. Keine Ausnahme.

- Stockfotos jeglicher Art
- Menschen, Gesichter, Teams-in-Interaktion-Bilder
- Icon-Gitter als Feature-Darstellung
- Farbverläufe
- Emojis
- „Nebel-Drama" oder filmische Inszenierungen
- Neon-Effekte oder Glow
- Pastellfarben
- Kreisdiagramme, Balkendiagramme, Infografiken
- Abgerundete Container mit Schlagschatten
- Glassmorphism
- Testimonials mit Sprechblasen-Design

---

## 11. Sprachliche Leitplanken (für alle Textplatzhalter)

Falls das Design mit Platzhaltertexten oder Lorem-Ipsum gefüllt wird, gelten folgende Regeln:

- Kurze Sätze. Direkt. Feststellend.
- Keine Fragen als Headlines („Suchen Sie nach …?")
- Keine Buzzwords: *innovativ, ganzheitlich, maßgeschneidert, zukunftssicher, revolutionär*
- Keine Motivationssprache: *„Gemeinsam zum Erfolg"*
- Keine Wir-helfen-Ihnen-Sprache
- Keine Superlative ohne Substanz

Wenn echter Platzhalter nötig ist, lieber Struktur-Dummy verwenden:
```
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
```
statt Marketing-Blabla.

---

## 12. Technische Anforderungen

### 12.1 Framework & Stack

Offen — Empfehlung basierend auf Anforderungen:

- **Next.js** (React) oder **Astro** für statische Performance
- **Tailwind CSS** für konsistente Utility-Klassen
- **Vercel** oder ähnlich für Hosting mit Edge-Performance
- Headless-CMS optional (Sanity, Contentful, Payload) — wenn Redaktionspflege gewünscht ist

### 12.2 Performance-Ziele

- Lighthouse Performance: ≥ 95
- Largest Contentful Paint: < 1.5 s
- Cumulative Layout Shift: < 0.05
- Keine externen Fonts außerhalb self-hosted oder via next/font
- Bilder als WebP/AVIF mit Lazy Loading

### 12.3 Accessibility

- WCAG 2.1 Level AA als Mindestanforderung
- Kontraste: Text auf Dunkelgrund mindestens 7:1 für Fließtext, 4.5:1 für größere Headlines
- Magenta als Akzentfarbe nie als einziges Unterscheidungsmerkmal einsetzen (zusätzlich Unterstreichung oder Kontext)
- Tastatur-Navigation vollständig nutzbar
- `prefers-reduced-motion` respektieren

### 12.4 SEO-Grundlagen

- Semantisches HTML (korrekte Heading-Hierarchie, `<article>`, `<section>`)
- Meta-Descriptions handgeschrieben, keine Generierung
- OpenGraph-Bild: Keyvisual-Hero, statisch
- `sitemap.xml`, `robots.txt` vorhanden
- Strukturierte Daten (schema.org) für Organisation

### 12.5 Tracking & Privacy

- **Kein** Google Analytics
- **Kein** Facebook Pixel
- **Keine** Cookie-Banner mit Opt-in-Zwang, die den ersten Eindruck dominieren
- Alternativ: Plausible, Fathom oder serverseitiges Analytics ohne Cookies
- Datenschutz-konform ohne Einwilligungsbarriere beim Seitenaufruf

---

## 13. Domainstruktur & interne Links

- Primärdomain: `markemacht.de`
- Einzelne Content-Sektionen als separate URLs mit stabilen Pfaden:
  - `/manifest`
  - `/methode`
  - `/system`
  - `/audit`
- Keine interne Verlinkung zu `brandwork.io` oder `adametz.media` ohne klaren Grund — diese Plattformen werden nur kontextgebunden genannt
- Externer Link auf adametz.media in Footer erlaubt

---

## 14. Erfolgskriterium

Die Seite ist erfolgreich, wenn:

- Besucher **weniger** Fragen stellen (weil die Seite diese bereits beantwortet hat)
- Anfragen **konkreter** werden (weil das Problem bereits benannt ist)
- Geschäftsführer die Seite **weiterleiten**
- Menschen die Begriffe der Seite in eigenen Diskussionen verwenden

Die Seite ist **nicht** erfolgreich an:

- Verweildauer
- Seitenaufrufen
- Scrolltiefe
- Newsletter-Anmeldungen

Diese Metriken werden nicht gemessen.

---

## 15. Abgabe & Iteration

### Erwarteter Ablauf

1. Erstentwurf als Figma-Datei mit Desktop- und Mobile-Ansicht für alle fünf Sektionen
2. Review mit dem Auftraggeber — ausschließlich gegen dieses Briefing
3. Überarbeitung auf Basis dokumentierter Feedbackpunkte
4. Technische Umsetzung
5. QA gegen Performance- und Accessibility-Ziele

### Entscheidungslogik bei Konflikten

Wenn eine Design- oder Implementierungsentscheidung zwischen diesem Briefing und einer kreativen Idee abweicht:

**Das Briefing gewinnt.**

Wenn eine kreative Idee das Briefing übertreffen würde: dokumentiert vorlegen, Begründung angeben, Entscheidung beim Auftraggeber.

---

## 16. Ansprechpartner

**Auftraggeber:** Kevin Adametz
**Unternehmen:** ADAMETZ.MEDIA
**Rolle:** Methodischer Urheber, inhaltliche Letztinstanz

Alle inhaltlichen und strategischen Rückfragen gehen direkt an den Auftraggeber. Keine Delegation.

---

### Ende — Design-Briefing markemacht.de v1.0