Rotatory/docs/DESIGN.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

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