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