#substanceoversurface · Brand System · Stand September 2026
Wir denken Ihre Kommunikationsstrategie. Und setzen sie selbst um.
Das ist der verbindliche Styleguide der Grand Position GmbH. Er regelt, wie die Marke aussieht, spricht und sich verhält: auf der Website, in Angeboten, in Präsentationen, in Mails und in jedem Werkzeug, das Inhalte für Grand Position erzeugt. Wer für Grand Position gestaltet oder schreibt, arbeitet nach dieser Seite.
01 · Markenkern
Substanz verdient Sichtbarkeit.
B2B-Unternehmen mit echten Produkten und echtem Know-how verlieren Aufmerksamkeit an Wettbewerber, die lauter sind. Grand Position korrigiert das: strategisch gedacht, selbst umgesetzt, ohne Briefing-Schleifen und ohne Konzeptpräsentationen, die nie gebaut werden.
Strategischer Partner, keine Agentur
Für B2B-Unternehmen mit erklärungsbedürftigen Produkten, die klare Kommunikation brauchen, keine eigene Marketingeinheit aufbauen wollen und von klassischen Agenturen enttäuscht wurden. Kunden geben Signale, Grand Position macht den Rest.
Strategische Umsetzer
Von der Einordnung bis zur fertigen Landingpage, dem laufenden Funnel, dem automatisierten Workflow. Systemdenken statt Einzelmaßnahmen. Ergebnisverantwortung statt Stundenzettel.
C-Level und Marketing im Mittelstand
DACH. Finanz, Versicherung, Tech, Medizin, Handel. Enterprise und Mittelstand. Menschen, deren Themen zu komplex für eine klassische Agentur geworden sind: SEO, KI-Suche, Automatisierung, Technologie, Content.
Leistungsarchitektur
Ein Fundament, vier Bereiche.
Jeder neue Kunde startet mit dem Fundament. Die vier Bereiche bauen darauf auf und greifen ineinander. Studio, Social Media und SEA tauchen nur innerhalb der Bereiche auf, nie als eigene Leistung.
Positionierung
Position, Ziele, Weg. Ohne klare Position keine Ziele, ohne Ziele kein Weg, ohne Weg kein Ergebnis.
Organische Sichtbarkeit
SEO, KI-Suchoptimierung, Content-Strategie. Social Media als Verteilkanal, SEA nur als Anschub.
Content
Text, Video, Foto, Audio. Produziert im eigenen Studio, kommuniziert wird das Ergebnis, nicht die Technik.
Web & Plattformen
Websites als Vertriebsinstrument, Landingpages, Funnels, Plattformen und Portale.
Vertrieb & Automatisierung
Brevo, Lead-Nurturing, CRM, Digitalisierung von Vertriebsprozessen.
Was Grand Position nicht ist
Unsere Wörter
02 · Logosystem
Eine Wortmarke. Fünf geregelte Fälle.
Das Logo ist eine reine Wortmarke ohne Symbol. „grand“ steht in Tiefe #0075B0, „position“ in Grau #646363. Die Schrift ist ein Vektor, keine Systemschrift. Das Logo wird nie neu gesetzt, nur aus diesen Dateien verwendet.
Regeln
| Untergrund | Variante | Regel |
|---|---|---|
| Weiß, sehr helles Grau | Original | „grand“ Tiefe, „position“ Grau. Standard für Dokumente, Angebote, Rechnungen. |
| Nacht, Tiefblau, dunkle Fotos | Dunkel | „grand“ bleibt Tiefe, „position“ wird Weiß. Standard für die Website. |
| Eis | Eis | „grand“ Tiefe, „position“ Nacht. Für helle Hero-Flächen und Präsentationen. |
| Tiefe, Magenta, Teal, Bilder mit Unruhe | Weiß | Vollweiß. Nur wenn die Fläche genug Kontrast bietet (Tiefe, Tiefmagenta, Tiefteal, Nacht). |
| Einfarbige Produktion | Schwarz | Vollton in Nacht #0B1E2D. Für Stempel, Gravur, Fax, Schwarzweißdruck. |
Mindestgrößen
Desktop · Header 26 px hochTablet · 22 px hochMobil · 20 px, min. 140 px breitUnter 140 px Breite verliert die Wortmarke Lesbarkeit. Für Favicon, App-Icon und Social-Profile gilt das Signet unten. Print: mindestens 35 mm breit.
Signet „g“ · für kleine Flächen
03 · Schutzzone
Luft um das Logo. Immer.
Die Schutzzone entspricht der Höhe des „g“ (Versal- plus Unterlänge), also der vollen Logohöhe. Innerhalb dieser Zone steht kein Text, kein Bild, kein anderes Logo und keine Kante. Bei 395 × 60 px sind das 60 px auf allen Seiten.
Schutzzone = 1 × Logohöhe (60 px bei 395 × 60)Logofläche 395 × 60 px
04 · Anwendung
Das gehört sich nicht.
Die Wortmarke bleibt, wie sie ist. Jede Abweichung, die hier nicht ausdrücklich erlaubt ist, ist verboten.
05 · Farbsystem
Dunkle Basis. Vier Akzente. Nie zwei auf einer Fläche.
Nacht hält alles zusammen. Blue ist die Herkunft (Logo, Signatur), Magenta der Unterschied, Teal die Leistung, Lime die Wirkung. Klick auf ein Farbfeld kopiert den Hex-Wert.
Dark Anchor · Basis
Trägt die Website. Nacht ist der Haupthintergrund, Tiefblau die Navigation und dunkle Sektionen, Schieferblau Karten und Hover, Schiefer gedämpfter Text.
--gp-nacht--gp-tiefblau--gp-schieferblau--gp-schieferBlue · Signatur
Herkunft der Marke. Tiefe ist die Logofarbe und der primäre Button. Signal führt Links auf dunklem Grund, Tiefe auf hellem. Eis ist die Signaturfläche.
--gp-eis--gp-horizont--gp-signal--gp-tiefeMagenta · Identität & Unterschied
Die Markenfarbe für den einen Moment pro Seite: eine Headline-Zeile, ein CTA, ein Zitat-Balken. Sparsam. Nie als große Fläche, nie als Fließtext auf Weiß.
--gp-rose--gp-magenta--gp-tiefmagenta--gp-dunkelmagentaTeal · Leistung & Verlässlichkeit
Steht für Kompetenz und Umsetzung. Eyebrows, Nummerierung, Icons, Leistungsblöcke, Button-Hover. Auf Weiß nur in Tiefteal oder als Fläche.
--gp-tealhauch--gp-teal--gp-tiefteal--gp-dunkeltealLime · Energie & Wirkung
Die Farbe der Ergebnisse: Kennzahlen, Counter, Stat-Blöcke, Erfolgsbelege. Auf dunklem Grund brillant. Auf Weiß als Text unbrauchbar, dort Tieflime oder Dunkellime.
--gp-limettenhauch--gp-lime--gp-tieflime--gp-dunkellimeRollen auf einen Blick
06 · Kontrast (WCAG 2.2)
Die Website ist dunkel, weil die Farben es verlangen.
Signal, Magenta, Teal und Lime erreichen auf Weiß keinen Textkontrast. Auf Nacht erreichen alle vier AA oder besser. Die Matrix rechnet live; die Werte gelten für jedes Werkzeug, das Farben aus diesem System kombiniert.
| Text ↓ · Fläche → |
|---|
AAA ≥ 7:1 · AA ≥ 4,5:1, Fließtext erlaubt · Groß ≥ 3:1, nur ab 24 px oder 19 px fett sowie für Buttonflächen und Icons · Nein unter 3:1, nicht als Text
#0075B0 (5,0:1). Hover Tiefmagenta. Signal ist auf Weiß kein Link.#1AABDF (6,4:1). Hover Horizont. Tiefe ist auf Nacht kein Linktext (3,4:1), aber als Buttonfläche mit weißem Text erlaubt.#C4006B (5,9:1).#8DA5BB auf Nacht (6,5:1). Auf Weiß Schieferblau #2D4F68 (8,5:1).07 · Typografie
Drei Schriften. Jede hat einen Job.
Syne trägt die Haltung in Headlines, Inter trägt den Inhalt, DM Mono trägt Claim, Zahlen und technische Labels. Alle drei sind Google Fonts (OFL), für Web, Office und Print frei nutzbar. Es gibt keine vierte Schrift.
Nur für Headlines. Nie im Fließtext, nie unter 20 px.
Fließtext, Buttons, Formulare, Tabellen, E-Mails, Office.
Versalien, Laufweite 0,06 em. Sparsam: Eyebrow, Hashtag, Tags, Meta.
Wir übernehmen Ihre Kommunikation.
Ihr Produkt ist besser. Gefunden wird der Wettbewerb.
Organische Sichtbarkeit statt gekaufter Reichweite
Größensystem
| Rolle | Größe | Regel |
|---|---|---|
| Basis | 16 px | Fluid: 18 px ab 1600, 20 px ab 2000, 24 px ab 2560, 28 px ab 3200 px Viewport |
| Display | 40–80 px | Eine Zeile pro Gedanke, max. 14 Zeichen breit im Hero |
| H2 | 28–44 px | Action Title: eine Aussage, kein Themenwort |
| H3 | 20–28 px | Kartentitel, Sub-Headlines |
| Body | 16 px | Zeilenlänge 60–68 Zeichen |
| Small | 14 px | Meta, Tabellen, Bildunterschriften |
| Mono | 12–14 px | Versalien, Laufweite 0,06 em |
Office & Mail
| Anwendung | Schrift |
|---|---|
| PowerPoint / Keynote Titel | Syne 700, 32–44 pt |
| PowerPoint Fließtext | Inter 400, 14–18 pt |
| Word / Angebote | Inter 400 11 pt, Überschriften Syne 600 |
| E-Mail (ohne Webfont) | Fallback: Arial / Helvetica, Nacht als Textfarbe, Tiefe für Links |
| Kennzahlen in Charts | DM Mono 500 oder Inter 500 |
Schriften laden: Syne · Inter · DM Mono. Für Office lokal installieren, für Web per @fontsource oder Google Fonts.
08 · Komponenten
Bausteine, aus denen die Website entsteht.
Alle Komponenten nutzen ausschließlich semantische Tokens (--bg, --text, --link …). Eine helle Sektion bekommt data-theme="light", der Rest bleibt gleich. Radien: 4 px für Buttons und Tags, 8 px für Karten. Keine Pillen, keine Schatten auf Dunkel.
Fließtext mit Textlink in Signal, unterstrichen, Hover in Horizont. Buttontexte sind Verben mit Ergebnis: „Gespräch anfragen“, nicht „Jetzt Kontakt“.
HTML
<a class="btn btn-primary" href="/kontakt"><span>Gespräch anfragen</span></a> <a class="btn btn-secondary" href="/referenzen">Referenzen ansehen</a> <a class="btn btn-link" href="/leistungen">Mehr zur Leistungsarchitektur <span class="arrow">→</span></a>
Auf hellem Grund führt Tiefe den Link, Hover in Tiefmagenta. Magenta-Buttons gibt es auf Weiß nicht.
Mobil: Logo links, Burger rechts, Menü als Vollfläche in Nacht, Einträge in Syne 600. Footer: drei Spalten (Leistungen, Unternehmen, Kontakt) auf Nacht, darunter Claim in DM Mono und Rechtliches in Schiefer.
01 · Organische Sichtbarkeit
Gefunden werden, ohne für jeden Klick zu zahlen.
Anzeigen kaufen Aufmerksamkeit auf Zeit. Organische Sichtbarkeit baut sie auf. Wir bringen Ihre Inhalte dorthin, wo Ihre Kunden suchen: in Google, in KI-Antworten, in Fachnetzwerken.
Sichtbar für Suchende
Technik, Struktur, Inhalte. Wir bauen die Basis, auf der Rankings entstehen und bleiben.
Mehr →Zitiert von KI-Systemen
ChatGPT, Perplexity, Google AI: Wir machen Ihr Wissen so auffindbar, dass Antworten Sie nennen.
Mehr →Inhalte mit Auftrag
Jeder Text hat ein Ziel, ein Publikum und eine Kennzahl. Alles andere entsteht nicht.
Mehr →Volldigitaler Investmentshop mit DIVA-Integration
Bank für Vermögen AG: Makler-Frontend, Brevo-Strecken, SEO und Schulungsvideos aus einer Hand.
Kommunikationsstrategie für Obsoleszenzmanagement
CME Control Motion Electronics: Stakeholderanalyse, Positionierung, Kooperationsnetzwerk.
Unser Produkt ist besser. Aber der Wettbewerb wird gefunden, wir nicht.
Wir produzieren Content. Die Zahlen bewegen sich trotzdem nicht.
Ich mache manuell, was längst automatisiert sein sollte.
Mein Team weiß nicht, was es in der Kaltakquise sagen soll.
Sie erklären uns Ihr Geschäft
Produkte, Kunden, Wettbewerber, Strukturen. Wir holen uns das Wissen im Gespräch.
Wir legen die Position fest
Wo Sie stehen, wo Sie hinwollen, was dazwischen liegt. Schriftlich, verbindlich.
Wir bauen
Website, Inhalte, Funnel, Automatisierung. Kein Konzept ohne Umsetzung.
Wir verantworten das Ergebnis
Kennzahlen statt Reports. Was nicht wirkt, ändern wir.
| Element | Verhalten | Dauer / Easing |
|---|---|---|
| Kennzahlen im Hero | Zählen beim Scrollen hoch, Lime auf Nacht | 1,2 s · ease-out |
| Leistungskarten | Fliegen einzeln ein (Opacity 0→1, Y 24→0), 80 ms versetzt | 0,5 s · cubic-bezier(.2,.7,.2,1) |
| Primärbutton | Füllt sich beim Hover von links mit Teal | 0,28 s |
| Agenturfloskeln „Über uns“ | Werden beim Scrollen durchgestrichen, Magenta-Linie | 0,4 s pro Wort |
| Hero-Hintergrund | Zeitraffer Stadt bei Nacht, leicht unscharf, Teal-Lichtakzente, ohne Ton | Loop 20–30 s |
09 · Bildsprache
Tiefe Räume, gezieltes Licht.
Lebendig-modern, substanziell, kein Dekor. Dunkle Bildräume mit Lichtakzenten in Teal und Lime, wie das Farbsystem selbst. Bildmaterial wird generiert oder lizenziert; eigene Fotos aus dem Studio folgen.
Strukturen, Bewegung, Arbeit
Netzwerke, Datenflüsse, architektonische Formen. Ein Gefühl von „hier passiert etwas“. Nahaufnahmen von Material, Oberfläche, Technologie. Hände an Tastaturen, konzentrierte Situationen. Architektur, Licht in Stadträumen, industrielle Texturen.
Glühbirnen, Zahnräder, Handshakes
Keine Boardroom-Fotos, keine Stockfoto-Diversität ohne Kontext, keine fliegenden Icons, keine Pastellfarben, keine verspielten Illustrationen, niemand lächelt in die Kamera.
Dark background, cinematic lighting, teal and lime color accents, modern B2B tech aesthetic, high contrast, editorial quality, no people smiling at camera, data-driven visual language, architectural structures, depth of field, no text, no logos
10 · Tonalität
Erst der Kunde. Dann wir.
Anrede konsequent Sie. Grand Position kommt in keinem ersten Satz vor. Der erste Satz beschreibt, was beim Kunden schiefläuft, der zweite, was wir dagegen tun. Kein Englisch als Stilmittel, kein Buzzword-Import.
Gerade heraus
Kein Umweg, kein Weichspülen. Wir sagen, was Sache ist.
Konsequent
Dieselbe Haltung auf der Website, im Angebot, in der Mail, im Gespräch.
Ehrlich
Auch wenn es unbequem ist. Wir sagen dem Kunden, was nicht funktioniert.
Mit Niveau
Keine Provokation um der Provokation willen. Substanz trägt, Lautstärke nicht.
Problem vor Lösung
Der erste Satz gehört dem Kunden. Erst, was schiefläuft. Dann, was wir dagegen tun.
Konkret statt klangvoll
Kein Satz ohne Substanz. Behauptungen werden belegt: Zahlen, Ergebnisse, Beispiele.
Kürzer als nötig
Jeder Satz bekommt eine zweite Chance beim Kürzen. Funktioniert er ohne ein Wort, fliegt das Wort.
Satzbau
| Kurze Sätze. Kein Schachtelbau. |
| Aktiv statt Passiv: „Wir setzen um“, nicht „wird umgesetzt“. |
| Kein Konjunktiv: nicht „könnten“, „würden“, „wäre denkbar“. |
| Keine Absicherungssprache, keine „je nach Situation“-Formeln. |
| Zahlen und Konkretes, wo immer möglich. |
| Kein Adjektiv über Grand Position ohne Beleg. |
Verbotswörter
| Verboten | Stattdessen |
|---|---|
| Full Service | Konkret benennen, was übernommen wird |
| leidenschaftlich · innovativ · Synergien | Gestrichen |
| ganzheitlich · holistisch | „von Strategie bis Umsetzung“ oder weglassen |
| auf Augenhöhe · early adopter · Digital Transformation | Gestrichen; Prozess konkret benennen |
| kreative Lösungen · maßgeschneidert | Das Konkrete zeigen |
| wir begleiten Sie · Partner auf Ihrem Weg | „wir übernehmen“ · „wir verantworten das Ergebnis“ |
| wir freuen uns auf Ihre Anfrage · wir leben und lieben | Gestrichen |
11 · Design-Tokens
Ein Satz Werte. Für Menschen und Maschinen.
Die Tokens liegen als CSS, JSON und Markdown neben dieser Seite. KI-Systeme, Website-Builder und Entwickler lesen dieselben Werte, die hier sichtbar sind. Wer eine Farbe ändert, ändert sie in den Dateien, nicht in einem Design.
Alle Farb-, Typo- und Spacing-Tokens als CSS Custom Properties, inklusive Light-Theme.
LadenDieselben Werte als JSON für Tailwind, Figma Variables, Style Dictionary.
LadenVerbindliche Markenregeln als Markdown: Positionierung, Farben, Kontrast, Typo, Tonalität, Verbotswörter.
ÖffnenEinstiegspunkt für KI-Systeme: was diese Marke ist, welche Dateien gelten, wie zu schreiben ist.
Öffnen12 · Downloads
Alle Dateien. Eine Quelle.
SVG für Web und Print, PNG mit 2400 px Breite für Office und Social, Favicon-Set für Browser und Apps. Andere Dateien als diese sind nicht freigegeben.
Transparent und mit Fläche, für PowerPoint, Word, Social
SVG-Tiles auf Nacht, Tiefe, Weiß · PNG 512 / 192 / 32 · favicon.ico
