BrandBook *Binect Innovation Branding* # Binect Futuristic Innovation BrandBook **Binect Branding für Binect Innovation Projekt auf CoulombSocial** --- ## 1. Zweck & Anwendungsbereich Dieses BrandBook definiert eine **futuristische, innovationsorientierte Markenvariation** von Binect für: * Innovations- & Explorationsprojekte * Prototypen, Piloten, Labs, Spikes * Coulomb-Spaces, Projektkacheln, Konzepte, Architektur-Artefakte * Präsentationen, Poster, Onepager, Demo-Visuals **Nicht ersetzt:** Das bestehende Binect Corporate Design für Produktmarketing, Vertrieb, Vertragsunterlagen oder reguläre Kundenkommunikation. **Ziel:** > Zukunft sichtbar machen, ohne Vertrauen, Klarheit und Professionalität aufzugeben. --- ## 2. Brand-Essenz ### Kernversprechen **Exploration ohne Chaos.** Binect Innovation steht für: * kontrollierte Neugier * technologische Reife * klare Grenzen zwischen Experiment und Betrieb * Sicherheit als inhärente Eigenschaft, nicht als Zusatz ### Leitwerte * **Clarity-first** * **Secure-by-design** * **Flow & Automation** * **Human-friendly Technology** --- ## 3. Visuelle Identität ### 3.1 Zentrale Metaphern * **Flow & Pipelines** – Prozesse in Bewegung * **Orbit & Kern** – Entscheidungen, Systeme, APIs als stabiler Mittelpunkt * **Netzwerke & Knoten** – Integration statt Silos * **Rahmen & Grenzen** – Sicherheit, Policies, Governance Die Bildsprache ist **abstrakt, ruhig und strukturiert**, niemals verspielt oder chaotisch. --- ### 3.2 Farbwelt #### Core Palette (verbindlich) * **Binect Blue (Core)** – Primärfarbe * **Binect Blue (Deep)** – Dark UI, Kontrast, Fokus * **Neutral Ink** – Text, Linien, Struktur * **Paper / Light UI** – Hintergründe, Karten Diese Farben tragen die visuelle Identität und müssen dominieren. #### Innovation Accents (sparsam) * **Signal Green** – Markierung, Status, Erfolg * **Cyan / Mint** – Flow, Aktivität, Fokus * **Violet** – Innovation, Abgrenzung * **Red** – Warnung, Grenze, „Red Lines“ **Grundregel:** > Akzentfarben unterstreichen – sie tragen keine alleinige Bedeutung. --- ### 3.3 Gradients & Effekte * Gradients nur als **Hintergrund oder dekorative Ebene** * Leichte **Glow-Effekte** ausschließlich für Fokus oder Hervorhebung * Keine visuelle Unruhe, kein „Cyberpunk“ --- ## 4. Typografie ### Prinzipien * Hohe Lesbarkeit vor Stil * Moderne, sachliche Sans-Serif * Klare Hierarchien ### Einsatz * **Headlines:** prägnant, sachlich, ruhig * **Fließtext:** neutral, erklärend, strukturiert * **Technische Inhalte:** Monospace erlaubt, zurückhaltend eingesetzt ### Sprachstil * kurze, präzise Sätze * erklärend statt werblich * Fachbegriffe bewusst und konsistent --- ## 5. Layout & Komponenten ### 5.1 Grundlayout * viel Weißraum * klare Sektionen * horizontale und vertikale Ausrichtung strikt eingehalten ### 5.2 Cards & Container * abgerundete Ecken (modern, freundlich) * klare Trennung von Inhaltsebenen * ruhige Schatten, keine Tiefen-Effekthascherei ### 5.3 Interaktive Elemente * Buttons, Links, Controls eindeutig identifizierbar * Interaktionen vorhersehbar, konsistent --- ## 6. Illustration & Bildstil ### Stil * abstrakt, technisch, erklärend * Linien, Knoten, Orbits, Flows * ruhige Hintergründe ### Einsatz * Ein zentrales Thema pro Visual * Text im Bild nur, wenn notwendig * Illustrationen unterstützen Verständnis, nicht Dekoration --- ## 7. Coulomb-spezifische Anwendung ### 7.1 Projektkacheln Pflichtelemente: * Projektname * Kurzbeschreibung * Status (Concept / Pilot / Beta / Production) * Kategorie / Fokus Optional: * Trust-Marker * Technology-Tag ### 7.2 Architektur & Konzepte * Entscheidungen klar benannt * Abhängigkeiten sichtbar * Zustände und Übergänge explizit --- ## 8. Tonalität & Kommunikation ### Stimme * ruhig * kompetent * offen für Exploration * transparent über Reifegrad ### Statuskommunikation Begriffe wie *Pilot*, *Beta*, *Experiment* werden **explizit erklärt**, nicht impliziert. --- # 9. Accessibility & Regulatorische Konformität *(BFSG / WCAG 2.1 – AA)* Dieser Abschnitt bündelt **alle verbindlichen Anforderungen**. Er dient als **Checkliste für Design, Review und Abnahme**. --- ## 9.1 Wahrnehmbarkeit * Textkontrast: * normaler Text ≥ **4.5 : 1** * großer Text ≥ **3.0 : 1** * UI-Elemente & Icons ≥ **3.0 : 1** * Keine Information ausschließlich über Farbe * Texte nicht direkt auf Gradients ohne geprüften Kontrast --- ## 9.2 Bedienbarkeit * Alle interaktiven Elemente per Tastatur erreichbar * Sichtbarer Fokuszustand * Klick- und Touch-Flächen ≥ **44 × 44 px** * Keine Hover-only-Informationen --- ## 9.3 Verständlichkeit * Klare Sprache * Konsistente Begriffe * Fachbegriffe erklärt * Status & Risiken explizit benannt --- ## 9.4 Robustheit * Semantisch korrekte Struktur (HTML, Rollen, Labels) * Icons mit zugänglichem Namen * Bilder mit sinnvollen Alt-Texten * dekorativ → leerer Alt-Text * informativ → beschreibend --- ## 9.5 Bilder & Diagramme * Jedes Diagramm mit textlicher Kurzbeschreibung * Komplexe Grafiken zusätzlich erläutert * Keine Bedeutung nur durch Linienfarbe oder Form --- ## 9.6 Verbindliche Grundregel > **Innovation ohne Zugänglichkeit gilt bei Binect nicht als fertig.** Accessibility ist: * Qualitätsmerkmal * Skalierungsfaktor * regulatorische Absicherung * Ausdruck technischer Reife xxx