Brandbook · Version 2.0

Wie Essentials Concept aussieht, klingt und sich anfühlt.

Diese Seite ist die Single Source of Truth für unsere Marke. Sie löst den internen Style-Guide v1 und das HTML-Brandbook v1.5 ab und bündelt Identität, Komponenten und Anwendung an einem Ort.

Stand: 2026-06-23 Vorgänger: Brandbook v1.5 (HTML), Style-Guide v1 Gilt für: Karsten, Sven, Claudian, Sophie, alle Dienstleister

Teil A

Identität

Wer wir sind, wie wir uns nennen, wie wir aussehen, wie wir klingen. Vier Kapitel als unveränderlicher Kern. Alles ab Teil B baut darauf auf.

A1 — FoundationMission, Positionierung, Tonalität

Die drei Sätze, ohne die kein Touchpoint stimmt.

Mission

Wir helfen mittelständischen Unternehmen, eine Marke zu führen, die nicht nur sichtbar ist — sondern gebraucht wird.

Positionierung

Essentials Concept ist CEO-Sparring + Markenführung für den Mittelstand. Wir arbeiten mit Inhaberinnen und Inhabern, denen Beratung von BCG-Format zu groß ist und Werbeagenturen zu klein. Das Versprechen: in 90 Tagen vom „diffus präsent" zu „klar positioniert" — strategisch entschieden, operativ umgesetzt, intern verstanden.

Tonalität

Direkt — kein Warm-up, kommt zur Sache
Kurz — kurze Sätze, aktive Verben
Trocken — Humor sparsam, nie um zu gefallen
Kompetent ohne Arroganz — Substanz statt Statussignale
Deutsch als Standard, Englisch wenn schärfer

A2 — Logo-SystemFünf offizielle Varianten

