266 lines
5.3 KiB
Markdown
266 lines
5.3 KiB
Markdown
|
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
|