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
