FuerDieCuts/docs/tradeo-design-system.md

# 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`