generated from coulomb/repo-seed
tegwick
b09290cb83
Implements all requirements from ProductRequirementsDocument.md: - PDF detection via Chrome Downloads API - Secure credential storage with AES-GCM encryption - Binect API integration for PDF uploads - Popup UI with Binect branding - Local transfer tracking (500 entry cap) - Help page with tracking view and CSV export - 60-day credential retention with auto-expiry - Accessibility compliance (WCAG 2.1 AA) Technical implementation: - Chrome Extension Manifest V3 - TypeScript with strict mode - Webpack build system - Jest test suite (22/22 passing) - ESLint configured (0 errors) Build output: 13 KB total (production minified) Test coverage: crypto, pdf-detector, tracker, binect-api Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
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
|