01
Gegenfolie
Bau keine Gegenfolie auf, die niemand behauptet hat. Fang bei der Sache an.
Das Problem ist nicht die Technik, sondern die Freigabe.
Die Technik läuft. An der Freigabe hängt es: vier Wochen pro Kampagne.
Collective Brain · Corporate Identity
Der Markenleitfaden
Schwarze Wortmarke, gelber Punkt, viel Luft drumherum. Mehr braucht die Marke nicht. Hier steht, wie Logo, Farben, Schrift, Bilder und Sprache zusammengehören. Die Dateien nimmst du direkt mit, die Werte kannst du nachrechnen.
- Markenkern
- Kreation und KI-Marketing
- Akzent
- CB-Gelb #FFD600
- Schrift
- Futura und Lato
- Standorte
- Hamburg und Herrnhut
01
Markenkern
Wir sind eine Digitalagentur aus der Hamburger Innenstadt, zweiter Standort Herrnhut. Kreation trifft KI-Marketing, und was wir verkaufen, benutzen wir jeden Tag selbst. Unsere Werkzeuge, Messwerte und Fehlgriffe stehen öffentlich auf dieser Website. Diese Seite räumt den nächsten Fehlgriff weg: Bis August 2026 liefen auf collectivebrain.de zwei Gelbtöne und drei verschiedene Balkenmaße nebeneinander. Ab hier steht, was gilt.
Der Auftritt ist streng. Eine Schrift für Überschriften, eine für Text, eine Akzentfarbe. Wer mehr will, braucht einen Grund.
Claim Kreation und KI-Marketing aus Hamburg
- Beweis schlägt Behauptung Neben jeder Aussage steht eine Zahl, eine Quelle oder ein Beispiel. Sonst streichen wir den Satz.
- Sparsam mit Gelb Die Farbe wirkt, weil sie selten kommt. Eine gelbe Fläche pro Bildschirm reicht, den Rest macht Weißraum.
- Wir duzen Auf der Website, in Social Media und in jeder Mail, auch an die Geschäftsführung.
- Nichts, was nur hübsch ist Keine Farbstreifen an Kastenrändern, keine Striche vor Labels, kein Schatten als Deko.
02
Wortmarke
COLLECTIVE BRAIN, geometrische Grotesk, gesperrt gesetzt, am Ende der gelbe Punkt. Der Punkt klebt am Wort: nie einzeln vergrößert, nie verschoben. Alles liegt als Vektor vor und braucht keine installierte Schrift. Nimm die Datei, bau die Marke nicht nach.
Welche Variante auf welchem Grund
Wähle einen Untergrund.
03
Signet und Favicon
Wird die Wortmarke zu breit, stehen die beiden Buchstaben CB mit dem Punkt allein. Das ist die einzige erlaubte Kurzform. Kein anderes Kürzel, kein Kreis um die Buchstaben, kein Zusatzsymbol. Leistungsbereiche bekommen auch keine eigene Wortmarke.
Als Favicon und App-Icon läuft das Signet. Bei 16 Pixel ist der Punkt noch da, darunter setzen wir die Marke nicht mehr ein.
04
Der Punkt
Der gelbe Punkt ist das kleinste Stück Marke, das wir haben. Er beendet die Wortmarke, er steht hinter dem Domainnamen im Footer, er sitzt am Signet. Nur dort darf Gelb ohne Begründung auftauchen, überall sonst musst du eine haben.
- Immer CB-Gelb #FFD600, nie eine andere Farbe.
- Immer am Ende. Nie vorangestellt, nie mittig.
- Nie als Aufzählungszeichen, nie als Trennzeichen zwischen Wörtern.
- In der Mono-Variante geht er in der Grundfarbe auf, statt zu fehlen.
collectivebrain.de
Footer-Schreibweise
05
Schutzraum und Mindestgröße
Rundum bleibt mindestens der Durchmesser des Punktes frei. Bei der Wortmarke sind das ungefähr ein Achtel der Markenbreite in der Höhe. In diese Zone kommt nichts. Kein Text, kein Bildrand, kein zweites Logo.
- Wortmarke digital: mindestens 120 Pixel breit.
- Wortmarke im Druck: mindestens 30 Millimeter breit.
- Signet digital: mindestens 24 Pixel hoch, als Favicon 16 Pixel.
- Der Untergrund bleibt ruhig und hat mindestens 4,5:1 Kontrast zu der Variante, die du nimmst.
06
Das bitte nicht
Die Marke wird nicht nachgebaut und nicht nachgezeichnet. Fehlt dir eine Variante, sag Bescheid, dann kommt sie ins Kit. Die sechs Beispiele unten hat sich niemand ausgedacht. Genau so kam die Marke aus Präsentationen und Kundenlayouts zurück.
07
Farben
Diese Palette ist gezählt. Am 27. August 2026 sind alle Hex-Werte aus Quelltext und Stylesheets der Website durchgelaufen, die häufigsten gelten ab jetzt. Die Zahl an jeder Farbe ist die Zahl ihrer Fundstellen. Klick ein Feld an, dann liegt der Wert in der Zwischenablage.
Akzent
Ein Gelb, mehr gibt es nicht. Es trägt den Punkt, die Buttons und jede Fläche, die auffallen soll.
Schrift
Drei Stufen reichen. Gemessen stand Ink Leise auf #7A7A75, und das schafft die Kontrastprüfung bei Labelgrößen nicht. Deshalb gilt ab jetzt der dunklere Wert.
Fläche
Weiß ist der Grund. Sand bricht lange Seiten auf und spart die zweite Farbe.
Linie
Haarlinien statt Schatten. Auf Weiß die kühle Linie, auf Sand die warme.
Tokens mitnehmen
:root {
--cb-gelb: #FFD600;
--cb-gelb-tief: #F6C13C;
--cb-ink: #0A0A0A;
--cb-ink-weich: #2A2A2A;
--cb-ink-leise: #6E6E68;
--cb-papier: #FFFFFF;
--cb-sand: #FAF9F5;
--cb-linie: #ECECEC;
--cb-linie-warm: #E8E6DC;
} Abteilungsfarben
Fünf Leistungsseiten schleppen aus der Divi-Zeit je eine eigene Akzentfarbe mit. Die darf den Kicker und eine Fläche einfärben. Der Hauptbutton bleibt gelb, sonst sieht die Handlungsaufforderung auf jeder Seite anders aus. Heute stimmt das noch nicht überall, und neue Seiten bekommen keine neue Abteilungsfarbe. Aus derselben Zeit liegen drei Wortmarken mit eingefärbtem Punkt im Verzeichnis (Brand Design, Film, Web Development). Seit der Umstellung auf native Seiten bindet sie niemand mehr ein, und dabei bleibt es.
- Brand Design #33F4C4 Türkis
- Web Development #00D1FF Cyan
- Corporate Film #E583D9 Rosé
- Performance Marketing #FF8A2B Orange
- Content Creation #0E0E0E Schwarz
Altlasten, die weg müssen
Diese Werte hängen noch im Code fest und gehören nicht zur Marke. Wer eine Seite anfasst, räumt sie gleich mit auf.
| Wert | Fundstellen | Wo | Was tun |
|---|---|---|---|
| #FFCB03 | 36 | Divi-Erbe, Let's-Talk-Band und Snapshot-Seiten | auf #FFD600 umstellen |
| #0E0E0E | 137 | ältere native Seiten | auf #0A0A0A umstellen |
| #141413 | 45 | Angebots- und Präsentationsvorlagen | auf #0A0A0A umstellen |
| #000000 | 16 | Footer und Alt-CSS | auf #0A0A0A umstellen |
| #7A7A75 | 33 | Labels und Meta auf vielen Seiten | auf #6E6E68 umstellen, sonst fällt der Kontrast durch |
| #FFD700 | 1 | Punkt im weißen Footer-Logo (PNG) | durch collective-brain-wortmarke-weiss.svg aus dem Kit ersetzen |
| #33F4C4 | 12 | Seite Brand Design | bleibt als Ausnahme, sonst nirgends benutzen |
08
Kontrast
Gelb auf Weiß kann niemand lesen, Gelb auf Ink knallt. Damit du nicht raten musst, stehen hier die gerechneten Werte nach WCAG 2.1. Ab 4,5:1 besteht normaler Text, ab 3:1 großer Text ab 24 Pixel oder fetter Text ab 19 Pixel.
| Vordergrund | Hintergrund | Wert | Normal | Groß | Verwendung |
|---|---|---|---|---|---|
| Ink | Papier | 19.80:1 | AAA | AAA | Standardtext |
| Ink Weich | Papier | 14.35:1 | AAA | AAA | Fließtext |
| Ink Leise | Papier | 5.13:1 | AA | AAA | Labels und Meta, jede Größe |
| Ink | CB-Gelb | 14.02:1 | AAA | AAA | Button, gelbes Band |
| Ink | Sand | 18.79:1 | AAA | AAA | Text auf Karte |
| Papier | Ink | 19.80:1 | AAA | AAA | Text auf dunkler Fläche |
| CB-Gelb | Papier | 1.41:1 | fällt durch | fällt durch | Gelbe Schrift auf Weiß |
| CB-Gelb | Ink | 14.02:1 | AAA | AAA | Gelbe Schrift auf Ink |
Rechne selbst nach
Beispieltext in dieser Kombination.
09
Typografie
Zwei Schriften, klar getrennt. Futura macht die Struktur: Überschriften, Eyebrows, Buttons und Navigation, immer in Versalien. Lato macht alles, was wirklich gelesen wird. Eine dritte Schrift gibt es nicht.
Display · Futura · 700 Überschriften, Wortmarke, Buttons
COLLECTIVE
BRAIN.
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 &.,:!?
Text · Lato · 400 Absätze, Karten, Formulare
Wir bauen Marken, Websites und Kampagnen. Und wir messen, was sie bringen.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &.,:!?
Skala
| Rolle | Größe | Zeilenhöhe | Schnitt | Einsatz |
|---|---|---|---|---|
| Display | clamp(2.3rem, 4.8vw, 3.7rem) | 1.04 | Futura 700, Versalien | H1 auf Landingpages |
| Überschrift 2 | clamp(1.5rem, 3.2vw, 2.3rem) | 1.1 | Futura 700, Versalien | Sektionstitel |
| Überschrift 3 | 1.08rem | 1.3 | Futura 700, Versalien | Kartentitel |
| Fließtext | 1rem bis 1.16rem | 1.6 bis 1.68 | Lato 400 | Absätze, Karten |
| Eyebrow | 0.82rem | 1.2 | Futura 700, Versalien, 0.2em Sperrung | Kicker über der Überschrift |
| Button | 0.88rem | 1 | Futura 700, Versalien, 0.08em Sperrung | alle Schaltflächen |
- Überschriften stehen in Versalien, 0.02em bis 0.04em gesperrt, nie kursiv.
- Fließtext bleibt in Satzschreibung, höchstens 65 Zeichen pro Zeile.
- Fett markiert Zahlen und Namen, keine ganzen Sätze.
- Aufzählungen bekommen schwarze Marker. Gelb bleibt der Akzent.
10
UI-Bausteine
Runde Buttons und Haarlinien, nirgends ein Schatten. Beim Hover geht ein Element zwei Pixel hoch, mehr Bewegung gibt es nicht.
Buttons
Primär Sekundär Auf Sand
radius 100px · padding 15px 28px · Futura 700 · 0.08em
Eyebrow und Balken
Corporate Identity Überschrift
Balken 64 × 5 px, Radius 2 px, CB-Gelb, 18 px unter der H1. Die Varianten 72 × 6 und 96 × 6 sind Altlast.
Karte
Kartentitel
Eine Karte trägt Rahmen und Radius, keinen Schatten.
Mehr dazubg #FFFFFF · border 1px #ECECEC · radius 14px · padding 26px
Textlink
Ein Link im Fließtext wird gelb unterstrichen und bleibt schwarz.
underline 2px CB-Gelb · offset 3px · Textfarbe bleibt Ink
Bau das nicht: farbige Streifen an der linken Kastenkante, kurze Striche vor Sektions-Labels, Verläufe hinter Text, mehr als eine gelbe Fläche pro Bildschirm.
11
Bildsprache
Bilder zeigen Arbeit und echte Orte. Gelb kommt darin höchstens als Gegenstand vor, nie als Filter über dem ganzen Bild.
So ja
- Echte Leute aus dem Team bei echter Arbeit, fotografiert statt gestellt.
- Hamburger Innenstadt und Herrnhut, also die Orte, an denen wir wirklich sitzen.
- Ein gelber Gegenstand als Brücke zur Marke, höchstens einer pro Bild.
- Ruhige Hintergründe, auf denen Wortmarke und Text noch stehen können.
So nicht
- Erfundene Gesichter als eigenes Team oder als Kundenstimme.
- Handschlag am Konferenztisch, Glühbirne, Zahnrad, Roboterhand.
- Gelb als Verlauf, Glow oder Farbfilter über dem ganzen Bild.
- Text im Bild, der genauso gut daneben stehen könnte.
Pflicht seit 2. August 2026
Bilder aus der KI kennzeichnen wir sichtbar am Bild und zusätzlich in den IPTC-Metadaten. Das verlangt Artikel 50 der KI-Verordnung, und es gilt auch für Entwürfe, die nur intern herumgehen. Erfundene Gesichter treten nie als unser Team oder als Kundenstimme auf.
12
Sprache
Wir duzen und wir schreiben kurz. Dazu halten wir uns an acht Regeln gegen die Muster, an denen jeder einen maschinell geschriebenen Text erkennt. Jede Regel steht hier mit dem Satz, der so nicht rausgeht, und dem, der stattdessen dasteht.
02
Buzzword
Passt das Wort auch zu einem Kettenschloss, sagt es nichts. Gesperrt sind unter anderem ganzheitlich, nahtlos, Game-Changer, Deep Dive, Journey, Mindset, Next Level.
Eine ganzheitliche, nahtlose Lösung.
Ein Import, ein Export, kein Copy-and-paste dazwischen.
03
Dramatische Pause
Stell keine Frage, die du dir im nächsten Satz selbst beantwortest.
Die Wahrheit? Die meisten Projekte scheitern früher.
Zwei von drei Projekten kippen vor dem Rollout.
04
Formularsprache
Drei Aufzählungspunkte mit demselben Verb liest niemand bis zum vierten.
Prüfen Sie … Definieren Sie … Messen Sie …
Eine Zahl, ein Satz, eine Anweisung, ein Beispiel.
05
Dreiergruppe
Kein Takt-Dreier ohne Inhalt. Zwei Punkte, wenn es zwei sind, vier, wenn es vier sind.
Mut. Klarheit. Fokus.
Zwei Ansprechpartner, ein Preis, ein Termin.
06
Spannungsansage
Spannung entsteht im nächsten Satz oder gar nicht.
Und genau hier wird es spannend.
Nach acht Wochen lag die Ladezeit bei 1,2 Sekunden.
07
Etikett statt These
Kündige keinen Widerspruch an. Ist die These unbequem, merkt das jeder ohne Aufkleber.
Unpopuläre Meinung: SEO ist nicht tot.
Wir raten von einem Blog ab, wenn niemand ihn pflegen kann.
08
Gedankenstrich
Kein Gedankenstrich als Stilmittel, Komma und Punkt tun es auch. Das Wort ehrlich benutzen wir nie.
Das Ergebnis war gut, sehr gut sogar, ehrlich gesagt besser als geplant.
Das Ergebnis lag 30 Prozent über dem Ziel.
Text gegenprüfen
Hier laufen dieselben fünfzehn Muster, die unser Prüfer vor jedem Deploy über Magazin, Landingpages und Social-Texte schickt. Dein Text bleibt im Browser und geht nirgendwo hin.
Noch nichts geprüft.
Wir duzen auch die Geschäftsführung. Ausnahme sind Rechtstexte wie Impressum, Datenschutz und AGB. Kleine Zahlen schreiben wir aus, gemessene Zahlen kommen als Ziffer. Die roten Beispiele oben sind Zitate und schlagen im Prüfer natürlich an, das ist so gewollt.
13
Marken im Verbund
Collective Brain steht nicht allein. Jede Marke der Gruppe hat ihre eigene Farbe und ihren eigenen Leitfaden. Gemischt wird nichts. Kein CB-Gelb auf einer Progressive-Mind-Folie, kein Doppelpfeil auf einer CB-Seite.
Collective Brain Kreation und KI-Marketing aus Hamburg diese Seite Progressive Mind IT-Betrieb und Systeme, mit eigenem Leitfaden progressive-mind.com/brand Mr.Site Websites im Abo für Handwerk und Gewerbe, eine Marke der Collective Brain GmbH mr-site.de WhiteFox Automations Schwestermarke für KI-Automatisierung und Workflow-Building whitefox-automations.com
14
Hol dir das Kit
Im Paket liegen Wortmarke und Signet in je vier Varianten als SVG und als PNG mit transparentem Grund, dazu die Design-Tokens als JSON. Fehlt dir eine Variante, schreib uns. Dann kommt sie ins Kit, statt dass jemand sie nachbaut.
Stand 27. August 2026 · Collective Brain GmbH, Kattrepelsbrücke 1, 20095 Hamburg
- 8× Wortmarke und Signet als SVG
- 8× dieselben Dateien als PNG, transparent
- 1× collective-brain-tokens.json
- 1× diese Seite zum Nachschlagen