Ruhe wirkt teuer
Tiefe monochrome Flächen, feine Konturen und viel ungestörte Bühne. Nicht leer – bewusst unaufgeregt.
00SYSTEMINDEX
Fokus auf den Reifen.Nicht auf das Rauschen.
Geb-Reifen braucht keinen Stil, der sich selbst vorführt. Es braucht ein System, das Produktvertrauen, operative Kontrolle und Geschwindigkeit jeweils anders gewichtet – aber immer unverkennbar dieselbe Sprache spricht.
00.1DESIGNTHESE
Was dich daran wirklich anspricht.
Die Referenzen teilen kein einzelnes Layout. Sie teilen ein Gefühl von Beherrschung: wenig Farbe, präzise Hierarchie, sichtbare Zustände und Bewegung mit Ursache.
Dichte braucht Atem
Viele Daten dürfen sichtbar sein, wenn sie in lesbare Gruppen, stabile Spalten und klare Prioritäten zerfallen.
Bold / Light ist Bedeutung
Bold benennt Objekt, Wert oder Entscheidung. Light erklärt Kontext. Der Kontrast ist Semantik, kein Effekt.
Motion hat Gedächtnis
Hover kündigt an, Press bestätigt Berührung, Release löst aus, der neue Zustand bleibt räumlich nachvollziehbar.
Gold ist eine Entscheidung
Das gedämpfte Werkstatt-Gold wird knapp gehalten. Darum erkennt das Auge ohne Nachdenken, wo als Nächstes gehandelt wird.
PSYCHOLOGISCHER KERNDu suchst nicht „futuristisch“. Du suchst selbsterklärende Präzision mit Charakter: Jede Oberfläche soll das Gefühl geben, dass jemand den Ablauf vorher komplett durchgespielt hat.
00.2DREI ARBEITSMODI
Eine Marke.
Drei mentale Zustände.
Gleich sind Tokens, Typografie, Statussprache und Interaktionsphysik. Unterschiedlich sind Dichte, Tempo und emotionale Lautstärke.
DISCOVER → DECIDE → BUY- DICHTE
- niedrig bis mittel
- VERSPRECHEN
- Vertrauen in den konkreten Reifen
- GELB
- nächste Kaufentscheidung
- MOTION
- führt beim Scrollen und Vergleichen
SCAN → REVIEW → RESOLVE- DICHTE
- hoch, aber gruppiert
- VERSPRECHEN
- Kontrolle ohne Sucharbeit
- GELB
- Ausnahme oder Hauptaktion
- MOTION
- erhält Kontext bei Zustandswechseln
AIM → CAPTURE → CONFIRM- DICHTE
- radikal niedrig
- VERSPRECHEN
- Fehlerfrei mit einer Hand
- GELB
- genau der nächste Schritt
- MOTION
- bestätigt Scan, Erfolg und Korrektur
00.3REGISTER
Klein genug zum Nutzen.
Vollständig genug zum Bauen.
Ein fokussiertes Register statt eines endlosen Komponentenfriedhofs. Jede Seite beantwortet eine Klasse realer Entscheidungen; Seite 13 hält die umgesetzte Storefront synchron.
Systemindex
Absicht, Designthese, App-Modi und verbindliche Leitplanken.
- Designthese
- Drei Arbeitsmodi
- Nicht verhandelbar
Grundstein & Stimme
Ehrliche Kaufthese, Zielgruppen, Montagekommunikation und Sprache für jeden Arbeitsmodus.
- Restnutzen
- Zielgruppen
- Montage
- Scanner-Sprache
Fundament
Farbe, Typografie, Raum, Raster, Radien, Logo und Bildsprache.
- Farbrollen
- Schriftlogik
- 4/8-Rhythmus
- Logo & Medien
Aktion & Eingabe
Buttons, Inputs, Dropdowns, Tabs, Auswahl und Feedbackzustände.
- CTA-Hierarchie
- Formulare
- Dropdowns
- Tabs & Feedback
Daten & Status
Tabellen, Kennzahlen, Verlauf, Statusketten und Ausnahmefälle.
- Datentabelle
- Kennzahlen
- Statussprache
- Leere & Fehler
App-Blaupausen
Konkrete UX-Architektur für Frontend, Admin und Scanner.
- Storefront
- Admin
- Scanner
- App-Matrix
Admin Control Plane
Echtzeit-Cockpit, Artikel-Arbeitsraum, verschlüsselte Recovery, sichere Batches und physische Identität.
- Realtime-Cockpit
- Funktionsatlas
- Seitengrammatik
- Artikel & QC
- Sicherheit & Mitarbeiterstatistik
- Backups & Restore
- Medien & Paketdaten
- Label V5
Abläufe & Kanäle
Perspektiven, Swimlanes, Reifen-Lifecycle, Kanalverträge und Scan-Sicherheit.
- Vier Perspektiven
- Swimlanes
- Lifecycle
- Scanner-Policy
E-Mail & Kommunikation
MJML-Vorlagen, echte Textstimme, Pflichtzonen, Events und Zustellung.
- Mail-Anatomie
- Template-Register
- Text & Recht
- MJML-System
- Adressen
- Automationsmatrix
- Live-Gate
Bildkommunikation
Produktionsmotive, 30-Pixel-Normalisierung, Wasserzeichen-Ableitungen und die automatische Bildaufbereitung mit getrenntem Originalnachweis.
- Kontaktbogen
- 8 × 4K
- 16 × 2K
- Komposition
- Artikelfoto-Wahrheit
Motion & Zugang
Timing, Sounds, Fokus, Touch, Reduced Motion und Governance.
- Motion-Tokens
- Soundcodes
- Accessibility
- Freigabecheck
eBay Vertriebssystem
Live-Stand, Kanal-Policy, Kategorievertrag, verständlicher Fehlerabschluss und kontrollierter Production-Cutover.
- Ist-Stand
- Shop + eBay
- Kategorie-Fingerprint
- Fehlerabschluss
- Production-Gate
Kunden & Vor-Ort-Verkauf
Konto, Garage, Saison-Vorlauf, Scanner-Kasse, Mollie und Hermes als ein durchgängiger Kundenweg.
- Kundenkonto
- Meine Garage
- Saison-Vorlauf
- Vor-Ort-Kauf
- Hermes
- Roll-out-Register
Storefront System
Der verbindliche V14-Vertrag für Größen-Discovery, Satz-Auswahl 4/2/1, nachvollziehbare Preisvergleiche, bestandsabhängige Indexierung und konkrete Artikelwahrheit.
- Startscreen
- Hell / Dunkel
- Markenregister
- Bestandsfilter
- Artikelidentität
- Checkout-Rhythmus
- 4K & Produktwahrheit
- Hilfe & Content
- Discovery & SEO
- IndexNow
00.4NICHT VERHANDELBAR
Die Leitplanken,
die Qualität schützen.
Pro sichtbarem Arbeitsbereich höchstens eine dominante gelbe Aktion.
Kein funktionaler Text unter 16 px; Metadaten nur in begründeten Fällen 14 px.
Pointer-Ziele mindestens 44 px, Scanner und mobile Hauptaktionen mindestens 56–64 px.
8 px präzise, 12 px interaktiv, 18 px Bühne. Keine wahllosen Pillen und XXL-Rundungen.
Farbe nie allein: Text plus Icon oder Form tragen dieselbe Aussage.
Kein Glow, Glass oder Schatten ohne Aufgabe für Fokus, Tiefe oder Zustand.
DEFINITION OF DONE
Ein Screen ist erst fertig, wenn Hauptaufgabe, nächster Schritt, Status, Fehlerweg, leere Ansicht, Ladezustand, Tastaturweg, mobile Übersetzung und Reduced Motion geprüft sind.