Wie consultingheads aussieht, klingt und gebaut ist — für Agenturen, Partner, Presse und alle, die etwas für uns gestalten. Verbindlich sind die Werte auf dieser Seite; die maschinenlesbare Fassung der Gestaltungswerte liegt unter /design-system.json.
Erzeugt am 19.09.2026 aus css/_tokens.css (sha256 c1816c9ee29b7e39…, 78 Token) und dem Regelregister (37 Zeilen). Diese Seite wird erzeugt, nicht von Hand gepflegt.
Wer wir sind, wie wir heissen und welche Aussagen belegt sind.
„consultingheads. Wenn Ergebnisse entscheiden.“ Er steht auf eigener Zeile und wird nie in einen Fließtext eingebaut. Logo und Claim werden NIE als eine Grafik gesetzt — der Claim ist Text, sonst existiert er für Suchmaschinen und Screenreader nicht.
consultingheads, klein und ein Wort, auch am Satzanfang. Die Gesellschaft heißt consultingheads GmbH. Nicht ConsultingHeads, nicht Consultingheads.
VISION: „Wir verbinden Menschen, um Herausforderungen zu lösen.“ ENTITÄTSSATZ: consultingheads vermittelt freiberufliche Unternehmensberater, Interim Manager und IT-Experten an Unternehmen, Beratungen und Private-Equity-Gesellschaften — von der Strategie bis zur Umsetzung. Corporates, Mittelstand und Scale-ups erhalten innerhalb von 24–36 Stunden qualitätsgesicherte Profile aus einem kuratierten Netzwerk von über 23.000 Expertinnen und Experten. SELBSTBILD: „Wir leben Netzwerk … Wir sind im People Business tätig.“ HERKUNFT: 2016 als Spin-off der Case-Interview-Community PrepLounge gegründet, 2021 Ausgründung und Verkauf an die heutige Geschäftsführung. SITZ: consultingheads GmbH, Borsigstr. 1, 51381 Leverkusen.
23.000 Beraterinnen, Experten und Interim Manager im Netzwerk · 24–36 Stunden bis zu qualitätsgesicherten Profilen (DE und EN identisch) · 11 Jahre durchschnittliche Berufserfahrung · 2016 Gründungsjahr, 2021 Ausgründung. Die Netzwerkgröße wächst und ist in Pressemeldungen datiert. Wer eine ältere Zahl in einer publizierten Meldung findet, lässt sie stehen: Pressemeldungen sind datierte Dokumente und werden nicht nachträglich geändert.
(1) Persönliche Verbindungen → Menschen im Bild, keine Stockfoto-Kulisse; Profilkarten mit echtem Gesicht; Wir-Sprache statt Passiv. (2) Kundenorientierung mit Passion → jede Seite endet mit genau EINEM klaren nächsten Schritt, ein Primärbutton je Bildschirm, nicht drei. (3) Ehrlichkeit, Fairness, Loyalität → Zahlen immer mit Quelle und Stand, Auszeichnungen mit Jahr. (4) Schnelle, praktikable Lösungen → kurze Sätze, kurze Formulare, sichtbare Reaktionszeit; „24–36 Stunden“ ist das wiederkehrende Motiv. (5) Partnerschaftliches Wachstum → Referenzen und Case Studies vor Werbeversprechen, Kundenlogos als Beleg statt als Dekor.
Vier Leistungen, so benannt wie im Footer und in der Hauptnavigation — in keinem Medium umbenannt oder abgekürzt. (1) FREIBERUFLICHE UNTERNEHMENSBERATER: Strategie, Konzeption, Transformation; englisch freelance management consultants, NICHT freelance consultants. (2) IT- UND FACHEXPERTEN: Umsetzung und Implementierung, der volumenstärkste Bereich der dynamischen Rollenseiten. (3) INTERIM MANAGER: Führung auf Zeit, Vakanzüberbrückung; englisch interim managers. (4) EXPERTENTEAMS: mehrere Profile als eingespieltes Team statt Einzelbesetzung; englisch expert teams.
Nicht Kandidat, nicht Ressource, nicht Bewerber. Es sind Beraterinnen, Experten, Interim Manager — oder heads.
Deutsch ist primär, Englisch liegt unter /en/. Der englische Baum ist KEIN Nebenprodukt — Hausnamen, Claim und Kennzahlen gelten dort gleichermaßen. Hausnamen werden nicht frei übersetzt. Deutsche Fachvokabeln bleiben im englischen Text nur stehen, wo sie im Satz erklärt sind. Der Fließtext einer publizierten Pressemeldung wird nicht nachträglich geändert — sie ist ein datiertes Dokument.
Vier Formen, ein Schutzraum, und die Farbe folgt dem Untergrund.
WORTMARKE (214×16 px) ist die Hauptform: Header, Footer, E-Mail-Kopfleiste, Dokumente, Anzeigen — immer wenn Platz in der Breite ist. BILDMARKE (522×261) freigestellt, wo die Wortmarke unter 100 px Breite fiele UND keine Fläche gewünscht ist: Wasserzeichen, Aufzählungsmarke, Prägung. KACHEL (2048×2048, Mint, Marke 86 % der Breite, Rand 7 %) ist die Plattformform für ALLES Quadratische: Social-Profilbilder, schema.org-Logo, App-Kachel, Favicon, Verzeichnisse. KACHEL MIT NAMENSZUG nur für ausdrückliche Einzelfälle, in denen die Marke ohne umgebenden Text nicht erkennbar wäre — keine gleichrangige Alternative und nie der Vorgabewert.
Primärvariante für quadratische Plätze ist die grüne rechteckige Kachel nur mit dem Symbol. Die Kombination Bildmarke plus Wortmarke darunter ist die Ausnahmevariante. Geometrie: Fläche mint-500, Marke #212121 auf 86 % der Kantenbreite, Rand 7 %. Dateien liegen in 2048 bis 64 px vor.
Rundum 1× Logohöhe frei — an die Höhe gebunden, damit die Regel in jeder Größe und jedem Medium gilt. MINDESTBREITEN: Bildschirm-Kopfzeile 160 px Wortmarke · Fußzeile 140 px · E-Mail-Kopfleiste 214 px · Bildschirm eng ab 32 px die Bildmarke statt der Wortmarke · Druck 30 mm Wortmarke · Druck eng 8 mm Bildmarke.
Auf Weiß und hellen Flächen bis ink-100: Wortmarke in SCHWARZ. Auf Mint #76FFA0: ebenfalls SCHWARZ (12,56:1). Auf ink-900/ink-950 und auf Fotos: Wortmarke in WEISS. NIE Wortmarke in Mint — 1,27:1 auf Weiß; markengrüner Schriftzug heißt mint-700, und auch das nur, wenn Schwarz nicht geht.
Nicht auf unruhigem Bildbereich ohne Abdunklung platzieren · nicht in einen farbigen Kasten setzen · nicht verzerren · keinen Schatten und keine Kontur hinzufügen · nicht neu setzen oder nachbauen · die Kachel mit Namenszug nicht als Standard verwenden · Logo und Claim nicht als eine Grafik ausliefern.
Auszeichnungen werden nie freigestellt, eingefärbt oder größer als das consultingheads-Logo gesetzt, und tragen immer das Jahr. Belegter Bestand: brand eins/Statista 2019, 2020, 2021, 2024, 2025, 2026 · F.A.Z.-Institut TOP Berater 2026 · kununu Top Company 2023, 2024, 2025. kununu gehört zur Arbeitgebermarke, nicht in die Kundenansprache.
Mint ist die Marke — und eine Fläche, nie eine Schriftfarbe.
--ch-mint-50#F0FFF51,03:1 auf Weiß · nur Fläche--ch-mint-100#C3FFD11,13:1 auf Weiß · nur Fläche--ch-mint-500#76FFA01,27:1 auf Weiß · nur Fläche--ch-mint-700#16602D7,65:1 auf Weiß · Text erlaubt--ch-mint-900#0A4F319,65:1 auf Weiß · Text erlaubt--ch-ink-950#11111118,88:1 auf Weiß · Text erlaubt--ch-ink-900#22222215,91:1 auf Weiß · Text erlaubt--ch-ink-700#343A4011,51:1 auf Weiß · Text erlaubt--ch-ink-600#494A528,81:1 auf Weiß · Text erlaubt--ch-ink-500#71727A4,78:1 auf Weiß · Text erlaubt--ch-ink-400#9DA5AE2,49:1 auf Weiß · nur Fläche--ch-ink-300#CCCCCC1,61:1 auf Weiß · nur Fläche--ch-ink-200#E4E4E41,27:1 auf Weiß · nur Fläche--ch-ink-100#EAEAEA1,20:1 auf Weiß · nur Fläche--ch-ink-50#F8FAFC1,05:1 auf Weiß · nur Fläche--ch-surface#FFFFFF1,00:1 auf Weiß · nur Fläche--ch-on-dark#FFFFFF1,00:1 auf Weiß · nur Fläche--ch-success#4F7D244,89:1 auf Weiß · Text erlaubt--ch-info#0270E04,78:1 auf Weiß · Text erlaubt--ch-danger#F2545B3,39:1 auf Weiß · nur Fläche--ch-danger-text#C8102E5,88:1 auf Weiß · Text erlaubt| Token | Wert | Verwendung |
|---|---|---|
--ch-link | var(--ch-mint-700) = #16602D | Linkfarbe auf hellem Grund |
--ch-link-hover | #003805 = #003805 | Link im Hover |
--ch-link-on-dark | var(--ch-mint-500) = #76FFA0 | Linkfarbe auf dunklem Grund |
Kontrastwerte nach WCAG 2.1 gegen #FFFFFF berechnet, aus den Hexwerten der Tokendatei.
mint-500 #76FFA0 auf Weiß erreicht 1,27:1 und ist als Text unlesbar — auch für Grafik reißt es die 3:1-Schwelle. Text und Links tragen mint-700 #16602D (7,65:1 auf Weiß). Auf dunklem Grund gilt mint-500 als Linkfarbe.
Erlaubt als Text: ink-950, ink-900, ink-700, ink-600 und ink-500 #71727A (4,78:1 — gerade noch AA). Ab ink-400 #9DA5AE (2,49:1) abwärts nie als Text, nur Icons, Deko, Rahmen und Trennlinien. Alle Werte auf Weiß gemessen.
danger #F2545B erreicht nur 3,39:1 und ist damit ausschließlich Fläche, Icon oder große Schrift. Für Fehlertext gilt danger-text #C8102E (5,88:1, AA).
CMYK-Angaben zum Designsystem sind die rechnerische Umrechnung aus sRGB. Sie sind kein Druckfreigabewert und werden vor jedem Druckauftrag am Proof bestätigt. Mint #76FFA0 liegt außerhalb des CMYK-Farbraums.
Für JEDEN Druckauftrag werden die Lab-Werte übergeben, nicht CMYK-Zahlen: CMYK hängt von Papier und Druckverfahren ab, Lab nicht. Die Druckerei rechnet daraus selbst das Profil ihrer Maschine. Lab (sRGB D65): mint-500 L 90,7 / a −57,6 / b 34,3 · mint-700 L 35,5 / a −34,6 / b 22,8 · mint-900 L 29,1 / a −28,5 / b 12,1 · mint-100 L 95,0 / a −27,6 / b 16,0 · mint-50 L 98,7 / a −6,7 / b 3,1 · ink-950 L 5,1 · ink-900 L 13,2 · ink-600 L 31,6 · ink-500 L 48,2.
mint-500 liegt bei L 90,7 mit Chroma 67 — sehr hell UND sehr bunt zugleich, im Vierfarbdruck nicht erreichbar: das hellste kräftige Prozessgrün kommt auf rund L 54, Delta E2000 27,5 zum Ziel. Auch im Standardbereich der Sonderfarben liegt der nächste Kandidat bei Delta E2000 14,2. Zur Einordnung: unter 2 gilt als praktisch gleich, bis 5 als tolerierbar, darüber als andere Farbe. Für jeden Druck, in dem Mint als Fläche trägt, braucht es eine Sonderfarbe aus dem Neon- oder Fluoreszenzbereich; die Nummer wird am Fächer bestimmt, nicht gerechnet.
Eine Schrift, vier Schnitte, eine Skala — und ein Auszeichnungsmuster.
| Ebene | Größe | Zeilenhöhe | Schnitt |
|---|---|---|---|
| display | 56px | 1.05 | 600 |
| h1 | 44px | 1.15 | 600 |
| h2 | 34px | 1.2 | 600 |
| h3 | 28px | 1.3 | 600 |
| h4 | 24px | 1.35 | 600 |
| h5 | 20px | 1.4 | 600 |
| h6 | 18px | 1.45 | 500 |
| body-lg | 18px | 1.6 | 400 |
| body | 16px | 1.6 | 400 |
| small | 14px | 1.5 | 400 |
| xs | 12px | 1.4 | 500 |
Responsiv: 768–991px h1 35px / h2 30px · bis 767px h1 30px / h2 28px / h4 20px. Zeilenhöhe 1.2 für Überschriften, 1.6 für Text. Schrift: "Spline Sans", "Segoe UI", system-ui, -apple-system, sans-serif
Spline Sans, als Web-Font im Theme eingebunden. 400 Regular: Fließtext, Formulare, Tabelleninhalt. 500 Medium: Buttons, Navigation, H6, Hervorhebung im Fließtext. 600 SemiBold: Überschriften H1 bis H5. 700 Bold: NUR Kennzahlen und Display-Größen, sparsam. Fallback-Stack: „Spline Sans“, „Segoe UI“, system-ui, sans-serif.
display 56px/1.05/600 · h1 44/1.15/600 · h2 34/1.2/600 · h3 28/1.3/600 · h4 24/1.35/600 · h5 20/1.4/600 · h6 18/1.45/500 · body-lg 18/1.6/400 · body 16/1.6/400 · small 14/1.5/400 · xs 12/1.4/500 mit +0.08em Laufweite.
ab 992px: h1 44 / h2 34 / h3 28 / h4 24 / h5 20 / h6 18. 768–991px: h1 35 / h2 30, alles andere unverändert. bis 767px: h1 30 / h2 28 / h4 20, alles andere unverändert. H3, H5 und H6 ändern sich auf keiner Breite. Die Grundgröße bleibt 16px auf ALLEN Breiten.
Wichtige Aussagen in Überschriften werden mit dem Mint-Balken hinterlegt: linear-gradient(transparent 60%, mint-500 60%, mint-500 93%, transparent 93%). Nur H1 und Claim, nicht H2–H4, nie im Fließtext. Die Schrift bleibt Ink oder Weiß. Höchstens eine ausgezeichnete Aussage je Bildschirm oder Abschnitt — die Wirkung verschwindet, wenn das Muster inflationär wird.
Der Name eines Abstandstokens ist sein Pixelwert.
Der Name ist der Pixelwert: --ch-sp-20 sind 20px.
--ch-sp-44px--ch-sp-55px--ch-sp-88px--ch-sp-1010px--ch-sp-1212px--ch-sp-1515px--ch-sp-1616px--ch-sp-2020px--ch-sp-2424px--ch-sp-2525px--ch-sp-3030px--ch-sp-3232px--ch-sp-4040px--ch-sp-4848px--ch-sp-5050px--ch-sp-5656px--ch-sp-6060px--ch-sp-6464px--ch-sp-8080px--ch-sp-120120px--ch-radius-sm4px--ch-radius8px--ch-radius-lg16px--ch-radius-full999px--ch-container | 1240px |
--ch-gutter | 24px |
--ch-gutter-m | 16px |
--ch-bp-mobile | 477px |
--ch-bp-tablet | 768px |
radius-sm 4px für Tags und kleine Marker · radius 8px für Buttons, Eingabefelder und Karten (der Normalfall) · radius-lg 16px für große Flächen und Bildkacheln · radius-full 999px für Pills, Avatare und runde Steuerknöpfe. Ein anderer Radius als diese vier ist ein Befund.
Inhaltsbreite 1240px und Sektionsabstand 40px stehen in den Theme-Einstellungen des CMS. Sie sind zwar auch als Token gespiegelt, geändert werden sie aber im Design-Editor. Weitere Rastermaße: Spaltenabstand 24px Desktop, 16px mobil, Umbruchpunkte 477px und 768px.
Aus vielen Bauarten werden wenige Sollformen. Die als Entwurf markierten Zeilen sind noch nicht freigegeben.
SOLLFORM aller Schaltflächen: border-radius 8px, Polster 12px vertikal und 24px horizontal, 1px Rand, Schriftgewicht 500. VIER VARIANTEN, mehr gibt es nicht: (1) PRIMÄR — Fläche mint-500, Text ink-900, Rand 1px mint-500, Hover mint-100. (2) SEKUNDÄR — transparent, Rand 1px ink-500, Text ink-900, Hover Fläche ink-50. (3) DUNKEL — Fläche ink-900, Text weiß; für Bildhintergründe und Mint-Flächen. (4) TEXTLINK-BUTTON — ohne Fläche, Text mint-700, Unterstreichung bei Hover. Kanonische Klasse ist .button. AUSNAHME: runde Steuerknöpfe der Slider tragen border-radius 50%, das ist richtig so.
GRUNDFORM: Fläche Weiß, Rand 1px ink-200, Radius 8px, Innenabstand 24px. Kein Schatten im Ruhezustand. HOVER nur, wenn die GANZE Karte klickbar ist: Rand auf ink-300, Schatten shadow-md — sonst gar kein Hover. SECHS VARIANTEN: Bildkarte · Textkarte · Profilkarte · Referenzkarte · Kennzahlkarte · Listenkarte. TITEL: H3 in 20px, nicht 28px. Gleiche Höhe in einer Reihe über align-items:stretch, nie über feste Pixelhöhen.
FELD: Rand 1px ink-200, Radius 8px, Innenabstand 12/16, Schrift 16px. FOKUS: Rand mint-700 PLUS ein 2px-Ring — nie nur ein Farbwechsel, sonst ist der Fokus für Farbsehschwache unsichtbar. LABEL: 14px, ink-600, ÜBER dem Feld; ein Platzhalter ersetzt niemals das Label. FEHLER: Text in danger-text, Rand in danger; der Fehlertext benennt, was zu tun ist. PFLICHTFELD: mit dem Wort „Pflichtfeld“ oder Sternchen samt Legende — nie nur farbig markiert.
AKKORDEON: Kopfzeile 18px/500, Trennlinie ink-200, Symbol rechts, Drehung 180 Grad beim Öffnen. Fläche beim Öffnen ink-50, NICHT Mint — Mint ist für Aktionen reserviert, nicht für Zustände. TABS: aktiver Tab mit 2px mint-500 Unterstrich und Text ink-900, inaktiv ink-500. Ziel: ein Akkordeon-Modul, ein Tab-Modul.
Drei Formen: (1) LOGO-MARQUEE — endlos laufend ab neun Einträgen, darunter statische Chip-Reihe. (2) INHALTSSLIDER — mit sichtbaren Pfeilen und Punkten; Pfeile 44×44px Trefferfläche, das ist das Mindestmaß für Touch. (3) REFERENZSLIDER — für Zitate und Case Studies. Die runden Steuerknöpfe mit border-radius 50% sind die eine richtige Ausnahme von der 8px-Buttonform.
(1) HERO STARTSEITE — ganze Breite, Grafik rechts, H1 44px, genau ein Primär- und ein Sekundärbutton. (2) INNENBANNER — für Unterseiten, kompakter, mit Breadcrumb darüber. (3) AKTIONSBANNER — als Abschluss einer Seite, Fläche ink-950 mit Mint-Akzent. VERBOT: nie Text ohne Abdunklung über einem Foto. Der Mindestkontrast gilt auch über Bildern.
BREADCRUMB: 14px ink-500, Trenner ›, der aktuelle Knoten ohne Link. TABELLE: Kopf ink-50 mit ink-700-Text, Zeilentrenner ink-200, Zahlen rechtsbündig mit tabular-nums. CHIP/TAG: Radius 999px, Fläche ink-100, Text ink-700, 12px. KENNZAHL: Zahl 40px/700 in ink-900, Beschriftung 14px ink-500 darunter. Nie Mint als Zahlenfarbe auf Weiß.
Linienicons, Strichstärke 1,5 px auf 24-px-Raster, runde Enden, keine Füllung. EIN Satz aus EINER Quelle — nicht drei Icon-Bibliotheken nebeneinander. Farbe ink-600 auf hellem Grund, Weiß auf dunklem; Mint nur, wenn das Icon in einer Mint-Fläche sitzt, dann in ink-900. AUSNAHME: das Häkchen ist ein Markenelement — Mint-Häkchen auf dunklem Kreis. NIE ein Icon allein als Bedeutungsträger: jedes funktionstragende Icon bekommt Text daneben oder ein aria-label.
Zwei Dauern reichen: 150 ms für Hover und Fokus, 300 ms für Ein- und Ausblenden, Kurve ease-out. Der Logo-Marquee läuft endlos — ab neun Einträgen laufend, darunter als statische Chip-Reihe. NIE: Blinken, Parallax über ganze Seiten, Autoplay-Videos mit Ton. Jede Dauerbewegung hält bei prefers-reduced-motion an.
Menschen bei der Arbeit — und jedes Bild trägt einen Alt-Text.
SO: Menschen bei der Arbeit statt beim Posieren, Blickrichtung ins Bild statt in die Kamera · echte Arbeitsumgebungen (Besprechung, Werk, Baustelle, Rechenzentrum) · ruhige Bildbereiche dort, wo Text oder Logo liegen wird · Formate 3:2 Blog und Karten, 16:9 Hero, 1:1 Social, 4:5 hochformatige Feeds. NIE: Handschlag, Puzzleteil, Zahnrad, Glühbirne und jedes andere Beratungsklischee · Mint als Farbfilter über dem ganzen Bild · Text im Bild, wo er als Text daneben stehen könnte · KI-Bilder ohne Kennzeichnung dort, wo sie als echte Person gelesen werden könnten.
WebP ist das Standardformat. Maße: Hero Desktop 1280×648 · Hero-Kachel 1090×720 · Blog-Beitragsbild 1216×810 · OG-Karte 1200×630. Jedes Bild braucht einen Alt-Text, der den INHALT beschreibt, nicht den Dateinamen; bei Auszeichnungen gehört das Jahr hinein. Dekorative Grafiken bekommen alt="", damit der Screenreader sie überspringt.
Alle 78 Gestaltungswerte dieser Seite gibt es als Datei im W3C-Design-Tokens-Format — für Figma, für eigene Themes und für KI-Assistenten.
Die Datei trägt einen Versionsstempel im Namen, der aus der Prüfsumme der Quelldatei gebildet wird — der Dateiname ist damit selbst der Beleg, aus welcher Fassung sie stammt. Der Kurzlink führt immer auf die aktuelle Fassung. Fragen zur Marke: Kontakt.