Das Logo besteht aus Signet (geometrisches E) und Wortmarke („essentials concept"). Fünf Varianten, je nach Hintergrund. Alles außerhalb dieser fünf ist Verstoß.

01 — Primär

Signet Orange · Wortmarke Navy auf hellem BG (Cream, Weiß). Default.

02 — Invertiert

Signet Orange · Wortmarke Weiß auf dunklem BG (Navy, Foto). Default auf Navy.

03 — Orange Mono

Alles Weiß auf Orange-BG. Brand-Statements, Banner mit Orange-Fläche.

04 — Navy Mono

Alles Navy. Sonderfall für einfarbige Print-Anwendungen (Fax, Stempel).

05 — Kompakt

Signet only in Orange. Favicons, App-Icons, kleine Avatare, Social-Profile.

A2b — Mono- & Flächen-VariantenGrößengestaffelt S / M / L

Erweiterung des Logo-Systems (Stand 2026-07-28): einfarbige Mono-Varianten und Marken-Flächen-Lockups in drei responsiven Größen (S = breit/kompakt · M = Allrounder · L = groß, Signet-betont). Sie ergänzen die fünf Kern-Varianten für einfarbige Kontexte und farbige Flächen — sie ersetzen sie nicht. Default für Normalgebrauch bleibt zweifarbig (Primär/Invertiert). Vektoren + PNG: 07_CLIENTS/essentials_concept/assets/.

Orange-Mono (transparent) — Durchgehend Orange auf hellem/neutralem Grund. Einfarbige Kontexte: Stempel, Stick, One-Color-Druck.

Orange auf Weiß — Orange-Logo auf weißer Fläche.

Orange auf Navy — Orange-Logo auf Navy-Fläche. Statements, Banner mit Navy-Grund.

Navy auf Orange — Navy-Logo auf Orange-Fläche.

Logo-Tabu (verbindlich)

❌ Schwarz (`#000000`) ist nicht mehr zulässig — auch wenn `_black`-Dateien im Asset-Archiv noch existieren
❌ Verlauf, Schatten, Outline, Glow, Blur
❌ Eigene Re-Colorings außerhalb der definierten Varianten (A2 Kern-Fünf + A2b Mono-/Flächen-Matrix)
❌ Verzerrung, nicht-proportionale Skalierung
❌ Logo auf unruhigem Hintergrund ohne Cream/Navy-Sicherheitsfläche

A3 — Farben12 Tokens mit klarer Anwendungs-Hierarchie

Türkis ist DNA-only und auf EC tabu. Innerhalb der 5 Navy-Stufen gilt die Anwendungs-Hierarchie weiter unten — diese Trennung ist der häufigste Brand-Drift-Punkt im Alltag.

Token-Palette

#0F1A3A

--navy

Headlines · CTA-BG auf hellem BG · Blockquote-Body

#1A2E5A

--navy-2

Vollflächige dunkle Statement-Cards (LinkedIn, Banner)

#2A3F6A

--navy-3

Hellere Navy-Flächen (sekundäre Sektionen)

#24385C

--navy-soft

Lede-Subtext · H3 · FAQ-Body

#1A2238

--ink

Body-Text im Reading-Modus

#E85A1E

--orange

Akzent · Eyebrow · Buttons · Bubbles · Border-Lefts · Signet

#C45F24

--orange-deep

Button-Hover · Tag-Text · Quellen-Links

#F0EDE8

--cream

Heller Seiten-BG (Standard-Sektionen)

#FCFBF9

--paper

Reading-BG (Artikel-Body, Brandbook selbst)

#FFFAF2

--cream-card

Helle Karten (Reflexionsfrage, Beispiel, Quellen-Aside)

#5B6478

--muted

Meta · Lead-Untertitel · Quellen-Body

#E3DFD6

--line

Trennlinien · Card-Border · Kapitel-Top-Line

Navy-Skala — Anwendungs-Hierarchie

Die fünf Navy-Stufen sind keine Geschmacks-Sache, sondern haben unterschiedliche Rollen. Wer Navy und Navy-2 verwechselt, erzeugt visuelle Brand-Inkonsistenz, ohne dass es jemand sofort benennen kann.

Token	Rolle	Einsatz · Vermeidung
--navy	Primär-Dunkel	Headlines, CTA-Buttons, Blockquote-BG⚠ Statement-Card vollflächig: wirkt zu hart-schwarz auf großen Flächen
--navy-2	Vollflächen-Dunkel	Statement-Cards für LinkedIn/Banner, Hero-Backgrounds groß⚠ Für CTA-Buttons: zu mittig, geht im Layout unter
--navy-3	Sekundär-Dunkel	Section-Backgrounds mit weniger Gewicht, Footer-BG⚠ Für Text: zu hell, Lesbarkeit leidet
--navy-soft	Mittel-Navy-Text	H3, Lede-Untertitel, FAQ-Body⚠ Als BG: zu nah an Text-Farbe
--ink	Reading-Body	Artikel-Body mit max. Lesbarkeit auf Paper-BG⚠ Als Headline-Farbe: zu warm, Headlines verlangen --navy

Farb-Kombinations-Regeln

Orange ist Akzent, nie Fläche — außer Brand-Statement-Banner und Logo-Variante 03
Navy auf Cream ist die Default-Lese-Kombi
Cream auf Navy nur in Hero und Statement-Cards — sonst Weiß-Text auf Navy
Türkis nie in EC-Materialien — gehört zu essentials DNA
Aesthetic Skin-Palette (Space Blue, Lachshell, Gambetta) nie in EC — und umgekehrt

A4 — TypografieFieldwork Geo, vier Gewichte

Fieldwork Geo aus dem Hause TipoType (Sommaruga & Lamónaca). Nur die Geo-Subfamilie. Kein Hum, kein Italic. Vier Gewichte aktiv.

Fieldwork Geo Thin (100)

Fieldwork Geo Light (300) — Body-Default

Fieldwork Geo Regular (400)

Fieldwork Geo Bold (700) — Headlines, Strong

Typografische Regeln

Headlines: Bold (700), Letter-Spacing -0.025em, Tight Line-Height
Body: Light (300), Line-Height 1.72, max-width 720px für Lesbarkeit
Eyebrow: Bold (700), Letter-Spacing +0.16em, Uppercase, Orange
Lead/Lede: Regular (400) oder Semi-Bold (600) je nach Kontext
Tabu: Italic, Underline (außer Links), Letter-Spacing positiv im Body

Teil B

Komponenten

Die wiederverwendbaren UI-Bauteile, die Identität in jedem Touchpoint übersetzen. Jede Komponente: was sie ist, wann sie kommt, wie sie aussieht — und falls relevant: was sie ersetzt.

B01Kapitel-H2

Cream-Linie oben + Eyebrow „Kapitel XX" + Navy-H2. Klarer Schnitt zwischen Kapiteln, ersetzt frühere Bubble-Inline-Nummern.

Kapitel 01Was Vertrauen vor dem Kontakt braucht

Lede-Untertitel folgt direkt drunter (siehe B02).

B02Lede

Definitions-Satz unter jeder Kapitel-H2. Trägt das SEO-/GEO-Snippet — Antwort zuerst, 40-60 Wörter.

Vertrauen vor dem Kaufkontakt ist die Bereitschaft eines potenziellen Kunden, deinem Unternehmen Aufmerksamkeit, Zeit und Risiko zu geben, bevor er dich persönlich kennt.

B03Reflexionsfrage

Schließt jedes Kapitel. Cream-Card mit Navy-Border-Left.

Reflexionsfrage: Würde ein fremder Geschäftsführer nach fünf Minuten auf deiner Website wissen, warum er dir ein erstes Gespräch zutrauen sollte?

B04Beispiel-Box (anonymisiert)

Cream-Card mit Orange-Tag oben. Markiert anonymisierte Praxis-Fälle, expliziert „illustrativ".

Beispiel (anonymisiert, illustrativ)

Ein B2B-Zulieferer mit rund 180 Mitarbeitenden gewann technisch oft den Vergleich, verlor aber früh im Prozess. Die Analyse zeigte: Die Website erklärte Produkte, aber keine Entscheidungssicherheit.

B05Nummerierte Liste mit Orange-Bubbles

Default für `<ol>` im Artikel-Body. Bauteile mit klarer Reihenfolge.

Problemnähe. Der Kunde erkennt seine Lage wieder.
Kompetenzbeleg. Fälle statt Behauptungen.
Entscheidungssicherheit. Klar wann du passt — und wann nicht.

B06Plain-Liste mit Orange-Dot

Für Selbsttest- und Checklisten-Items, wo keine Reihenfolge gilt.

Erkennt ein Wunschkunde in 30 Sekunden, für wen dein Unternehmen da ist?
Benennst du konkrete Kundenprobleme vor deinen Leistungen?
Zeigst du Belege, bevor du Behauptungen machst?

B07Blockquote (Navy-Statement)

Pull-Quote für Kern-Aussagen. Navy-Block (`--navy`, nicht `--navy-2` — der ist für Vollflächen) mit weißem Text.

Du gewinnst keine Anfrage, weil du ein gutes Verkaufsgespräch führst. Du bekommst das Gespräch, weil dir jemand schon vorher vertraut hat.

B08CTA-Box mit Hero durchscheinend

Artikel-Abschluss-CTA. Navy-Layer 88 %→35 % über Hero-Bild des Artikels. Multi-Background im global.css, jeder Artikel setzt `--cta-hero` per Frontmatter.

Wo verlierst du Vertrauen, ohne es zu merken?

Wenn dein Selbsttest mehr als zwei Lücken zeigt, ist das ein Zugangsproblem — keine Marketing-Frage.

Vertrauensaudit anfragen

B09Quellen-Aside

Quellen-Block am Artikel-Ende. Cream-Card mit Orange-Border-Left, alle Links anklickbar, externes Linkziel.

B10IdentityBlock neu in 2.0

Zentrale Identitäts-Komponente. Wortgleich auf jeder EC-Page. Sitewide Single Source via Astro-Komponente `IdentityBlock.astro`. Trägt Schema.org-Person-Bezug.

Essentials Concept

CEO-Sparring + Markenführung für den Mittelstand. Geführt von Karsten Düh (Geschäftsleitung) und Sven Schnee (Co-Founder, Marketing Operations) aus München.

Diese Identitäts-Box ist Pflicht in jeder Substanz-Page (Pillar, Cluster, Hauptseite-Footer-nah). Variation tabu — Identität ist Wortgleich oder gar nicht.

B11Statement-Card (LinkedIn) neu in 2.0

Quadratisches Format für LinkedIn-Personal-Posts und Company-Page-Posts. Vollfläche `--navy-2` (nicht `--navy` — siehe Navy-Hierarchie A3). Top: Orange-Eyebrow. Mitte: Kern-Statement. Bottom: Attribution.

KI-Sichtbarkeit · 2026

Die nächste Generation Kunden wird dich nicht googeln. Sie wird dich erfragen.

essentials-concept.de · Karsten Düh

Spec:

1080 × 1080 px (LinkedIn-Square)
BG: #1A2E5A (--navy-2)
Top: Orange Eyebrow, 0.16em letter-spacing, Uppercase
Mitte: Bold 700, Line-Height 1.25, max 14 Wörter
Bottom: rgba(255,255,255,0.6), Domain + Attribution
Padding: 80px allseitig

B12Typografie, Spacing, Radius

Typo-Hierarchie

H1 — Artikel-Titel

Lead — der erste Satz unter dem H1, der den Artikel zusammenfasst.

Essentials Concept · Lesezeit 13 Minuten

Kapitel 01H2 — Kapitel-Überschrift

H3 — Subkapitel

Body-Text in 18 Pixel mit Line-Height 1.72. Hier kommt der eigentliche Lesefluss hin, mit Light-Weight (300) und Ink-Farbe für maximale Lesbarkeit.

Meta-Text in 0.85rem mit Muted-Farbe für Datums- und Sekundär-Infos.

Spacing-Skala (4px-Basis)

--space-1 0.5rem

--space-2 1rem

--space-3 1.5rem

--space-4 2.5rem

--space-5 4rem

Radius-Skala

6px
Button

8px
Card

12px
CTA

Teil C

Anwendung

Wo die Identität und die Komponenten konkret einlaufen. Vier Räume — Website, LinkedIn, Print, und der Tabu-Kompass, der alles abschneidet, was die Brand verwässert.

C1Website

essentials-concept.de ist die Substanz-Schaufront. Drei Page-Typen mit drei Anwendungs-Profilen.

Pillar-Page

Hero: Cream-BG, große H1, Orange-Eyebrow, Lead. TOC sticky links. Kapitel: B01-B07. Footer-CTA: B08. Pflicht-Komponenten: IdentityBlock (B10) vor dem CTA.

Cluster-Artikel

Hero: 16:9 Foto + Cream-Overlay. H1 + Lead + Meta. Body: B01-B09. Pflicht: mindestens 1 benanntes Experten-Zitat (Karsten/Sven/extern), Quellen-Aside, IdentityBlock vor CTA, FAQ-Schema-Block.

Blog-Index

2-Spalt-Kachel-Grid, Hero oben 16:9, Eyebrow+Titel+Lead+Datum darunter. Pillar prominent als Feature-Karte (Doppel-Breite).

C2LinkedIn

Zwei Sender — Karsten Düh (Personal) und Essentials Concept (Company-Page). Beide nutzen dieselbe visuelle Sprache, unterscheiden sich nur im Tonalitäts-Register (Personal = Ich-Form, Page = Wir-Form).

Banner (1584 × 396)

Navy-BG (--navy-2), Wortmarke + Tagline rechtsbündig, Avatar-Safe-Zone links 350px. Statement: max 7 Wörter. Beispiel: „CEO-Sparring · Markenführung · Mittelstand".

Square-Post (1080 × 1080)

Statement-Card (B11). Orange-Eyebrow, Kern-Statement Mitte, Attribution unten. Drei pro Welle, gleicher Look = Wiedererkennung.

Carousel-Slides

Cream-BG, Navy-Text, Orange-Akzent. Slide 1 = Hook, Slide 2-7 = Substanz, Slide 8 = CTA + IdentityBlock. Max 10 Slides.

C3Print & Office

Briefpapier und Stundennachweis sind die Pflicht-Templates. Master-Files im Vault unter 04_WISSEN/TEMPLATES/.

Briefpapier

A4. Header full-bleed Navy-Streifen mit weißem Wortmarken-Logo. Body Light (300) auf Weiß. Footer rechtsbündig 25mm Padding-Left mit Kontakt + Rechtliches in 2 Spalten. Funktionsbezeichnung Karsten: „Geschäftsleitung", nicht „Geschäftsführer".

Stundennachweis

Excel-Master mit Karstens finalem Layout (dezenter Grau-Rahmen). Backend befüllt automatisch ohne Styling zu zerstören. Print-Bereich A1:E39.

PowerPoint-Präsentationen

A4 quer (842 × 595 pt), nativ druckbar. Cover: Navy-BG + großes Orange-„E" + AES-Eyebrow + Logo dezent. Inhalt: Cream-BG, Orange-Eyebrow, Navy-Titel, viel Whitespace, Karten mit dünner farbiger Border-Left.

C4Tabu-Liste

Was Brand-Drift erzeugt. Diese Liste schließt jede Brand-Diskussion ab — wenn etwas hier steht, ist es out.

Wörter (Floskel-Tabu)

innovativ · nachhaltig · ganzheitlich · revolutionär · premium
maßgeschneidert · disruptiv · state-of-the-art · Mehrwert
authentisch · transformativ · auf Augenhöhe · Ökosystem
englische Geschwister: absolutely · great question · you're absolutely right

Farben & Logo

Türkis `#1AACB0` in EC-Materialien (DNA-only)
AES-Palette (Space Blue, Lachshell, Gambetta) in EC-Materialien
EC-Palette in AES-Materialien (Karsten-Direktive 2026-06-19)
Schwarzes Logo (auch wenn `_black`-Files existieren)
Eigene Logo-Re-Colorings außerhalb der 5 Varianten
Navy + Navy-2 verwechseln (siehe A3-Hierarchie)

Verhalten

Heilversprechen oder medizinische Aussagen (DNA-Kontext: nur „Prädispositionen")
Medizin-Sprache in AES-Materialien (HWG-/UWG-Risiko)
DNA-Outreach über Karstens EC-LinkedIn-Profil (Säulen-Vermischung)
Karsten als „Geschäftsführer" titulieren (nicht im HR eingetragen → „Geschäftsleitung")
Zustimmungs-Opener im Berater-Dialog („verstanden", „klar", „mache ich")