App nach dem tradeo Design-System gestalten

Kopfzeile und primäre Aktionen in tradeo Blue, Poppins für Titel, Inter für UI und Text, 8-px-Raster, Abschnitte durch Weißraum statt Kästen, keine Symbole als Icon-Ersatz. Grautöne, Statusfarben, Radius und Schriftgrößen legt das Design-System 0.1 noch nicht fest; sie stehen als vorläufige, aus tradeo Blue abgeleitete Werte gesammelt in styles.css. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
2026-09-29 11:37:53 +00:00
1 parent ccd70bd585
commit 9cb7ce9555
@@ -0,0 +1,734 @@
+# tradeo Corporate Design System
+**Version:** 0.1 — Arbeitsstand  
+**Zweck:** Einheitliche visuelle Referenz für Mitarbeitende, Designer, Entwickler und KI/LLM-Systeme  
+**Geltungsbereich:** Primär interne Kommunikation; externe Nutzung nur vereinzelt
+
+---
+
+## 0. Grundsatz
+
+Dieses Dokument ist kein Inspirationskatalog, sondern ein verbindliches **Design-System**.
+
+Neue Gestaltungen werden nicht frei erfunden. Sie werden ausschließlich aus den hier definierten bzw. aus bestehenden tradeo-Komponenten zusammengesetzt.
+
+**Leitsatz:**  
+> Bestehende Komponenten kombinieren — keine neue visuelle Sprache erfinden.
+
+Wenn eine benötigte Komponente noch nicht definiert ist, wird sie zunächst in das Design-System aufgenommen und erst danach produktiv verwendet.
+
+---
+
+# 1. Markencharakter
+
+tradeo soll visuell wirken als:
+
+- technisch
+- reduziert
+- hochwertig
+- freundlich
+- minimalistisch
+- modern
+- professionell
+- ruhig
+- funktional
+
+## 1.1 Gestaltungsprinzipien
+
+### 1. Klarheit vor Dekoration
+Jedes Element braucht einen funktionalen Grund. Dekoration ohne Informations- oder Orientierungsfunktion wird vermieden.
+
+### 2. Funktion vor Spielerei
+Lesbarkeit, Orientierung und Verständlichkeit haben Vorrang vor visueller Originalität.
+
+### 3. Ruhe statt visueller Lautstärke
+Wenige Farben, klare Hierarchien, großzügige Abstände und kontrollierte Kontraste.
+
+### 4. Professionell, aber nicht kühl
+Die Gestaltung soll technisch und präzise sein, gleichzeitig aber zugänglich und freundlich wirken.
+
+### 5. Einheitlichkeit vor Einzelkreativität
+Ein neues Medium soll eindeutig als Teil von tradeo erkennbar sein, auch wenn kein Logo sichtbar ist.
+
+---
+
+# 2. Logo
+
+## 2.1 Primärlogo
+
+Das bestehende tradeo-Logo bleibt unverändert.
+
+**Erlaubt:**
+- Originaldarstellung
+- weiße Wortmarke auf tradeo-Blau
+- vorhandene, bereits eingesetzte Logo-Varianten
+
+**Nicht erlaubt:**
+- Verzerren
+- Strecken
+- Stauchen
+- Drehen
+- Umfärben außerhalb bestehender Varianten
+- Schatten hinzufügen
+- Konturen hinzufügen
+- Buchstaben einzeln verändern
+- neue Logo-Lockups erfinden
+
+## 2.2 Schutzraum
+
+Um das Logo ist immer ausreichend freie Fläche vorzusehen.
+
+Bis ein exakter Schutzraum anhand der Original-Logodatei definiert ist, gilt:
+
+> Keine Texte, Linien, Icons oder Rahmen unmittelbar an das Logo setzen.
+
+---
+
+# 3. Farben
+
+## 3.1 Bestätigte Primärfarbe
+
+### tradeo Blue
+- **HEX:** `#122E45`
+- **RGB:** `18 / 46 / 69`
+
+**Verwendung:**
+- zentrale Markenflächen
+- Header
+- Titelbereiche
+- primäre Buttons
+- Navigationsflächen
+- zentrale Beschilderungselemente
+- Hintergründe mit weißem Text
+
+tradeo Blue ist die visuell dominierende Markenfarbe.
+
+## 3.2 Weiß
+
+- **HEX:** `#FFFFFF`
+
+**Verwendung:**
+- Haupt-Hintergrund
+- Text auf tradeo Blue
+- ruhige Negativflächen
+- Karten und Inhaltsflächen
+
+## 3.3 Weitere Farben
+
+Weitere Farben und Gradients werden **nicht frei neu definiert**.
+
+Es dürfen ausschließlich Farbtöne und Verläufe verwendet werden, die bereits in bestehenden tradeo-Medien — insbesondere auf der Website — vorkommen und anschließend als verbindliche Tokens in dieses Dokument übernommen wurden.
+
+### Status: noch zu erfassen
+- sekundäre Blautöne
+- Grautöne
+- Website-Hintergrundfarben
+- vorhandene Gradients
+- bestehende Akzentfarben
+- funktionale Statusfarben
+
+---
+
+# 4. Typografie
+
+## 4.1 Primärschrift
+
+### Poppins
+
+Poppins ist die primäre tradeo-Schrift.
+
+**Bevorzugte Verwendung:**
+- Hauptüberschriften
+- Bereichsbezeichnungen
+- Schilder
+- kurze Labels
+- Titel
+- Key Messages
+- Navigation
+- prägnante Kennzeichnungen
+
+### Empfohlene Schnitte
+- **SemiBold / 600:** Hauptüberschriften
+- **Medium / 500:** Unterüberschriften und Labels
+- **Regular / 400:** kurze, ruhige Texte wenn Poppins eingesetzt wird
+
+---
+
+## 4.2 Sekundärschrift
+
+### Inter — vorgeschlagene Ergänzung
+
+Inter ergänzt Poppins als neutrale, professionelle Funktionsschrift.
+
+**Bevorzugte Verwendung:**
+- Fließtext
+- Tabellen
+- längere Beschreibungen
+- UI-Texte
+- Formulare
+- Daten
+- Präsentationsinhalte
+- technische Informationen
+
+### Empfohlene Schnitte
+- **Regular / 400:** Standardtext
+- **Medium / 500:** hervorgehobener Text
+- **SemiBold / 600:** Labels und wichtige UI-Informationen
+
+> Hinweis: Inter ist aktuell ein Vorschlag und sollte einmal intern freigegeben werden, bevor sie als verbindliche Zweitschrift gilt.
+
+---
+
+# 5. Typografische Hierarchie
+
+Die folgenden Rollen sind verbindlich. Die konkrete Größe wird je nach Medium skaliert.
+
+## Display / Hero
+- Schrift: Poppins
+- Gewicht: 600
+- Einsatz: große zentrale Aussage
+- maximal wenige Wörter
+- hoher Weißraumanteil
+
+## H1 / Seitentitel
+- Schrift: Poppins
+- Gewicht: 600
+- Einsatz: Hauptüberschrift eines Mediums
+
+## H2 / Abschnitt
+- Schrift: Poppins
+- Gewicht: 500–600
+- Einsatz: Untergliederung
+
+## Label
+- Schrift: Poppins oder Inter
+- Gewicht: 500–600
+- Einsatz: kurze funktionale Bezeichnungen
+
+## Body
+- Schrift: Inter
+- Gewicht: 400
+- Einsatz: Fließtext
+
+## Data / Table
+- Schrift: Inter
+- Gewicht: 400–500
+- Einsatz: Tabellen, Kennzahlen, Statusinformationen
+
+## Caption
+- Schrift: Inter
+- Gewicht: 400
+- Einsatz: Zusatzinformationen
+
+---
+
+# 6. Schreibweise
+
+## Standard
+- bevorzugt **Sentence case**
+- kurze Überschriften
+- klare Substantive und Verben
+- keine werbliche Übertreibung
+- keine unnötig lockere Jugendsprache
+
+## Vermeiden
+- ÜBERMÄSSIGE GROSSSCHREIBUNG
+- mehrere Ausrufezeichen
+- verspielte Sonderzeichen
+- unnötige Emojis
+- pseudo-technische Buzzwords
+- lange Textblöcke auf Schildern
+
+---
+
+# 7. Layout-System
+
+## 7.1 Grundprinzip
+
+Layouts folgen einer klaren visuellen Hierarchie:
+
+1. Orientierung
+2. Hauptinformation
+3. unterstützende Information
+4. Details
+
+Nicht alle vier Ebenen müssen verwendet werden.
+
+## 7.2 Ausrichtung
+
+**Standard:** linksbündig
+
+Zentrierung nur wenn:
+- eine einzelne Aussage im Mittelpunkt steht
+- keine mehrstufige Informationshierarchie vorhanden ist
+- die Komposition dadurch nachweislich ruhiger wird
+
+## 7.3 Weißraum
+
+Weißraum ist ein aktives Gestaltungsmittel.
+
+Elemente sollen nicht deshalb vergrößert oder ergänzt werden, nur weil Platz verfügbar ist.
+
+## 7.4 Informationsdichte
+
+Bevorzugt:
+- wenige Elemente
+- klare Gruppen
+- erkennbare Abstände
+- deutliche Hierarchie
+
+Vermeiden:
+- viele gleichgewichtete Elemente
+- flächendeckende Boxen
+- mehrere konkurrierende Überschriften
+- unnötige Rahmen
+
+---
+
+# 8. Spacing-System für digitale Medien
+
+Für UIs und digitale Layouts wird ein **8-Pixel-Grundraster** empfohlen.
+
+Typische Abstände:
+
+- `4 px` — Mikroabstand
+- `8 px` — eng zusammengehörige Elemente
+- `16 px` — Standardabstand
+- `24 px` — Gruppenabstand
+- `32 px` — Abschnitt
+- `48 px` — großer Abschnitt
+- `64 px+` — große Layouttrennung
+
+Abweichungen sind nur sinnvoll, wenn sie aus einem bestehenden tradeo-Layout übernommen werden.
+
+---
+
+# 9. Formen
+
+## Grundcharakter
+- geometrisch
+- sauber
+- weich genug, um freundlich zu wirken
+- nicht verspielt
+
+## Vermeiden
+- dekorative Freiformen
+- Comic-Elemente
+- übermäßige Rundungen
+- starke 3D-Effekte
+- visuell aggressive Rahmen
+
+Für digitale Interfaces sollen Radien konsistent verwendet werden.
+
+**Exakte Radius-Tokens:** noch anhand bestehender tradeo-UIs / Website festzulegen.
+
+---
+
+# 10. Gradients
+
+Gradients dürfen verwendet werden, wenn sie aus bestehenden tradeo-Medien übernommen sind.
+
+## Regeln
+- subtil
+- ruhig
+- innerhalb der bestehenden Farbwelt
+- keine Regenbogenverläufe
+- keine Neonwirkung
+- kein dominantes „Gaming“- oder „Web3“-Erscheinungsbild
+
+**Exakte Gradient-Tokens:** noch aus der Website zu extrahieren.
+
+---
+
+# 11. Icons
+
+Icons sind funktionale Orientierungselemente.
+
+## Bevorzugt
+- einheitliche Icon-Familie
+- reduzierte Formen
+- klare Silhouetten
+- konsistente Strichstärken
+- technisch-neutral
+
+## Nicht erlaubt
+- Mischung verschiedener Icon-Stile
+- Emoji als regulärer Icon-Ersatz
+- Cartoon-Icons
+- handgezeichnete Stilwechsel
+- dekorative Icons ohne Funktion
+
+**Verbindliche Icon-Familie:** noch festzulegen.
+
+---
+
+# 12. Fotografie und Bildsprache
+
+Wenn Fotos verwendet werden, sollen sie:
+
+- authentisch
+- technisch
+- sauber
+- ruhig
+- hochwertig
+- dokumentarisch
+- realistisch
+
+wirken.
+
+Bevorzugte Motive:
+- Mitarbeiter bei realer Arbeit
+- Hardware
+- Prozesse
+- Logistik
+- Technik
+- Arbeitsplatzsituationen
+- Details von Materialien und Produkten
+
+Vermeiden:
+- generische Stock-Fotografie
+- überinszenierte Business-Szenen
+- künstlich überschwängliche Gestik
+- stark verspielte Inszenierung
+- extreme Filter
+
+---
+
+# 13. Beschilderungen
+
+Beschilderungen haben besonders hohe Anforderungen an Verständlichkeit.
+
+## Prioritäten
+1. Erkennbarkeit
+2. Lesbarkeit
+3. Orientierung
+4. CI-Konsistenz
+5. Gestaltung
+
+## Grundaufbau
+
+**Ebene 1 — Hauptinformation**  
+z. B. `Wareneingang`
+
+**Ebene 2 — Funktion / Präzisierung**  
+z. B. `Anlieferung & Prüfung`
+
+**Ebene 3 — optionale Zusatzinformation**  
+z. B. Öffnungszeiten oder Prozesshinweis
+
+**Ebene 4 — optionale Kennzeichnung**  
+Icon, Nummer, Richtungspfeil
+
+## Regeln
+- möglichst nur eine zentrale Aussage
+- Poppins für Hauptinformation
+- hoher Kontrast
+- keine langen Texte
+- Symbole nur mit funktionalem Nutzen
+- keine unnötigen Zierrahmen
+- Pfeile und Orientierungselemente immer konsistent
+
+---
+
+# 14. Präsentationen
+
+## Grundprinzip
+Eine Folie = eine Kernaussage.
+
+## Gestaltung
+- Poppins für Titel
+- Inter für Inhalte
+- großzügiger Weißraum
+- wenig Text
+- visuelle Hierarchie statt Textmenge
+- Diagramme reduziert
+- tradeo Blue als primäre Markenfarbe
+
+## Nicht verwenden
+- dekorative PowerPoint-Effekte
+- WordArt
+- übermäßige Animationen
+- 3D-Diagramme
+- bunte SmartArt-Stile
+- Clipart
+
+---
+
+# 15. Thumbnails und Banner
+
+## Ziel
+Schnell erfassbare zentrale Aussage.
+
+## Aufbau
+- starke Headline
+- maximal wenige unterstützende Elemente
+- klare Bild-/Text-Hierarchie
+- tradeo-Farbwelt
+- Poppins dominant
+
+## Nicht verwenden
+- Meme-Ästhetik
+- Clickbait-Stil
+- schrille Farben
+- zu viele Textblöcke
+- mehrere konkurrierende Blickfänge
+
+---
+
+# 16. Interne Anwendungen und UIs
+
+tradeo-UIs sollen wie ein Teil derselben visuellen Organisation wirken.
+
+## Typografie
+- Poppins: Page Title / Module Title
+- Inter: Navigation, Tabellen, Formulare, Controls, Fließtext
+
+## Grundregeln
+- klare Navigation
+- wenige visuelle Ebenen
+- großzügige Abstände
+- einfache Statusdarstellung
+- konsistente Buttons
+- konsistente Karten
+- klare Interaktionszustände
+
+## Primäre Aktion
+Primäre Aktionen werden bevorzugt in tradeo Blue dargestellt.
+
+## Sekundäre Aktion
+Zurückhaltender als die primäre Aktion.
+
+## Destruktive Aktion
+Nur funktional markieren; niemals als dekorative Akzentfarbe verwenden.
+
+---
+
+# 17. Tabellen und Daten
+
+Daten sollen funktional und scanbar dargestellt werden.
+
+## Regeln
+- Inter verwenden
+- klare Spalten
+- Zahlen sauber ausrichten
+- dezente Trennlinien
+- geringe visuelle Dichte
+- Hervorhebung nur bei inhaltlicher Relevanz
+
+Vermeiden:
+- abwechselnd stark gefärbte Tabellenzeilen
+- dicke Rahmen
+- mehrere Akzentfarben
+- dekorative Tabellenköpfe
+
+---
+
+# 18. Do / Don't
+
+## DO
+- bestehende Komponenten wiederverwenden
+- wenige Farben einsetzen
+- klar hierarchisieren
+- großzügigen Weißraum lassen
+- Poppins bewusst einsetzen
+- technische Präzision zeigen
+- Inhalte schnell erfassbar machen
+- Vorlagen verwenden
+
+## DON'T
+- neue Farben spontan erfinden
+- neue Schriftarten einführen
+- verspielte Gestaltung verwenden
+- unnötige Icons ergänzen
+- Elemente stark dekorieren
+- mehrere Designsprachen mischen
+- „jung“, „hip“ oder „quirky“ gestalten
+- visuelle Trends ohne Bezug zu tradeo übernehmen
+
+---
+
+# 19. Entscheidungsregel für neue Medien
+
+Vor Freigabe eines neuen Mediums müssen folgende Fragen mit **Ja** beantwortet werden:
+
+- Verwendet es ausschließlich bestehende tradeo-Komponenten?
+- Ist die Hauptinformation sofort erkennbar?
+- Ist die visuelle Hierarchie eindeutig?
+- Ist die Anzahl der Farben minimal?
+- Ist die Typografie regelkonform?
+- Sind Abstände und Ausrichtungen konsistent?
+- Würde das Medium auch ohne Logo wie tradeo wirken?
+- Wirkt es technisch, reduziert, hochwertig, freundlich, minimalistisch und modern?
+
+Wenn eine Antwort **Nein** lautet, muss die Gestaltung überarbeitet werden.
+
+---
+
+# 20. Regel für KI / LLM-Systeme
+
+## Systemanweisung
+
+Bei der Erstellung visueller tradeo-Medien gilt:
+
+> Verwende ausschließlich die in diesem Corporate Design System beschriebenen bzw. als bestehend dokumentierten tradeo-Komponenten. Erfinde keine zusätzlichen Farben, Schriftarten, Gradients, Icons, Formen oder Stilrichtungen. Wenn eine benötigte Komponente nicht definiert ist, kennzeichne dies als offene Designentscheidung statt selbstständig eine neue Lösung einzuführen.
+
+## Prioritäten für KI-generierte Gestaltung
+
+1. CI-Konformität
+2. funktionale Verständlichkeit
+3. visuelle Hierarchie
+4. Lesbarkeit
+5. Konsistenz
+6. Ästhetik
+
+Ästhetische Originalität steht nicht über Konsistenz.
+
+---
+
+# 21. KI-Kurzprofil
+
+```yaml
+brand:
+  name: tradeo
+  character:
+    - technical
+    - reduced
+    - premium
+    - friendly
+    - minimalist
+    - modern
+    - professional
+
+principles:
+  - clarity_over_decoration
+  - function_over_playfulness
+  - calm_over_visual_noise
+  - consistency_over_individual_creativity
+  - reuse_existing_components_only
+
+colors:
+  primary:
+    name: tradeo_blue
+    hex: "#122E45"
+    rgb: [18, 46, 69]
+  white:
+    hex: "#FFFFFF"
+  rule: "Do not invent new brand colors. Use only documented existing tradeo colors."
+
+typography:
+  primary:
+    family: "Poppins"
+    roles:
+      - headlines
+      - labels
+      - signage
+      - key_messages
+  secondary:
+    family: "Inter"
+    status: "proposed"
+    roles:
+      - body
+      - ui
+      - tables
+      - data
+      - long_form_text
+
+layout:
+  default_alignment: left
+  whitespace: generous
+  visual_density: low
+  digital_spacing_base_px: 8
+
+style:
+  avoid:
+    - playful
+    - colorful
+    - childish
+    - unserious
+    - cartoon
+    - decorative_without_function
+    - excessive_shadows
+    - excessive_3d
+    - mixed_visual_languages
+
+generation_rule:
+  "Compose from existing components. Do not invent a new visual language."
+```
+
+---
+
+# 22. Medien-Matrix
+
+| Medium | Primärschrift | Sekundärschrift | Hauptziel |
+|---|---|---|---|
+| Beschilderung | Poppins | Inter optional | Orientierung |
+| Überschrift / Schriftzug | Poppins | — | Identifikation |
+| Präsentation | Poppins | Inter | Kommunikation |
+| Layout / Dokument | Poppins | Inter | Struktur |
+| Thumbnail | Poppins | Inter optional | schnelle Erfassung |
+| App / UI | Poppins | Inter | Bedienbarkeit |
+| Banner | Poppins | Inter optional | zentrale Aussage |
+| Tabelle / Dashboard | Poppins für Titel | Inter | Datenerfassung |
+
+---
+
+# 23. Noch zu definierende Design-Tokens
+
+Diese Punkte werden anhand bestehender tradeo-Materialien exakt ergänzt:
+
+- [ ] vollständige Farbpalette
+- [ ] Website-Gradients
+- [ ] Neutralfarben
+- [ ] exakte Typografiegrößen pro Medium
+- [ ] Zeilenhöhen
+- [ ] Letter Spacing
+- [ ] Corner Radii
+- [ ] Border Styles
+- [ ] Shadow Styles
+- [ ] Icon-Familie
+- [ ] Pfeil-System
+- [ ] Logo-Schutzraum
+- [ ] Mindestgröße Logo
+- [ ] Print-Farbwerte
+- [ ] RAL-Farben für physische Beschilderung
+- [ ] Standardformate für Schilder
+- [ ] Präsentationsmaster
+- [ ] UI-Komponenten
+- [ ] Thumbnail-Templates
+- [ ] Banner-Templates
+
+---
+
+# 24. Geplante Template-Bibliothek
+
+Langfristig sollte dieses Design-System durch konkrete Referenz-Templates ergänzt werden:
+
+1. Türschild
+2. Bereichsschild
+3. Regal-/Lagerplatzkennzeichnung
+4. Maschinen-/Arbeitsplatzkennzeichnung
+5. Lean-/Shopfloor-Board
+6. Prozesshinweis
+7. SOP-Titelblatt
+8. Präsentationsfolie
+9. Thumbnail
+10. Banner
+11. Dashboard
+12. interne Web-App
+13. Formulare
+14. Tabellen
+15. Informationskarte
+
+---
+
+# 25. Versionierung
+
+Änderungen an Farben, Typografie oder zentralen Design-Tokens werden dokumentiert.
+
+Empfohlenes Schema:
+
+- `0.x` — Aufbau / Entwicklung
+- `1.0` — erste freigegebene CI
+- `1.x` — Ergänzungen ohne grundlegenden Stilwechsel
+- `2.0` — grundlegende visuelle Änderung
+
+**Aktueller Stand:** `0.1`