# Grand Position GmbH – Verbindliche Markenregeln **Quelle (maßgeblich):** https://gp.grandposition.digital **Stand:** September 2026 · Diese Datei ist für Menschen und KI-Systeme geschrieben. Wer für Grand Position gestaltet, baut oder schreibt, hält sich an diese Regeln. Dateien: `index.html` (visueller Styleguide, sieht aus wie die Website) · `tokens.css` · `tokens.json` · `llms.txt` · `assets/svg`, `assets/png`, `assets/favicon` --- ## 1. Markenkern - **Unternehmen:** Grand Position GmbH. B2B-Strategie- und Digitalagentur, DACH. Schwesterunternehmen ventSpire GmbH (Plattformentwicklung). - **Positionierung:** Strategisch-operativer Partner 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. Kein Briefing, keine Content-Zulieferung: Kunden geben Signale, Grand Position macht den Rest. - **Claim:** `#substanceoversurface` - **Positionierungssatz:** „Wir denken Ihre Kommunikationsstrategie. Und setzen sie selbst um.“ - **Kern-Versprechen:** „Wir verstehen Ihr Problem. Wir bauen die Lösung.“ - **Purpose:** Substanz verdient Sichtbarkeit. B2B-Unternehmen mit echten Produkten verlieren Aufmerksamkeit an Wettbewerber, die lauter sind, nicht besser. - **Selbstbild:** Strategische Umsetzer. - **Zielgruppe:** C-Level und Marketingabteilungen in Mittelstand und Enterprise. Branchen: Finanz, Versicherung, Tech, Medizin, Handel. - **Was Grand Position nicht ist:** keine Full-Service-Agentur, kein Projekt-Dienstleister („Jetzt Angebot anfragen“), keine Content-Fabrik, nichts für Kleinkunden ohne strategische Ebene (Visitenkarten, Schilder). ### Leistungsarchitektur | Ebene | Name | Inhalt | |---|---|---| | Fundament | Positionierung | Position, Ziele, Weg. Start für jeden neuen Kunden. | | 01 | Organische Sichtbarkeit | SEO, KI-Suchoptimierung, Content-Strategie. Social Media als Verteilkanal, SEA nur als Anschub. | | 02 | Content | Text, Video, Foto, Audio (eigenes Studio, wird nicht beworben). | | 03 | Web & Plattformen | Websites als Vertriebsinstrument, Landingpages, Funnels, Plattformen. | | 04 | Vertrieb & Automatisierung | Brevo, Lead-Nurturing, CRM, Digitalisierung von Vertriebsprozessen. | Interim-Management ist keine Leistung mehr. Studio, Social Media und SEA werden nie als eigenständige Leistungen kommuniziert. --- ## 2. Farbsystem Dark-first. Nacht `#0B1E2D` ist der Standardhintergrund. Helle Sektionen (Weiß oder Eis) sind Kontrastwechsel, nicht die Regel. Nie zwei Akzentfarben auf einer Fläche. | Familie | Name | HEX | Rolle | |---|---|---|---| | Dark Anchor | Nacht | `#0B1E2D` | Haupthintergrund, Dark Hero | | | Tiefblau | `#1C3448` | Dark Sections, Navigation | | | Schieferblau | `#2D4F68` | Karten auf Dark, Hover; Muted Text auf Hell | | | Schiefer | `#8DA5BB` | Muted Text auf Dark, Meta | | Blue (Signatur) | Eis | `#D0F5FF` | Signatur-Fläche, helle Hero-Flächen | | | Horizont | `#87DCFF` | Karten-Akzente, Trennlinien, Link-Hover auf Dark | | | Signal | `#1AABDF` | Links und Interaktion **nur auf dunklem Grund** | | | Tiefe | `#0075B0` | Primäre Buttons, Links auf hellem Grund, Logofarbe | | Magenta (Identität) | Rosé | `#FFE0F3` | Tint-Flächen, Badges auf Hell | | | Magenta | `#FF3DA8` | Markenmoment: ein Akzent pro Seite, nur auf Dark oder als Headline ≥ 24 px | | | Tiefmagenta | `#C4006B` | Hover; einzige Magenta-Textfarbe auf Weiß | | | Dunkelmagenta | `#5E0033` | Text auf Magenta-Flächen | | Teal (Leistung) | Tealhauch | `#D4F7F5` | Helle Tint-Flächen | | | Teal | `#00C4B4` | Labels, Icons, Button-Hover auf Dark | | | Tiefteal | `#008B7F` | Labels auf Hell | | | Dunkelteal | `#00413D` | Text auf Teal-Flächen | | Lime (Energie) | Limettenhauch | `#EDFFD1` | Helle Akzentflächen | | | Lime | `#AAFF2E` | Kennzahlen, Ergebnisse, Counter, nur auf Dark | | | Tieflime | `#78C400` | Große Kennzahlen auf Hell | | | Dunkellime | `#2E4A00` | Text auf Lime-Flächen | Rollen: Nacht hält alles zusammen. Eis ist Herkunft und Signatur. Magenta ist Unterschied. Teal ist Leistung. Lime ist Wirkung. ### Kontrastregeln (WCAG 2.2, verbindlich) - Fließtext mindestens 4,5:1, große Schrift (≥ 24 px oder ≥ 19 px fett), Buttonflächen und Icons mindestens 3:1. - **Signal, Magenta, Teal und Lime sind auf Weiß keine Textfarben** (2,65 / 3,24 / 2,2 / 1,2 zu 1). Auf Nacht funktionieren alle vier (6,4 / 5,2 / 7,7 / 13,8 zu 1). - Links auf hellem Grund: Tiefe `#0075B0` (5,0:1), Hover Tiefmagenta. Links auf dunklem Grund: Signal `#1AABDF` (6,4:1), Hover Horizont. - Tiefe auf Nacht erreicht nur 3,4:1: als Buttonfläche mit weißem Text erlaubt, als Linktext verboten. - Gedämpfter Text: Schiefer auf Nacht (6,5:1), Schieferblau auf Weiß (8,5:1). - Text auf Farbflächen immer in der Dunkel-Stufe derselben Familie (Dunkelmagenta auf Magenta, Dunkelteal auf Teal, Dunkellime auf Lime). - Jede neue Kombination wird vor dem Einsatz gegen die Matrix auf der Styleguide-Seite geprüft. --- ## 3. Typografie Zwei Google Fonts (OFL), keine dritte. Vorbild für die Logik: eine Grotesk in wenigen Größen, Hierarchie aus Größe und Position, nie aus Fettgewicht. | Rolle | Font | Weight | Größe | Zeilenhöhe | Laufweite | |---|---|---|---|---|---| | Display / Hero | Inter | 500 | clamp(3rem, 7.5vw, 6.5rem) · 48–104 px | 0.98 | −0.03em | | H2 | Inter | 500 | clamp(2rem, 4vw, 3.25rem) · 32–52 px | 1.05 | −0.02em | | H3 | Inter | 500 | clamp(1.375rem, 2vw, 1.75rem) · 22–28 px | 1.2 | −0.01em | | Statement / Zitat / Intro | Instrument Serif | 400, Italic für Betonung | clamp(1.625rem, 2.6vw, 2.5rem) · 26–40 px | 1.15 | 0 | | Body | Inter | 400 | clamp(1.125rem, 1.35vw, 1.375rem) · 18–22 px | 1.4 | 0 | | Small / Meta | Inter | 400 | 15 px | 1.5 | 0 | | Label | Inter | 500 | 11 px, Versalien, in Klammern: „( Referenz )“ | 1.5 | 0.08em | - Headlines immer Gewicht 500. Nie 600, 700 oder 800. Nie Versalien in Headlines. - Instrument Serif nur für Statements, Zitate und Intro-Absätze. Nie unter 24 px, nie in Navigation, Buttons oder Formularen. - Fließtext groß (18–22 px), Zeilenbreite maximal 34 em. - Labels klein, in Versalien, in runden Klammern mit Leerzeichen, in Schiefer. Sie ersetzen Eyebrows, Tags und Badges. - Inter mit optischer Größe (`font-optical-sizing: auto`). - Office: Inter überall, Titel 500. E-Mail ohne Webfont: Arial/Helvetica, Text in Nacht, Links in Tiefe. --- ## 4. Logo - Reine Wortmarke, kein Symbol. „grand“ in Tiefe `#0075B0`, „position“ in Grau `#646363`. Custom-Vektor, keine Systemschrift. Format 395 × 60 px, Verhältnis 6,6:1. - **Varianten:** Original (auf Weiß) · Dunkel („position“ weiß, auf Nacht/Tiefblau/dunklen Fotos; Standard für die Website) · Eis („position“ in Nacht, auf Eis) · Weiß (auf Tiefe, Tiefmagenta, Tiefteal, Nacht, unruhigen Bildern) · Schwarz (Vollton Nacht, einfarbige Produktion). - **Schutzzone:** 1 × Logohöhe auf allen Seiten. - **Mindestgrößen:** Web 140 px breit; Header-Höhe Desktop 26 px, Tablet 22 px, Mobil 20 px; Print 35 mm. - **Signet „g“:** das „g“ der Wortmarke auf quadratischer Fläche (Nacht, Tiefe oder Weiß). Nur für Favicon, App-Icon, Profilbild, Avatar. Nie neben der Wortmarke. - **Verboten:** verzerren, drehen, Schatten, Verläufe, Konturen, andere Farben, Original auf dunklem oder farbigem Grund, Neusatz in einer Schrift. --- ## 5. Skalierung und Responsivität (verbindlich) - **Eine Regel für alle Bildschirme:** `1 rem = max(16px, 100vw / 90)`. Bis 1440 px Viewport ist 1 rem = 16 px. Darüber wächst rem proportional zur Breite: 1920 → 21 px, 2560 → 28 px, 3840 → 43 px, 7680 → 85 px. Die Seite zoomt, nichts bricht um. Ein 8K-Monitor zeigt exakt das Layout eines 1440er-Monitors, nur größer. - **Alle Maße in rem oder em.** Schrift, Abstände, Logo-Höhe, Navigation, Bildgrößen, Buttons. `px` nur für 1-px-Haarlinien und für Breakpoints. - **Unter 1440 px** bleibt rem bei 16 px, das Layout reflowt: bis 900 px zwölf Spalten (Labels 1–3, Inhalt 5–13), unter 900 px eine Spalte und Navigation unter dem Logo, unter 600 px Farbstreifen zweispaltig, Listen einspaltig, Logo 1.375 rem. - **Seitenrand** `clamp(1.25rem, 4vw, 4rem)`, Spaltenabstand `clamp(1rem, 2vw, 2rem)`. Kein Inhalt berührt den Rand, auch nicht im Hero. - **Logo im Header** 1.75 rem hoch (28 px bei 1440, 75 px bei 3840), Mindestbreite 8.75 rem. Es skaliert mit, nie fix in px. - **Navigation** 4.5 rem hoch, Links .8125 rem Versalien mit .06 em Laufweite. Bei weniger als 900 px rutscht sie unter das Logo und scrollt horizontal, Menü-Vollfläche folgt in der Website. - **Fluid-Größen** (`clamp(min, vw, max)`) nur innerhalb des 390–1440-Bereichs; Minimum und Maximum stehen in rem, damit sie oberhalb von 1440 mitskalieren. - **Test vor Freigabe:** 390, 1440, 2560, 3840 und 7680 CSS-Pixel rendern. Scrollbreite muss der Viewportbreite entsprechen. Hero, Header und Footer auf Rand und Größe prüfen. - Hinweis zu 8K: Betriebssysteme skalieren 8K meist auf 200–300 %, der Browser sieht dann 2560–3840 CSS-Pixel. Die Regel deckt beides ab. --- ## 6. Layout, Form, Bewegung - Flächen sind flach. Nacht `#0B1E2D` ohne Verläufe, ohne Radial-Licht. Weiß als einziger Sektionsbruch. - 12-Spalten-Raster, Seitenrand clamp(20px, 4vw, 64px), Spaltenabstand clamp(16px, 2vw, 32px). Labels stehen links in Spalte 1–3, Inhalt beginnt in Spalte 5. Bilder sitzen asymmetrisch: mal 6 Spalten links, mal 4 Spalten rechts, mit Leerfläche dazwischen. - Sektionsabstand clamp(6rem, 14vw, 14rem). Leerfläche ist ein Gestaltungsmittel, kein Fehler. - Keine Karten, keine Rahmen um Inhalte, keine Schatten, keine Icons, keine Tags, keine Badges, keine Eyebrows. Zusammengehöriges trennt eine 1-px-Haarlinie (Schiefer 28 % auf Dark, Nacht 18 % auf Hell) oder Abstand. - Radius 2 px für Buttons. Sonst nichts ist gerundet. - Primärbutton: Weiß auf Nacht, Text Nacht, Hover Teal. Auf Hell: Nacht, Hover Tiefe. Sekundär: Haarlinien-Outline. Der wichtigste CTA einer Seite ist oft ein Textlink mit Pfeil „↗“. Magenta-Button nur als Markenmoment, maximal einer pro Seite. - Formulare: Felder ohne Kasten, nur Unterlinie. Fehler in Magenta. - Bilder ohne Rahmen, ohne Radius, ohne Lichtkante. Das Bild ist die Fläche. - Bewegung: Kennzahlen zählen hoch (1,2 s), Bilder erscheinen einzeln mit Opacity und 16 px Versatz (0,6 s), Buttons wechseln Farbe (0,15 s), Floskeln werden durchgestrichen. `prefers-reduced-motion` schaltet alles ab. - Kein Glasmorphism, keine Glow-Effekte, keine Verläufe im Layout. --- ## 7. Bildsprache - Stil: lebendig-modern, substanziell, kein Dekor. Dunkle, tiefe Bildräume mit gezielten Lichtakzenten in Teal und Lime. Magenta nur für Markenmomente. - Zeigen: Strukturen und Systeme (Netzwerke, Datenflüsse, Architektur), Bewegung und Energie, Details mit Tiefe, konzentrierte menschliche Arbeit, urbane Ästhetik. - Nie: Glühbirnen, Zahnräder, Handshakes, Boardroom-Fotos, Stockfoto-Diversität ohne Kontext, fliegende Icons, Pastell, verspielte Illustrationen, Menschen, die in die Kamera lächeln. - KI-Prompt: „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, no text, no logos“. --- ## 8. Tonalität - **Anrede:** konsequent Sie. `#gerneperdu` nur als optionales Angebot in Signatur und LinkedIn. - **Oberstes Prinzip:** Customer-Centricity. Grand Position kommt in keinem ersten Satz vor. Kein „Wir sind“, kein „Unsere Leistungen“ als Einstieg. - **Haltung:** gerade heraus, konsequent, ehrlich, mit Niveau. - **Drei Stilprinzipien:** Problem vor Lösung. Konkret statt klangvoll. Kürzer als nötig. - **Satzbau:** kurze Sätze, aktiv, kein Konjunktiv, keine Absicherungssprache, Zahlen wo möglich, kein Adjektiv über Grand Position ohne Beleg. - **Unsere Wörter:** Substanz, Wirkung, Klarheit, Verantwortung, Ergebnis, Komplex, Vertrauen, Konsequent, Umsetzen. - **Kein Englisch als Stilmittel.** Kein Buzzword-Import. ### Verbotswörter Full Service · leidenschaftlich · ganzheitlich · holistisch · auf Augenhöhe · kreative Lösungen · innovativ · wir begleiten Sie · wir freuen uns auf Ihre Anfrage · maßgeschneidert · Synergien · wir leben und lieben · Partner auf Ihrem Weg · Digital Transformation · early adopter · Selbstlob ohne Beleg. Ersatz: „wir übernehmen“, „wir verantworten das Ergebnis“, „von Strategie bis Umsetzung“, konkret benennen, was passiert. ### Tontest Falsch: „Im Rahmen eines strategischen Prozesses entwickeln wir gemeinsam mit Ihnen eine maßgeschneiderte Kommunikationslösung auf Augenhöhe.“ Richtig: „Sie erklären uns Ihr Geschäft. Wir bauen die Kommunikation: Strategie, Umsetzung, fertig.“ --- ## 9. Website-Leitprinzip Vertriebsinstrument, kein Portfolio. Struktur jeder Seite: Situation → Lösung → Ergebnis → Referenz → Kontakt. Jeder Stakeholder (CEO, CMO, Marketing Manager, Head of Sales, Vertriebler) findet seinen Einstieg über sein Problem. Kein Agentur-Sprech. --- ## 10. Anweisungen für KI-Systeme Wenn Sie Inhalte, Layouts, Code oder Bilder für Grand Position erzeugen: 1. Verwenden Sie ausschließlich die Farben aus Abschnitt 2 mit den Token-Namen aus `tokens.css` / `tokens.json`. Erfinden Sie keine Zwischentöne. Flächen sind flach: keine Verläufe. 2. Halten Sie die Kontrastregeln ein. Signal, Magenta, Teal und Lime sind auf Weiß keine Textfarben. 3. Standard ist dunkel (Nacht). Helle Sektionen nur als Kontrastwechsel mit `data-theme="light"`. 4. Schriften: Inter für alles (Headlines in 500), Instrument Serif für Statements und Zitate. Keine dritte Schrift, keine fetten Headlines. 5. Logo nur aus `assets/svg/` verwenden, nie nachbauen. Variante nach Untergrund wählen (Abschnitt 4). 6. Texte in Sie-Form, Problem vor Lösung, ohne Verbotswörter, ohne Konjunktiv, ohne Selbstlob. 7. Leistungen nur nach der Leistungsarchitektur in Abschnitt 1 benennen. 8. Keine Karten, keine Rahmen, keine Icons, keine Tags, keine Eyebrows, keine Schatten. Haarlinien und Leerfläche strukturieren. Labels klein, in Versalien, in Klammern. Radius 2 px nur an Buttons. 9. Raster: Labels links in Spalte 1–3, Inhalt ab Spalte 5. Bilder asymmetrisch setzen, viel Leerfläche lassen. Weniger Elemente, größere Schrift. 10. Skalierung: `html { font-size: max(16px, calc(100vw / 90)) }`, alles in rem, px nur für Haarlinien. Vor Abgabe bei 390, 1440, 2560, 3840 und 7680 px rendern.