# CI-Guide Emma Woelk · Frontend > Maschinenlesbare Markenreferenz für Emma Woelk — Marketing & Sales, > ein Unternehmen der roboconsulting SL, Barcelona. > Die Marke nach außen: Website, Decks, Anzeigen, Mail, Print. > > Zwei Teile, eine Datei je Teil: > - https://ci.emmawoelk.com/llms-frontend.txt (diese Datei) > - https://ci.emmawoelk.com/llms-social.txt Erzeugt aus https://ci.emmawoelk.com/. Nicht von Hand bearbeiten — Änderungen werden beim nächsten Build überschrieben. Quelle: https://ci.emmawoelk.com/ Quelle-SHA256: 951d38f8d3bc3bb868b462e3436fb9169dddf968e0727fc9812d75806d57dee0 ## Dateiverzeichnisse Einzelne Dateien stehen nicht hier. Zwei JSON-Indexe tragen sie, jeweils mit Name, Gruppierung und Bytegröße: - https://ci.emmawoelk.com/logos/index.json — 12 Logodateien, SVG. Sechs Lockups, je für hellen und dunklen Grund. - https://ci.emmawoelk.com/icons/index.json — 2066 Icons, Lucide 1.41.0, ISC. Dateien unter /icons/.svg. 217 davon kuratiert. - https://ci.emmawoelk.com/fonts/fonts.css — Barlow, Barlow Condensed und Inter, SIL Open Font License, 16 woff2-Dateien. Liest das gerade eine Maschine? [ci.emmawoelk.com/llms.txt](https://ci.emmawoelk.com/llms.txt) trägt dieselben Regeln als Klartext, bei etwa einem Drittel der Tokens, und verweist auf [/logos/index.json](https://ci.emmawoelk.com/logos/index.json) und [/icons/index.json](https://ci.emmawoelk.com/icons/index.json) für die Dateilisten. Die Datei wird aus dieser Seite erzeugt, die beiden können also nicht auseinanderlaufen. Emma Woelk verkauft Eigenständigkeit. Wer Unternehmen beibringt, ihr Marketing selbst zu machen, muss selbst erkennbar sein — sonst verkauft sie eine Fähigkeit, die sie nicht vorführt. Dieser Guide hält diese Linie. In jedem Asset, in jedem Kanal, auch dann, wenn eine Maschine das Asset baut. ## 01 Die Marke auf einer Seite **Was wir sind** Live-Coaching für Marketing und Vertrieb, 1:1 und in der Gruppe. Sechs Coaching-Stränge auf einem Programm: Marketing, Website, KI-Tools, Sales, Automatisierung, SEO. Über 20 Jahre Praxis, über 250 Projekte, drei selbst aufgebaute Agenturen. Sitz der Firmierung: roboconsulting SL, Barcelona. Das Programm heißt **Mission Agenturfrei**. Die Firmierung heißt **Emma Woelk — Marketing & Sales**. **Mit wem wir reden** Geschäftsführer, Gründer und Marketingverantwortliche im deutschsprachigen Mittelstand. Menschen, die eine Agentur bezahlen und trotzdem nicht wissen, warum der Umsatz schwankt. Sie wollen keine Vision, sie wollen den Hebel und den nächsten Schritt. Sie sind Praktiker. Sie erkennen sofort, wenn jemand über Marketing redet, statt es gemacht zu haben. ### Drei Festlegungen, die dieser Guide durchsetzt - **Ein Gelb, kein zweites.** `#FFF700` führt und steht allein. Magenta und Violett sind Fläche, Schatten, Verlauf — nie ein zweiter Akzent und nie eine zweite Signalfarbe. - **Gelb ist Schrift auf Schwarz und Fläche auf Weiß.** Auf Schwarz erreicht `#FFF700` 18,5 : 1 und darf schreiben. Auf Weiß erreicht es 1,1 : 1 und darf nur noch Fläche sein. Der gelbe Marker unter einer Zeile ist die Grundform, nicht gelber Text auf Papier. - **Zwei Familien, drei Rollen.** Barlow Condensed ruft, Barlow betont, Inter erklärt. Der Unterschied zwischen einer Headline und einer Bildunterschrift ist Schnitt, Größe und Breite — keine vierte Schrift. #### Was dieser Guide nicht regelt Die Coaching-Plattform und alles, was hinter dem Login liegt: Produktoberfläche, Zustandsfarben im Interface, Tabellen, Formulare, Reporting. Das ist ein eigener Teil und existiert noch nicht. Hier stehen die Marke nach außen und die sozialen Kanäle. ## 02 Logo Ein handgeschriebenes _Emma_ mit drei Speedlines darüber und darunter, dazu **WOELK** in gesperrten Versalien. Der Schriftzug ist Zeichnung, keine Schrift. Er wird nie nachgesetzt, nie nachgezogen und nie umgefärbt. ### Zwei Entscheidungen pro Datei **Lockup:** sechs Kombinationen aus Schriftzug, Monogramm und Zusatz. **Grund:** jede davon einmal für hellen und einmal für dunklen Untergrund. Zwölf Kombinationen, keine dreizehnte — jede als SVG und als PNG. `light` im Dateinamen heißt: für hellen Grund, schwarze Zeichnung. `dark` heißt: für dunklen Grund, weiße Zeichnung. Der Name beschreibt den Untergrund, nicht die Farbe der Zeichnung — das wird am häufigsten falsch herum gelesen. | Datei | Lockup | Seitenverhältnis | Wofür | |---|---|---|---| | `logo` | Schriftzug allein | 2,31 : 1 | Die Basisform. Website, Deck, Print, Partnerlisten. | | `icon` | Monogramm EW | 1,54 : 1 | Wo kein Platz für Wörter ist: Avatar, Favicon, Folienecke. | | `logo-claim` | Schriftzug + _Marketing & Sales_, gestapelt | 1,74 : 1 | Firmierung. Impressum, Rechnung, Briefbogen, Erstkontakt. | | `claim-row` | Monogramm + _Marketing & Sales_ im invertierten Panel | 6,59 : 1 | Sehr breite Flächen: Banner, Messewand, Sponsorenleiste. | | `logo-ma` | Schriftzug + gelber Balken _Mission Agenturfrei_ | 1,56 : 1 | Alles zum Programm: Landingpage, Deck, Teilnahmebestätigung. | | `ma-row` | Monogramm + gelber Balken | 7,06 : 1 | Bühne, Kursplattform-Header, Event-Banner. | ### Welches Lockup, in welcher Größe Die Regel, die am häufigsten gebrochen wird: die beiden `-row`-Dateien sind bis zu siebenmal so breit wie hoch. Wer sie in eine Kopfzeile setzt, die für `logo` gebaut wurde, bekommt einen Schriftzug von 13 px Höhe. Sie gehören auf Flächen, die tatsächlich breit sind. | Situation | Datei | Größe | |---|---|---| | Website-Header, Decktitel, Print, Partnerlisten | `logo-light` / `logo-dark` | ab 180 px Breite | | Navigationsleiste, E-Mail-Header, Signatur, Banner-Ad | `logo-light` / `logo-dark` | 120–180 px Breite | | Impressum, Rechnung, Briefbogen, Angebots-PDF | `logo-claim-*` | ab 150 px Breite | | App-Icon, Avatar, Favicon, Wasserzeichen, Folienecke | `icon-*` | ab 28 px | | Alles zum Programm Mission Agenturfrei | `logo-ma-*` | ab 200 px Breite | | Bühne, Messewand, Plattform-Header, sehr breite Banner | `ma-row-*` / `claim-row-*` | ab 320 px Breite | | Einfarbiger Druck, Prägung, Stick, Gravur | `icon-light` als Pfad | als Linienzeichnung reproduzieren | **Absolute Minima:** Schriftzug 110 px Breite am Bildschirm, 28 mm im Druck. Monogramm 28 px. Row-Lockups 320 px. Darunter lieber nichts als etwas Unleserliches. ### Alle Dateien Sechs Lockups, je zwei Gründe, je zwei Formate: 24 Dateien. SVG ist die Arbeitsdatei, PNG die Ausweichdatei. Nichts wird gezippt, jede Datei hat ihren eigenen Link. Maschinenlesbarer Index mit Maßen und Bytegrößen: [/logos/index.json](https://ci.emmawoelk.com/logos/index.json). - **Wortmarke** — heller Grund · Seitenverhältnis 2,31 : 1 - **Wortmarke** — dunkler Grund · Seitenverhältnis 2,31 : 1 - **Monogramm** — heller Grund · Seitenverhältnis 1,54 : 1 - **Monogramm** — dunkler Grund · Seitenverhältnis 1,54 : 1 - **Wortmarke + Firmierung** — heller Grund · Seitenverhältnis 1,74 : 1 - **Wortmarke + Firmierung** — dunkler Grund · Seitenverhältnis 1,74 : 1 - **Monogramm + Firmierung** — heller Grund · Seitenverhältnis 6,59 : 1 - **Monogramm + Firmierung** — dunkler Grund · Seitenverhältnis 6,59 : 1 - **Wortmarke + Mission Agenturfrei** — heller Grund · Seitenverhältnis 1,56 : 1 - **Wortmarke + Mission Agenturfrei** — dunkler Grund · Seitenverhältnis 1,56 : 1 - **Monogramm + Mission Agenturfrei** — heller Grund · Seitenverhältnis 7,06 : 1 - **Monogramm + Mission Agenturfrei** — dunkler Grund · Seitenverhältnis 7,06 : 1 #### Zu den alten Dateinamen Im Originalordner heißen die beiden Zeilen-Lockups `logo_ma_vertical` und `logo_slogan_vertical`. Sie sind das Gegenteil von vertikal: 676 × 96 und 632 × 96, also die breitesten Dateien der Familie. Wer nach dem Namen greift, greift daneben. Hier heißen sie `ma-row` und `claim-row`. Die Originale liegen unverändert unter `/content/logo/`; produktiv gilt `/logos/`. ### SVG oder PNG **SVG, immer, wenn das Werkzeug es annimmt.** PNG ist die Ausweichdatei für alles, was keinen Vektor frisst: Word, PowerPoint ohne Vektorimport, E-Mail-Signaturen, ältere Druckereiportale, manche Anzeigenmanager. Alle zwölf PNG sind transparent. Es gibt keine Version mit weißem Kasten darunter, und es soll auch keine geben — ein Logo auf einem Kasten ist ein Logo, das den Freiraum aus dem nächsten Abschnitt schon verletzt hat. | Situation | Format | Warum | |---|---|---| | Website, Deck mit Vektorimport, Print, alles über 140 px Breite | **SVG** | Skaliert verlustfrei und ist die kleinere Datei. | | E-Mail-Signatur, Word, PowerPoint, Anzeigenmanager | **PNG** | Nehmen kein SVG an. Bis 137 px Anzeigebreite auf einem Retina-Display sauber. | | Favicon, Avatar, Profilbild | **PNG**, `icon-*` | Plattformen verlangen Raster. 212 px reichen für jedes Profilbild bis 106 px. | | Druck jeder Art | **SVG**, ausnahmslos | Siehe unten — die PNG reichen dafür nicht. | #### Wie weit die PNG tragen Alle zwölf sind in Originalgröße der Zeichnung exportiert, also **1×**. Wo ein Paar um einen Pixel abweicht, steht hier der kleinere Wert: `logo` ist 275 px breit, genau so breit wie die `viewBox` des SVG. Auf einem gewöhnlichen Bildschirm ist das die maximale Anzeigebreite, auf einem Retina-Display die Hälfte davon. | Datei | PNG | Max. Anzeige 1× | Max. Anzeige 2× | Druck bei 300 dpi | |---|---|---|---|---| | `logo-*` | 275 × 120 | 275 px | 137 px | 23 mm | | `icon-*` | 212 × 137 | 212 px | 106 px | 18 mm | | `logo-claim-*` | 275 × 159 | 275 px | 137 px | 23 mm | | `logo-ma-*` | 310 × 199 | 310 px | 155 px | 26 mm | | `claim-row-*` | 635 × 99 | 635 px | 317 px | 54 mm | | `ma-row-*` | 679 × 99 | 679 px | 339 px | 57 mm | Damit kollidieren zwei Zeilen mit den Größenregeln weiter oben. Der Website-Header verlangt **ab 180 px** — als PNG auf einem Retina-Display reicht das nicht, dort gilt SVG. Und der Druck verlangt **28 mm**: `logo` kommt als PNG auf 23 mm. **Für Print gilt deshalb ohne Ausnahme SVG.** Wenn die PNG einmal neu exportiert werden: **4×** als große Fassung (`logo` dann 1100 × 480) und zusätzlich eine 400 px breite Fassung für Signatur und Folie. Zwei Größen decken alles ab, was heute an der 1×-Grenze scheitert. #### Was die Dateien über die Farben verraten Die PNG wurden Pixel für Pixel ausgelesen, statt der Palette zu glauben. Drei Befunde: - **Das Gelb ist exakt #FFF700** — in allen vier Mission-Agenturfrei-Dateien, ohne Abweichung. Der Wert im Theme und der Wert im Logo sind dieselbe Farbe. - **Die Buchstaben der hellen Fassungen sind reines #000000,** nicht `#1D1D1B`. `#1D1D1B` steckt in denselben Dateien, aber nur in den Speedlines und im Panel der Firmierung. Zwei Schwarztöne in einer Zeichnung, Abstand 29 von 255 — unsichtbar, und trotzdem ein Wert, der besser zusammengeführt würde. Abschnitt 03 zieht daraus die Konsequenz für die Textfarbe. - **Die Paare sind nicht pixelgleich.** `icon-light` ist 213 × 138, `icon-dark` 212 × 137. `logo-claim-light` ist 275 × 159, die dunkle Fassung 276 × 160. Wer die beiden per CSS gegeneinander tauscht, bekommt einen Pixelsprung. Beim nächsten Export auf identische Maße ziehen. ### Favicon Das aktuelle Favicon ist `favicon.png`: das Monogramm, weiß auf einem schwarzen Quadrat, 850 × 850, Graustufen ohne Alphakanal, 18,2 KB. Es liegt auf emmawoelk.com unter `hubfs/Branding/Logos/logo-round.png`, und `/favicon.ico` leitet darauf um. Trotz des Dateinamens ist es kein Kreis, sondern ein volles Quadrat. Die Zeichnung darin ist dieselbe wie in `icon-dark.svg`, nur mit mehr Rand. **Die Wahl des Motivs ist richtig** — hier steht das Monogramm, wo der Schriftzug nichts verloren hätte. Was fehlt, sind die Größen. In echter Größe. Das linke Feld ist das, was in der Tableiste steht. #### Eine Datei ist kein Faviconsatz Der Browser bekommt 850 px und muss daraus 16 machen. Was dabei entsteht, ist weicher als eine Datei, die für 16 px gezeichnet wurde — und beim Monogramm trifft es zuerst die drei Speedlines und die Haarlinie im _W_. Sichtbar in der Reihe oben: bei 128 px liest man die Zeichnung, bei 64 px erkennt man sie, bei 16 px ist sie ein heller Fleck. Das deckt sich mit der Größenregel weiter oben in diesem Abschnitt: das Monogramm hat ein Minimum von **28 px**. Eine Tableiste zeigt 16. Ein Favicon für 16 px wird nicht heruntergerechnet, es wird dafür gezeichnet: Striche verstärken, die Speedlines weglassen. Und die Gelegenheit, die dabei offensteht — die Leitfarbe auf die Fläche zu bringen, die diese Marke am häufigsten zeigt: Die gelbe Fassung folgt der Farbregel aus Abschnitt 03, ohne sie zu dehnen: Gelb auf Schwarz, 18,5 : 1. Eine Tableiste sieht ein Kunde öfter als jede Landingpage — und heute trägt sie die Leitfarbe nicht. **Das ist ein Vorschlag, keine Regel.** Weiß auf Schwarz ist ebenfalls markenkonform und bleibt gültig, solange nichts anderes beschlossen ist. Was in beiden Fällen gilt: vier Dateien statt einer. | Datei | Größe | Wofür | Status | |---|---|---|---| | `favicon.png` | 850 × 850 | Alles. Der Browser skaliert selbst herunter. | Vorhanden, von emmawoelk.com | | `favicon-16.png` | 16 × 16 | Tableiste, Lesezeichenliste. Für diese Größe gezeichnet, nicht skaliert. | Fehlt | | `favicon-32.png` | 32 × 32 | Tableiste auf Retina, Verlaufsliste | Fehlt | | `apple-touch-icon.png` | 180 × 180 | Startbildschirm iOS. Ohne Transparenz, iOS füllt sonst schwarz. | Fehlt | | `icon-512.png` | 512 × 512 | Android, Web-App-Manifest | Fehlt | - **Das Favicon ist das Monogramm, nie der Schriftzug.** Die vorhandene Datei hält sich daran. Die neuen halten sich auch daran. - **Schwarzes Quadrat, randlos.** Kein Kreis, keine abgerundete Ecke, kein weißer Rahmen — die Systeme schneiden ihre eigene Form aus, und jede mitgelieferte Rundung wird doppelt gerundet. - **Kein Freiraum im Favicon.** Die Regel aus dem nächsten Abschnitt gilt hier nicht: bei 16 px kostet ein Viertel Rand die Hälfte der Lesbarkeit. Das Monogramm füllt rund 70 % der Kante. - **Keine Transparenz im Apple-Touch-Icon.** iOS legt Schwarz darunter, und das Ergebnis ist selten das, was gemeint war. ### Freiraum Freiraum auf allen vier Seiten: **ein Viertel der Logohöhe**. Nichts betritt diese Zone — kein Text, keine Linie, keine Bildkante, kein zweites Logo. Der Freiraum hängt an der Höhe und nicht an einem Element der Zeichnung, weil die Familie von 1,54 : 1 bis 7,06 : 1 reicht. Ein Maß, das am Monogramm hängt, wäre bei `ma-row` ein Randstreifen von wenigen Pixeln. Violette Linie = die Bounding-Box der Datei. Gestrichelt = der Freiraum, ein Viertel der Logohöhe auf jeder Seite. ### Was nicht geht - NEIN: Balken umfärben - NEIN: Verzerren oder stauchen - NEIN: Schatten oder Glow - NEIN: Drehen oder kippen - NEIN: Falsche Grundversion - NEIN: Auf unruhigem Bild ohne Panel - NEIN: Lockup selbst zusammenbauen - NEIN: Schriftzug in einer Schrift setzen - NICHT: Niemals „Emma Woelk“ in einer Systemschrift setzen. Der Schriftzug ist gezeichnet: die Schleife im _E_, die Verbindung von _m_ zu _m_ und die drei Speedlines gibt keine lizenzierte Schrift her. Die letzte Kachel oben zeigt, wie das aussieht, und es ist jedes Mal falsch. - NICHT: Der gelbe Balken ist `#FFF700`. Kein Orange, kein Zitronengelb, keine Deckkraft unter 100 %. Er ist das lauteste Element im ganzen System und verträgt keine Abstufung. - NICHT: Kein Lockup selbst bauen. Monogramm plus gesetzter Balken ist nicht `ma-row` — die Datei hat andere Abstände, andere Balkenhöhe und andere Sperrung. - NICHT: Nie zwei Lockups derselben Familie in einem Layout. Schriftzug oben und Monogramm daneben liest sich als zwei Absender. - NICHT: Das Logo nie direkt auf ein Foto, ohne ein deckendes oder stark abgedunkeltes Panel darunter. - NICHT: Die Speedlines gehören zum Logo und nur dorthin. Sie werden nicht als Zierelement, Trenner oder Grafikbaustein weiterverwendet. ## 03 Farbe Ein Gelb auf Schwarz. `#FFF700` ist kein Akzent neben anderen, es ist die Marke. Es kommt aus dem Balken des Mission-Agenturfrei-Lockups und ist die einzige Farbe, die etwas behaupten darf. ### Markenfarben - **Signalgelb** `#FFF700` — Der Kopf. Buttons, Marker, Eyebrows, Links, Aufzählungspunkte, Zahlen, jede Fläche, die gesehen werden muss. - **Schwarz** `#000000` — Der Grund. Website, Social, Decks, Video. Nicht „dunkelgrau“ — echtes Schwarz, damit Gelb die volle Distanz bekommt. - **Weiß** `#FFFFFF` — Fließtext auf Schwarz, und das Papier für alles Gedruckte: Angebot, Rechnung, Zertifikat, Handout. - **Tinte** `#000000` — Text auf Papier. Dieselbe Farbe wie die Buchstaben im Logo und wie `--base-light-color` im Theme. - **Fläche** `#191919` — Karten, Panels und Kästen auf dem schwarzen Grund. Die einzige Abstufung zwischen Schwarz und Weiß. #### Der zweite Schwarzton, der niemandem gehört In den Logodateien steckt neben `#000000` auch `#1D1D1B` — auf den Speedlines und im Panel der Firmierung. Der Abstand beträgt 29 von 255 und ist bei keiner realen Größe zu sehen. Es ist trotzdem ein zweiter Wert für dasselbe, und er gehört **nicht** in ein Stylesheet, ein Deck oder ein Dokument: die Tinte dieser Marke ist `#000000`. Beim nächsten Überarbeiten der Zeichnung wird `#1D1D1B` darin zusammengeführt. ### Sekundärfarben Zwei Farben, die es auf der Website gibt und die nichts behaupten. Sie sind Fläche, Schatten und Verlauf. Sie führen kein Bauteil an, sie tragen keinen Text auf Papier, und sie stehen nie neben Gelb als zweiter Akzent. - **Magenta** `#DF579D` — Der untere Ton im Kastenschatten, sekundäre Buttonfläche. Wärme, wo Gelb zu laut wäre. - **Violett** `#8075D9` — Der obere Ton im Kastenschatten. Der einzige zugelassene Verlauf ist `#8075D9` nach `#DF579D`, 180°. ### Abgeleitet und Status Drei Werte, die im Theme heute fehlen und die jedes Dokument früher oder später braucht. Ocker ist Gelb, wenn Gelb schreiben muss. Die beiden Statusfarben gehören in die Oberfläche und in keine Anzeige. - **Ocker** `#5C5100` — Gelb als Schriftfarbe auf Papier. 8,0 : 1 gegen Weiß. Für Hinweise, Fußnoten, Hervorhebungen im Druck. - **Erfolg** `#35C88A` — Bestätigungen, abgeschlossene Schritte, Häkchen. Nur Oberfläche. - **Fehler** `#FF5A5F` — Fehlermeldungen und zerstörende Aktionen. Nur Oberfläche. #### Ein Befund aus dem laufenden Theme Im HubSpot-Theme ist heute `--errors-bg:#DF579D` und `--field-error:#8075D9` gesetzt. Damit trägt eine Markenfarbe eine Fehlermeldung — die einzige Stelle im ganzen System, an der das passiert. Ein Nutzer, der Magenta als „Marke“ gelernt hat, liest den roten Kasten nicht als Fehler. Dazu ein Streuwert: `rgba(8,0,255,.5)` als harter Versatzschatten am Slider. Reines Blau kommt sonst nirgends vor. Beides gehört ersetzt: Fehler auf `#FF5A5F`, der Schatten auf `#8075D9`. ### Kontrast, nachgerechnet | Paarung | Verhältnis | Urteil | |---|---|---| | Weiß auf Schwarz | 21,0 : 1 | AAA. Der Standard für Fließtext auf dem Grund. | | #FFF700 auf Schwarz | 18,5 : 1 | AAA. Gelb **ist** eine Schriftfarbe — auf Schwarz. Eyebrow, Link, Zahl, Akzentwort. | | Schwarz auf #FFF700 | 18,5 : 1 | AAA. Gelber Button und gelber Marker sind bei jeder Schriftgröße sicher. | | Schwarz auf Weiß | 21,0 : 1 | AAA. Der Standard für Fließtext auf Papier. | | #FFF700 auf #191919 | 15,5 : 1 | AAA. Gelb auf der Kartenfläche verhält sich wie Gelb auf Schwarz. | | #DF579D auf Schwarz | 6,0 : 1 | AA. Als Fläche gedacht. Wenn schon als Schrift, dann ab 19 px. | | #8075D9 auf Schwarz | 5,5 : 1 | AA. Gleiche Einschränkung wie Magenta. | | #8075D9 auf Weiß | 3,8 : 1 | **Fällt durch** für Fließtext. Nur große Überschriften und Ränder. | | #DF579D auf Weiß | 3,5 : 1 | **Fällt durch** für Fließtext. Nur große Überschriften und Ränder. | | #FFF700 auf Weiß | 1,1 : 1 | **Niemals.** Auf Papier existiert Gelb nur als Fläche. | ### Regeln - **Gelb ist Schrift auf Schwarz und Fläche auf Weiß.** Nie umgekehrt. Wer Gelb auf Papier lesen können muss, nimmt Ocker `#5C5100`. - **Ein Stück Kommunikation muss aus zehn Metern gelb-auf-schwarz sein.** Entweder als Fläche oder als Akzentwort in der Headline. Wenn eine Seite ohne Gelb funktioniert, ist es nicht unsere. - **Ein Akzent pro Bauteil.** Gelb und Magenta dürfen auf derselben Seite stehen. In demselben Button, derselben Karte, derselben Kachel nicht. - **Verläufe nur im Paar Violett → Magenta,** 180°, und unter 20 % der Fläche. Gelb bekommt nie einen Verlauf: der Marker ist eine Fläche, und eine Fläche ist einfarbig. - NICHT: **Kein Neon-Glow hinter Gelb.** `#FFF700` leuchtet bereits. Ein Schein darum macht die Kante weich und die Fläche schmutzig. - NICHT: **Kein zweites Gelb.** Kein Orange für „Achtung“, kein blasses Gelb für „ruhig“, keine 60-%-Deckkraft für „dezent“. Wer weniger Gelb will, nimmt weniger Fläche. - NICHT: **Keine neue Farbe pro Kampagne.** Wenn eine Kampagne eine Farbe braucht, die es hier nicht gibt, braucht sie eine andere Idee. - NICHT: **Kein Gelb auf Magenta und kein Magenta auf Gelb.** 3,1 : 1 — reicht für einen Rahmen und für nichts, was gelesen werden muss. ## 04 Typografie Zwei Familien, drei Rollen. **Barlow Condensed** ruft, **Barlow** betont, **Inter** erklärt. Beide Familien sind quelloffen, beide werden selbst gehostet, und keine dritte kommt dazu. **Ruf · Barlow Condensed 700, Versalien** Schmal, in Versalien, dicht gesetzt. Sie bringt vier Wörter dorthin, wo eine normal breite Schrift zwei unterbringt — und genau das ist der Grund, warum die Headlines dieser Marke Sätze sein dürfen. **Betonung · Barlow 900, Versalien** Dieselbe Familie, normale Breite, schwerster Schnitt. Sie trägt Zwischenüberschriften und ist die Brücke: laut genug für die Marke, breit genug, um noch Text zu sein. **Erklärung · Inter 400** Neutral, ruhig, für lange Strecken gebaut. Sie trägt Fließtext, UI, Buttons und das gesperrte Eyebrow — und sie behauptet nichts, weil das die Aufgabe der beiden anderen ist. ### Die Skala Direkt aus dem laufenden Theme. Wer eine Folie, ein PDF oder eine Anzeige baut, setzt diese Werte und keine gerundeten Nachbarwerte. | Rolle | Schnitt | Größe / Zeile | Sperrung | Hinweis | |---|---|---|---|---| | Hero · H1 | Barlow Condensed 700 | 70 px / 1,0 · mobil 24 px / 1,3 | 0,005em | Versalien. Höchstens drei Zeilen. | | Abschnitt · H2 | Barlow Condensed 700 | 42 px / 1,0 · mobil 22 px / 1,3 | 0,01em | Versalien. | | CTA-Headline | Barlow Condensed 900 | 42 px / 1,19 · mobil 26 px / 1,2 | 0,005em | Versalien. Der schwerste Schnitt im System. | | Zwischenkopf · H3 | Barlow 900 | 32 px / 1,125 · mobil 20 px / 1,35 | 0,02em | Versalien. | | H4 | Inter 700 | 24 px / 1,125 · mobil 18 px | 0,01em | Gemischt. Ab hier hört Versal auf. | | H5 / H6 | Inter 700 | 21 px bzw. 18 px / 1,125 | 0,015em | Gemischt. | | Vorspann | Inter 300 | 21 px / 1,62 · mobil 18 px / 1,5 | 0 | Einer pro Abschnitt, direkt unter der Headline. | | Fließtext | Inter 400 | 16 px / 1,6 · mobil 16 px / 1,5 | 0 | Maß 60–70 Zeichen. Nie Blocksatz. | | Eyebrow | Inter 400 | 15 px / 1,6 · mobil 14 px | 0,2em | Versalien. Die einzige gesperrte Fläche im System. | | Zitat | Barlow 300 | 36 px / 1,39 · mobil 16 px / 1,5 | 0 | Gemischt. Der leichteste Schnitt im System. | | Button | Inter 700 | 16 px / 1,25 | 0,025em | Versalien. Radius 50 px, Innenabstand 20/40 px. | | Menü | Barlow Condensed 400 | 22 px / 1,0 | 0,02em | Versalien. | | Fußzeile | Inter 400 | 14 px / 1,85 | 0 | Gemischt. | | Zahlen | Inter 500 | — | 0 | Immer `font-variant-numeric: tabular-nums`. | ### Warum die Sperrung nach unten wächst In den meisten Systemen sitzen Headlines auf negativer Sperrung und alles darunter auf null. Hier ist es umgekehrt: die Displayschrift ist schmal und steht in Versalien, also braucht sie eine Spur Luft — 0,005em oben, 0,02em beim Zwischenkopf. Und das Eyebrow braucht viel, 0,2em, weil 15 px Versalien ohne Sperrung zu einem Klumpen werden. Zwischen beidem liegt der Fließtext, und der bleibt bei null. Gesperrte Kleinbuchstaben gibt es in diesem System nicht. ### Die Schriftdateien Barlow und Barlow Condensed von Jeremy Tribby, Inter von Rasmus Andersson, beide unter der SIL Open Font License 1.1, unverändert aus dem Google-Fonts-Repository. Sechzehn woff2-Dateien, 412 KB gesamt, im Regelfall lädt der Browser davon 253 KB. #### Barlow Condensed 400, 700, 900 · je latin und latin-ext `fonts/barlow-condensed-*.woff2` #### Barlow 300, 400, 700, 900 · je latin und latin-ext `fonts/barlow-*.woff2` #### Inter Variabel 300–700 · latin und latin-ext `fonts/inter-var-*.woff2` Fertige `@font-face`-Regeln inklusive `unicode-range`: [/fonts/fonts.css](https://ci.emmawoelk.com/fonts/fonts.css). Lizenztexte liegen daneben. Schick den Link, nicht den Anhang — wer von hier lädt, hat dieselbe Datei wie wir. #### Warum selbst gehostet Der Aufruf von `fonts.googleapis.com` überträgt die IP-Adresse jedes Besuchers in die USA. Das LG München I hat das am 20.01.2022 als DSGVO-Verstoß gewertet (Az. 3 O 17493/20) und Schadenersatz zugesprochen. Für eine Marke, die Unternehmen beibringt, ihre Website selbst zu betreiben, ist das die peinlichste Fußnote, die es gibt. Die Lizenz erlaubt das Selbsthosten ausdrücklich. ### Zeichen und Anführungszeichen Alles läuft heute auf Deutsch. Umlaute, ß und das deutsche Anführungszeichenpaar sitzen im `latin`-Subset — der Normalfall lädt also nur diese Hälfte. Die Firmierung sitzt in Barcelona: Spanisch (`á é í ó ú ñ ¡ ¿`) ist ebenfalls in `latin`. Erst Polnisch, Tschechisch oder Rumänisch ziehen `latin-ext` nach. - **Deutsch nimmt „…“,** nicht "…" und nicht “…”. Ein Text mit englischen Anführungszeichen ist ein Text, den niemand fertig gemacht hat. - **Versal-ß gibt es nicht.** In Versalien wird ß zu SS: _GRÖSSE_, _MASSNAHME_. Bei H1 bis H3 ist das kein Sonderfall, sondern der Normalfall. - **Das Halbgeviert – ist ein Gedankenstrich,** kein Bindestrich und kein Taktgeber. Wie oft er vorkommen darf, steht in Abschnitt 07. ### Regeln - **Versalien enden bei H3.** H1, H2, CTA-Headline, H3, Eyebrow, Button und Menü stehen in Versalien. Alles darunter — H4, Fließtext, Zitat, Fußzeile — steht gemischt. Diese Grenze ist die Hälfte der Markenwirkung. - **Höchstens drei Zeilen Versalien am Stück.** Vier Zeilen Barlow Condensed in Versalien liest niemand, der nicht muss. - **Betonung ist Schnitt, nicht Kursiv.** Inter 700 im Fließtext. Kursiv nur für einen benannten Gegenstand im Lauftext — _Mission Agenturfrei_, ein Toolname, ein Begriff, der gerade definiert wird. - **Zwei Schriftgrößen pro Fläche reichen.** Eine Folie mit fünf Größen ist eine Folie, die niemand liest. - **Der gelbe Marker gehört unter eine Headline oder in den Vorspann.** Nicht unter ein Wort im Fließtext — dort wird er zum Textmarker im Schulbuch. - NICHT: **Keine dritte Familie.** Kein Montserrat, kein Poppins, kein Roboto, kein Oswald — auch nicht in Decks, die jemand anders baut. - NICHT: **Barlow Condensed nie im Fließtext.** Sie ist schmal, damit Headlines Sätze sein können. Bei 16 px kostet dieselbe Schmalheit die Lesbarkeit. - NICHT: **Keine Sperrung auf Kleinbuchstaben.** Niemals. - NICHT: **Kein Farbwechsel mitten in der Headline und kein Verlauf im Text.** Wenn ein Wort wichtig ist, macht der Satz das deutlich — oder der gelbe Marker, aber nur einer. - NICHT: **Kein Blocksatz.** Deutsche Wörter sind lang, die Löcher werden groß, und es sieht nach Word aus. ## 05 Namen & Sub-Marken **Emma Woelk** ist die Marke. **Marketing & Sales** ist die Firmierung. **Mission Agenturfrei** ist das Programm. Drei Ebenen, und nur die erste ist ein Absender. **Die Marke** Eine Personenmarke. Sie steht auf jedem Absender, in jeder Signatur, auf jedem Deckblatt. Sie wird nie abgekürzt, nie zu _EW_ im Fließtext und nie zu _Emma_ allein außerhalb eines Zitats. **Die Firmierung** Die rechtliche Bezeichnung, ein Unternehmen der roboconsulting SL, Barcelona. Sie gehört ins Impressum, auf Rechnung, Vertrag und Angebot — nicht in eine Anzeige. **Das Programm** Das Live-Coaching. Ein Programm mit eigenem Lockup, aber ohne eigene Marke: kein zweites Logo, keine zweite Farbe, keine eigene Domain. ### Schreibweisen | Richtig | Falsch | Warum | |---|---|---| | Emma Woelk | EmmaWoelk · E. Woelk · Emma Wölk | Zwei Wörter, keine Abkürzung, kein Umlaut. Die Schreibung _oe_ ist Teil des Namens. | | Emma Woelk — Marketing & Sales | Emma Woelk Marketing und Sales | Geviertstrich mit Leerzeichen, kaufmännisches Und. Genau so steht es im Logo. | | Mission Agenturfrei | MISSION AGENTURFREI im Fließtext · „Mission Agenturfrei“ · Mission-Agenturfrei | Beide Wörter groß, kein Bindestrich, keine Anführungszeichen. Versalien nur dort, wo die Typoskala sie ohnehin vorgibt. | | agenturfrei werden | Agenturfrei werden | Als Eigenschaft klein, als Programmname groß. _Werde agenturfrei_ ist ein Satz, _Mission Agenturfrei_ ist ein Name. | | B2B-Potenzialanalyse | B2B Potentialanalyse · B2B Potenzialanalyse | Ein Wort mit Bindestrich, und _Potenzial_ mit z. Auf der Website stehen heute alle drei Varianten nebeneinander. | ### Die sechs Coaching-Stränge sind keine Marken Marketing, Website, KI-Tools, Sales, Automatisierung, SEO. Sie beschreiben, was in einem 1:1-Coaching passiert. Sie bekommen kein Logo, keine eigene Farbe, kein eigenes Icon-Set und keine eigene Landingpage-Optik. - **„Mission Agenturfrei“ steht zuerst** — bei der ersten Nennung in jedem Dokument, Deck und auf jeder Seite. Danach reicht _das Coaching_. - **Strangnamen bleiben kleingeschrieben im Satz:** „im Coaching zu Automatisierung“, nicht „im Coaching Automatisierung™“. - **Kein ®, kein ™, kein „by Emma Woelk“** als Anhängsel. - **Kein neuer Name ohne Not.** Neue Inhalte gehen in einen bestehenden Strang, bis es einen strategischen Grund gibt, der dagegen spricht. ### Zwei Namen, die aufgeräumt gehören Beide stehen heute auf emmawoelk.com und beide widersprechen dem, was der Rest der Seite sagt. Das ist kein Stilproblem: ein Interessent, der drei Produktnamen findet und zwei davon nicht wiederfindet, liest Unordnung. #### Digitaler Vertriebsbooster Steht im FAQ als Programmname, samt Preisen — 300 € pro Monat für einen Marketing- oder Sales-Seat, 500 € für den Full-Seat. Auf Startseite und Programmseite kommt der Name nicht mehr vor; dort heißt alles _Mission Agenturfrei_. **Entscheidung offen.** Entweder es ist der alte Name — dann raus aus dem FAQ. Oder es ist ein eigenes Produkt — dann gehört es auf die Seite, mit demselben Recht wie das Coaching. #### NextGenBuilders Steht im Hauptmenü unter _Angebote_ und verlinkt auf `nextgenbuilders.io`. Die Domain antwortet mit 404. **Entscheidung offen.** Bis dahin gilt: kein Asset, keine Nennung in Unterlagen, kein Logo. Ein Menüpunkt, der ins Leere führt, kostet mehr Vertrauen als ein fehlender Menüpunkt. ### Zahlen und Verknappung Diese Marke arbeitet mit Zahlen: _über 20 Jahre_, _über 250 Projekte_, _100 % empfehlen uns weiter_, _+500.000 € in 7 Monaten_, _50 % mehr Aufträge in zwei Wochen_. Das ist die Stärke der Marke und gleichzeitig ihr größtes Risiko. - **Jede Zahl braucht einen Besitzer.** Ein Name, eine Firma, ein Zeitraum. _+500.000 € in 7 Monaten_ steht mit Hermann Hacker und nk neue kommunikation daneben — so ist es richtig. Eine Zahl ohne Quelle ist eine Behauptung. - **Jede Verknappung braucht ein Datum.** „Nur noch wenige Plätze für 2026“ ist zulässig, solange es stimmt und solange das Jahr genannt ist. „Nur noch wenige Plätze“ ohne Zeitraum ist es nicht. - **Countdown-Elemente werden entfernt, wenn sie abgelaufen sind.** Auf der Startseite steht heute ein Live-Termin vom 07.03.25. Ein abgelaufener Countdown ist der teuerste Detailfehler auf einer Verkaufsseite. - **Keine Zahl, die nicht gemessen wurde.** Kein „10× mehr Leads“, kein „bis zu 300 %“. Was kein Kunde bestätigt hat, wird nicht gedruckt. ## 06 Bildsprache Das Grafikelement dieser Marke ist der gelbe Balken. Er kommt aus dem Logo, er ist eine Fläche, und er ist alles, was diese Marke an Dekoration braucht. Alles andere ist Foto, Screenshot oder Icon. ### Der Marker Eine rechteckige gelbe Fläche hinter Text, ohne Rundung, ohne Verlauf, ohne Schatten. Er markiert genau einen Gedanken pro Fläche. Zwei Marker auf einer Folie heben sich gegenseitig auf. - NEIN: Zwei Marker in einer Headline - NEIN: Marker mit Rundung, Verlauf oder Schatten - **Ein Marker pro Ansicht.** Eine Folie, eine Karte, ein Hero. Nicht pro Absatz. - **Der Marker sitzt hinter zwei bis vier Wörtern.** Eine ganze markierte Zeile ist ein gelber Balken mit Text darauf, und das ist das Logo. - **Rechteckig, deckend, einfarbig.** Kein Radius, kein Verlauf, kein Schatten, keine Neigung. - **Auf Schwarz markiert der Marker, auf Weiß trägt er.** Auf Papier ist Gelb hinter schwarzem Text die einzige zugelassene Verwendung. ### Fotografie Das ist eine Personenmarke. Das stärkste Bild ist immer dasselbe: Emma Woelk, in einer echten Situation — Bühne, Kamera, Bildschirm, Gespräch. Danach kommen Kunden, die etwas gebaut haben. Erst danach kommt alles andere. - **Menschen vor Metaphern.** Ein Gesicht schlägt jede Illustration eines Konzepts. Es gibt in diesem System keinen Grund, Wachstum als Balkendiagramm mit Pfeil zu zeichnen. - **Screenshots sind das zweitstärkste Asset.** Ein echtes HubSpot-Dashboard, eine echte Kampagnenauswertung, eine echte Automatisierung. Ein Bildschirm, den es wirklich gibt, schlägt jede Abbildung davon. - **Vor dem Screenshot: aufräumen.** Keine echten Kundennamen, keine E-Mail-Adressen, keine Umsatzzahlen Dritter. Was unkenntlich gemacht wird, wird mit einer deckenden Fläche abgedeckt, nie mit Weichzeichner — der ist umkehrbar. - **Text auf Foto bekommt ein Panel oder einen Verlauf** von `rgba(0,0,0,.92)` nach transparent, nicht einen schwereren Schnitt. - NICHT: **Keine Stockfotos mit Handschlag, Headset oder Teambesprechung.** Diese Marke verkauft Unabhängigkeit von Dienstleistern; ein gekauftes Bild aus einer Bilddatenbank sagt genau das Gegenteil. - NICHT: **Keine Partikelfelder, keine leuchtenden Kugeln, keine Netzwerkgrafiken.** Das ist die Standardausstattung jeder KI-Website und damit das Gegenteil eines Erkennungsmerkmals. - NICHT: **Keine Verläufe von Violett nach Blau.** Dieselbe Begründung. - NICHT: **Kein Rendering einer Rakete als Hauptbild.** Der Start des Coachings ist ein Termin mit einem Menschen, kein Raketenstart. Das Emoji im Fließtext ist eine andere Frage — dazu Abschnitt 07. ### KI-generierte Bilder Im Coaching werden LetzAI und Runway unterrichtet, und die Marke nutzt sie selbst. Das ist konsequent — und es macht die Kennzeichnung zur Pflichtübung, nicht zur Kür. - **Der digitale Zwilling ist ein synthetisches Abbild einer realen Person.** Er wird gekennzeichnet, jedes Mal, ohne Ausnahme. Wie genau, steht im Social-Teil, Abschnitte 19 und 20. - **Keine synthetische Person als Kunde, Teilnehmer oder Referenz.** Auch nicht mit Kennzeichnung. Eine Referenz, die es nicht gibt, ist keine Referenz. - **Kein KI-Bild dort, wo ein echtes Bild existiert.** Wenn es ein Foto von der Bühne gibt, wird kein Bühnenbild generiert. - **Assistenz wird nicht gekennzeichnet:** ein umgeschriebener Entwurf, Farbkorrektur, Freisteller, Untertitel. Wer das markiert, bringt dem Publikum bei, die Markierung zu ignorieren. ### Kundenlogos Auf der Startseite läuft ein Referenzband. Es ist das schnellste Vertrauenssignal der Seite und gleichzeitig das rechtlich empfindlichste. - **Nur Logos, für die eine schriftliche Freigabe vorliegt.** Eine gelungene Zusammenarbeit ist keine Nutzungserlaubnis für die Marke. - **Alle Logos einfarbig weiß auf Schwarz,** auf einheitliche optische Größe gebracht — nicht auf einheitliche Breite. Ein breites Wortlogo und ein quadratisches Bildlogo mit derselben Breite wirken unterschiedlich groß. - **Keine Kundenlogos neben dem gelben Marker.** Das Band ist ruhig, sonst konkurriert es mit dem Absender. ### Icons 2066 Icons aus [Lucide](https://lucide.dev) 1.41.0 unter der ISC-Lizenz, unverändert. Ein Satz, ein Strichgewicht: `24×24`, `fill:none`, `stroke-width:2`, runde Enden und Ecken. 217 davon sind für die Arbeit gruppiert, die hier tatsächlich anfällt — die Chips unten grenzen die Liste darauf ein. Ein Klick auf eine Karte kopiert den SVG-Quelltext. Maschinenlesbarer Index: [/icons/index.json](https://ci.emmawoelk.com/icons/index.json), mit Name, Gruppen und Bytegröße für alle 2066. Icons werden geladen … Dazu passt nichts. #### Wie sie eingesetzt werden Der Strich ist `currentColor`. Es gibt nichts umzufärben: wer `color` setzt, färbt das Icon mit — deshalb trägt ein Icon nie einen eigenen Hexwert. Das funktioniert nur, wenn das SVG Teil der Seite ist. Über `` geladen ist die Datei ein eigenes Dokument, `currentColor` findet keinen Kontext und das Icon wird schwarz. Das Raster oben nimmt deshalb den Mask-Weg. ``` /* das Icon nimmt die Farbe seines Kontexts */ .icon{ width:20px; height:20px; stroke-width:2; } /* Standard auf Schwarz */ .icon { color:#FFF700; } /* im Fließtext, wo Gelb zu laut wäre */ .icon--ruhig { color:#FFFFFF; } /* im gelben Button ist das Icon schwarz */ .btn .icon { color:#000000; } /* der Mask-Weg: externe Datei, die trotzdem ihre Farbe nimmt */ .icon--datei{ width:20px; height:20px; background-color:currentColor; -webkit-mask:url("/icons/target.svg") center/contain no-repeat; mask:url("/icons/target.svg") center/contain no-repeat; } ``` - **Eine Größe pro Fläche.** 20 px neben Fließtext, 24 px in einer Kartenüberschrift, 16 px in einer dichten Tabelle. Drei Größen in einer Ansicht sind zwei zu viel. - **stroke-width bleibt auf 2.** Der ganze Satz ist dafür gezeichnet. Ein dünnerer Strich sieht einzeln edler aus und fällt in einer Reihe auseinander. - **Ein Icon beschriftet, es schmückt nicht.** Wenn eine Überschrift ohne Icon funktioniert, bleibt es weg. - **Dekorative Icons bekommen aria-hidden="true".** Ein Icon, das allein eine Bedeutung trägt, bekommt stattdessen ein Label. - NICHT: **Keine gefüllten oder zweifarbigen Icons.** Dieser Satz hat ein Gewicht und behält es. - NICHT: **Keine Icons aus einer zweiten Bibliothek.** Zwei Raster und zwei Strichstärken lesen sich als zwei Marken. - NICHT: **Keine Emoji als Icons.** Jedes Betriebssystem zeichnet sie anders, und ein 🚀 in einer Aufzählung ist auf dem Mac ein anderes Bild als auf dem Firmen-Windows des Interessenten. - NICHT: **Kein gelbes Icon auf hellem Grund.** Dieselbe Regel wie bei der Schrift: `#FFF700` auf Weiß erreicht 1,1 : 1. ## 07 Stimme & Schreibe Der wichtigste Abschnitt. Wir verkaufen an Menschen, die schon einmal für Marketing bezahlt haben, das nach Marketing klang. Sie erkennen den Ton, in dem Agenturen schreiben, in vier Sekunden — und die Marke, die ihnen Unabhängigkeit verkauft, darf nicht in diesem Ton schreiben. ### Vier Prinzipien #### Praktikerin, keine Anbieterin Drei Agenturen aufgebaut, in der Rolle gesessen, Deadlines gerissen. Wir schreiben wie jemand, der die Arbeit gemacht hat — nicht wie jemand, der darüber gelesen hat. #### Konkret schlägt beeindruckend „HubSpot, Semrush, Zapier und ManyChat“ schlägt „ein moderner Marketing-Stack“. Nenn das Tool, die Zahl, die Stunde. Was benannt ist, kann geprüft werden; eine Kategorie nicht. #### Sag den unangenehmen Teil Das Coaching kostet Zeit, die niemand hat. Nicht jeder Kunde hat in zwei Wochen 50 % mehr Aufträge. Eine Grenze zuzugeben ist die billigste Glaubwürdigkeit, die zu haben ist. #### Kurz, dann lang Rhythmus ist das, was geschrieben von generiert unterscheidet. Variier die Satzlänge mit Absicht. Lass einen Satz lang laufen, und dann hör auf. ### Tonalität, gemessen Adjektive wie „klar, ehrlich, nahbar“ geben niemandem etwas, woran ein Entwurf geprüft werden kann. Zahlen schon. Gemessen an vier veröffentlichten Seiten von emmawoelk.com — Startseite, Mission Agenturfrei, Über mich, FAQ. **338 Sätze.** **Mittel** **Median** **Spanne** **Anrede** #### Der eine Befund, auf den es ankommt Mittel 13,4, Median 13. Der Abstand beträgt **0,4 Wörter**. Wenn Mittelwert und Median praktisch aufeinanderliegen, ist der Rhythmus eingeebnet — und ein eingeebneter Rhythmus ist das verlässlichste Erkennungsmerkmal generierter Prosa, das es gibt. Die Spanne von 2 bis 34 Wörtern sagt: es _gibt_ kurze und lange Sätze. Sie stehen nur nicht nebeneinander. Zwei Drittel aller Sätze liegen im Band zwischen 7 und 20 Wörtern. | Satzlänge | Anteil | Verteilung | |---|---|---| | 2–6 Wörter | 14 % | | | 7–12 Wörter | 34 % | | | 13–20 Wörter | 38 % | | | 21–30 Wörter | 13 % | | | 31+ Wörter | 1 % | | ### Die fünf Gewohnheiten, die diesen Ton erzeugen #### Benenn das Ding „HubSpot, Semrush, Lusha, Leadinfo“, nicht „die führenden Tools“. „Öffnungsrate verdoppelt“, nicht „bessere Ergebnisse“. Was benannt ist, kann geprüft werden. #### Beschreib den Tag des Lesers körperlich „Drei Browserfenster und ein Kopiervorgang.“ Der Schmerz ist eine Fensterzahl und ein Einfügen, nicht „Ineffizienz“ oder „Reibungsverlust“. #### Zweite Person, Präsens, aktiv „Du schreibst die Nachfassmail selbst.“ Der Leser macht das Verb. Passiv und Nominalisierung sind die Stellen, an denen Verkaufstext stirbt. #### Sag die Grenze laut „Das Coaching kostet dich pro Woche zwei Stunden, und die musst du haben.“ Zu benennen, was fehlt, kostet nichts und kauft alles. #### Die Headline ist ein Satz, mit Punkt „Ich mache Unternehmen unabhängig.“ „So arbeitest du damit.“ Der Punkt ist eine Hausgewohnheit, und er ist das, was eine Headline davon abhält, wie ein Slogan zu klingen. Er gilt auch in Versalien. ### Anrede Deutsch, durchgehend **du**. Ohne Ausnahme, in jedem Asset: Anzeige, Landingpage, E-Mail, Onboarding, Angebot, Anschreiben zur Rechnung. Die Messung zeigt 205 du-Formen gegen 2 Sie-Formen — das ist konsistent, und es bleibt so. - **Niemals im Funnel wechseln.** „Du“ in der Anzeige und „Sie“ im Angebot liest sich, als sei niemand zuständig. - **Wenn Englisch dazukommt: you,** britische Schreibung. Wenn Spanisch dazukommt — die Firmierung sitzt in Barcelona: `tú`, nicht `usted`. - **Das gilt auch für Formulare und Fehlermeldungen.** „Bitte gib deine E-Mail-Adresse ein“, nicht „Bitte geben Sie …“. ### Die Muster, die wir nicht benutzen Jedes davon steht heute auf emmawoelk.com. Einzeln ist keines davon falsch. Zusammen, im selben Rhythmus, über jeden Abschnitt hinweg, sind sie die Signatur generierter Werbetexte — und der Leser, der schon hundert davon gesehen hat, erkennt sie, bevor er den zweiten Satz liest. - NEIN: „Eigenständigkeit statt Abhängigkeit – Wer sich auf andere verlässt, verliert die Kontrolle.“ - JA: „Wenn deine Agentur zwei Wochen für eine Landingpage braucht, kannst du zwei Wochen lang nichts testen.“ - NEIN: „Smarter statt härter arbeiten – Manuelle Prozesse kosten Zeit und Nerven.“ - JA: „Drei der Nachfassmails, die du gerade von Hand schreibst, verschickt HubSpot ohne dich.“ - NEIN: „Skalierung ohne Grenzen – Wachstum sollte kein Zufall sein.“ - JA: „Marcus hat seine Aufträge in zwei Wochen um 50 % gesteigert — mit Anpassungen an Website und Kampagnen.“ - NEIN: „Butter bei die Fische, so geht es 87 % aller Unternehmern!“ - JA: „In über 250 Projekten war es fast immer dasselbe Muster.“ - NICHT: **Der Dreierrhythmus als Standardtakt.** „effizient, modern und unabhängig“ — in 18 Sätzen auf vier Seiten. Nimm zwei Punkte oder vier. Brich den Takt. - NICHT: **„X statt Y“ als Satzmotor.** Einmal pro Seite ist eine Entscheidung. Viermal ist ein Verrat. - NICHT: **Der Gedankenstrich als Taktgeber.** In 26 % aller Sätze — also in jedem vierten — steht ein _–_ als Atempause statt als Grammatik. Ziel: höchstens einer pro 150 Wörter. - NICHT: **Gleichlange Sätze.** Wenn Mittel und Median eines Absatzes weniger als zwei Wörter auseinanderliegen, hat eine Maschine geschrieben — oder hätte es gekonnt. - NICHT: **Eröffnen mit einer rhetorischen Frage.** „Bist du bereit …?“, „Sei ehrlich, steckst du gerade …?“, „Hast du genug von …?“ — 31 Fragesätze auf vier Seiten. Eine Frage pro Seite reicht. - NICHT: **Ausrufezeichen als Verstärker.** 15 Sätze auf vier Seiten. Eines pro Seite, und nur, wenn jemand tatsächlich ruft. - NICHT: **Abstrakte Nomen, die das Verkaufen übernehmen:** nachhaltig, ganzheitlich, skalierbar, maximal, revolutionieren, Game-Changer, nahtlos, Level, Universum, durchstarten. - NICHT: **Ergebnisse behaupten, die nicht gemessen wurden.** „Dein Vertrieb läuft wie von selbst.“ Tut er nicht. Er läuft, wenn jemand ihn aufgesetzt hat und pflegt. ### Wörter **Nimm diese** agenturfrei · inhouse · selbst steuern · Fahrplan · Hebel · Live-Coaching · 1:1 · Onboarding · Funnel · Leadmagnet · Bestandskunde · Cross-Selling · HubSpot · Automatisierung · in zwei Wochen · pro Monat · in über 250 Projekten **Nimm diese nicht** nachhaltig · ganzheitlich · skalierbar · revolutionieren · Game-Changer · nahtlos · maximal · absolut · Next Level · Coaching-Universum · durchstarten · Booster (unqualifiziert) · Lösung (unqualifiziert) · unfassbar · 10× #### Ein Wort, das gesondert erwähnt gehört **„gezielt“ steht 26-mal auf vier Seiten.** Es ist das Lieblingswort dieser Marke, und es sagt in keinem einzigen Fall etwas, was der Satz nicht schon sagt. „Gezielt Kunden gewinnen“ ist „Kunden gewinnen“. Streich das erste, dann das zweite. ### Bevor du veröffentlichst - **Lies es laut.** Alles, was du einem Kunden im Termin nie sagen würdest, fällt dabei heraus. - **Zähl die Gedankenstriche.** Mehr als einer pro 150 Wörter: streichen. Der Ausgangswert liegt bei einem in jedem vierten Satz. - **Miss einen Absatz.** Liegen Mittel und Median der Satzlängen weniger als zwei Wörter auseinander, schreib zwei Sätze um — einen kürzer, einen länger. - **Such das konkrete Detail.** Keine Zahl, kein Toolname, keine echte Situation — dann ist der Text nicht fertig. - **Prüf jede Zahl auf ihren Besitzer.** Name, Firma, Zeitraum. Sonst kommt sie raus. ## 08 Im Einsatz Dasselbe System an den Orten, an denen es tatsächlich auftaucht. Schwarzer Grund für Web, Social und Video. Weißes Papier für alles, was gedruckt, unterschrieben oder angehängt wird. ### Website-Header und Hero - **Eyebrow in Gelb, Headline in Weiß, ein gelber Button.** Drei Elemente, eine Signalfarbe, und die Signalfarbe zeigt zweimal auf dasselbe: worum es geht und was zu tun ist. - **Ein Button pro Hero.** Der zweite ist ein Textlink, kein zweiter Knopf. - **Kein Marker im Hero, wenn der Button gelb ist.** Zwei gelbe Flächen übereinander, und keine gewinnt. - **Der Vorspann bleibt unter 55 Zeichen Zeilenmaß** und unter drei Zeilen. Was danach kommt, liest niemand mehr im ersten Bildschirm. ### E-Mail-Signatur - **logo-claim-light, 46 px hoch.** Die Firmierung gehört in die Signatur, weil dort die Pflichtangaben stehen. - **Kein Bildbanner, kein Zitat, keine Social-Icon-Reihe, kein „Denk an die Umwelt“.** Eine Signatur ist eine Visitenkarte, kein Werbeplatz. - **Kein Gelb in der Signatur.** Auf Weiß, in 13 px, ist Gelb entweder unlesbar oder eine Fläche, die im Posteingang schreit. ### Folie - **Das Monogramm sitzt in der Ecke,** 20–24 px hoch, in der Grundversion der Folie. Nicht der Schriftzug — der ist auf jeder Folie zu laut. - **Auf Papierfolien wird das Eyebrow zu Ocker #5C5100.** Es ist derselbe Gedanke wie Gelb auf Schwarz, nur lesbar. - **Zwei Schriftgrößen pro Folie.** Überschrift und Fließtext. Alles Weitere ist eine zweite Folie. - **Ein Marker pro Deck,** nicht pro Folie. Sonst ist er kein Marker mehr, sondern die Grundfarbe. ### Anzeige und Key Visual Alles Weitere zu Formaten, Sicherheitsrändern, Carousel-Typen und Videoframes steht im [Social-Teil](https://ci.emmawoelk.com/socialmedia). ### Dokument auf Papier - **Kopf:** `logo-claim-light`, 150 px breit, links oben. Kein zweites Logo, kein Balken. - **Text:** Inter 400, 10,5 pt, Zeilenabstand 1,5, Tinte `#000000`. Überschriften Barlow 900 in Versalien. - **Der gelbe Marker darf einmal pro Dokument vorkommen** — in der Zeile, auf die es ankommt: der Preis, der Termin, die Zusage. - **Fußzeile:** Firmierung, Anschrift, USt-IdNr. Auf jedem Dokument, das das Haus verlässt. - **Keine farbige Fläche über eine ganze Druckseite.** Gelb auf A4 ist im Druck ein anderes Gelb als am Bildschirm und kostet ein Vermögen an Farbe. ## 09 Übergabe Ins Stylesheet kopieren, und die Identität steht im Code statt in Review-Kommentaren. ### Die Tokens ``` /* Emma Woelk — Marketing & Sales · Marken-Tokens v1.0 */ :root{ /* Marke — damit wird geführt */ --gelb:#FFF700; /* Signalgelb. Schrift auf Schwarz, Fläche auf Weiß. */ --schwarz:#000000; /* Grund für Web, Social, Video */ --weiss:#FFFFFF; /* Fließtext auf Schwarz, Papier für Print */ --tinte:#000000; /* Text auf Papier. Wie die Buchstaben im Logo. */ --flaeche:#191919; /* Karten und Panels auf Schwarz */ /* Sekundär — Fläche, Schatten, Verlauf. Nie ein zweiter Akzent. */ --magenta:#DF579D; --violett:#8075D9; --verlauf:linear-gradient(180deg,#8075D9,#DF579D); /* Abgeleitet und Status */ --ocker:#5C5100; /* Gelb als Schriftfarbe auf Papier */ --erfolg:#35C88A; --fehler:#FF5A5F; /* nur Oberfläche */ /* Schrift — zwei Familien, drei Rollen */ --ruf:"Barlow Condensed",Impact,sans-serif; /* H1, H2, CTA, Menü — VERSAL */ --stark:"Barlow",Helvetica,sans-serif; /* H3, Zitat — VERSAL bzw. gemischt */ --text:"Inter",-apple-system,sans-serif; /* alles ab H4 — gemischt */ /* Sperrung wächst nach unten, nicht nach oben */ --sp-h1:.005em; --sp-h2:.01em; --sp-h3:.02em; --sp-text:0; --sp-eyebrow:.2em; --sp-button:.025em; /* Button */ --btn-radius:50px; --btn-padding:20px 40px; --btn-border:2px; } ``` ### Der Button Ein Knopf im ganzen System: gelbe Fläche, schwarze Schrift, Versalien, voller Radius. Der sekundäre Knopf ist kein zweiter Knopf, sondern ein unterstrichener Textlink. ``` .btn{ display:inline-block; font-family:var(--text); font-weight:700; font-size:16px; line-height:1.25; letter-spacing:var(--sp-button); text-transform:uppercase; text-decoration:none; background:var(--gelb); color:var(--schwarz); padding:var(--btn-padding); border:var(--btn-border) solid transparent; border-radius:var(--btn-radius); } /* Hover ändert die Farbe nicht — Gelb hat keine hellere Stufe. Was sich ändert, ist der Schein, und der bleibt weiß und schwach. */ .btn:hover{ box-shadow:0 0 20px rgba(255,255,255,.28); } .btn:focus-visible{ outline:2px solid var(--weiss); outline-offset:3px; } /* Zweitrangig: Textlink, kein zweiter Knopf */ .btn-sek{ color:var(--weiss); text-decoration:underline; text-underline-offset:4px; text-transform:uppercase; font-weight:700; font-size:16px; letter-spacing:var(--sp-button); } ``` ### Der Scrollbalken Den Balken zeichnet der Browser, und wenn niemand etwas sagt, zeichnet er ihn grau. Auf Schwarz gehört dieses Grau niemandem. Jede Fläche dieser Marke setzt ihn, diese Seite eingeschlossen. ``` /* Zwei Syntaxen, weil beide gebraucht werden. scrollbar-color deckt Firefox und Chrome ab 121 ab, ::-webkit-scrollbar den Rest. Wo eine Engine scrollbar-color versteht, ignoriert sie die WebKit-Regeln. Beide Wege führen zum selben Gelb, und scrollbar-color vererbt sich — es gilt also in jedem verschachtelten Scrollbereich ohne weiteres Zutun. */ html{ scrollbar-color:#FFF700 #191919; } ::-webkit-scrollbar { width:13px; height:13px; } ::-webkit-scrollbar-track { background:#191919; } ::-webkit-scrollbar-thumb { background:#FFF700; border-radius:99px; border:3px solid #191919; } ::-webkit-scrollbar-corner{ background:#191919; } ``` Gelb ist hier richtig, obwohl Gelb sonst als Bedienfarbe sparsam eingesetzt wird: gegen `#191919` erreicht es 15,5 : 1, und ein Scrollbalken ist ein Bedienelement, für das die WCAG 3 : 1 verlangt. Ein Hover-Zustand entfällt — Gelb hat keine hellere Stufe. ### Schrift einbinden Sechzehn woff2-Dateien nach `/fonts/`, die fertigen `@font-face`-Regeln aus [fonts.css](https://ci.emmawoelk.com/fonts/fonts.css) übernehmen. Im HubSpot-Theme ersetzen sie den Google-Fonts-Aufruf unter `/_hcms/googlefonts/`. Danach zeigen `--primary-font` und `--secondary-font` auf die lokalen Familien, und die Sperrungswerte aus Abschnitt 04 werden auf die Überschriftenebenen gelegt. #### Was dabei zuerst kaputtgeht Das HubSpot-Theme setzt `--h1-transform:uppercase` per CSS. Wer die Headline zusätzlich in Versalien _tippt_, bekommt keinen Unterschied am Bildschirm — aber Screenreader lesen sie buchstabenweise vor, und im Newsletter ohne CSS steht plötzlich Geschrei. Versalien sind eine Anweisung an die Darstellung, nie an den Text. ## Rechtliches Emma Woelk — Marketing & Sales, ein Unternehmen der roboconsulting SL, Carrer de Lluís el Piadós 7, 08003 Barcelona, Spanien. USt-IdNr. ESB70935457. Vertreten durch Emma Woelk. [emmawoelk.com](https://www.emmawoelk.com) · [Impressum](https://www.emmawoelk.com/impressum) · [Datenschutz](https://www.emmawoelk.com/datenschutz) · [Nutzungsbedingungen](https://www.emmawoelk.com/nutzung) · [Media-Kit](https://www.emmawoelk.com/mediakit) Lucide-Icons: ISC. Barlow und Inter: SIL Open Font License 1.1. Die Logodateien sind nicht lizenzfrei und dürfen nur für Emma Woelk — Marketing & Sales verwendet werden.