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>
5.3 KiB
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