Styleguide/CORPORATE_DESIGN_DARK_MODE.md

CORPORATE DESIGN SYSTEM - DARK MODE

Professional Toolbox Design Guidelines

1. FARBPALETTE

Hauptfarben

• Primär: #232D53 (Dunkelblau)

  • Verwendung: Aktive Navigation, Button-Hover, Titelleisten

• Akzent: #00D4FF (Cyan)

  • Verwendung: Primary Buttons, Hover-Borders, Icons, Links
  • Hover-Variante: #00B8E6 (Dunkleres Cyan)

• Hintergrund: #000000 (Schwarz)

  • Verwendung: Haupthintergrund der Anwendung

• Sekundär-Hintergrund: #1A1F3A (Dunkles Blau)

  • Verwendung: Karten, Container, inaktive Elemente
  • Hover-Variante: #232D53 (bei Karten)
  • Focus-Variante: #2A3560 (bei Eingabefeldern)

Textfarben

• Text-Primär: #FFFFFF (Weiß)

  • Verwendung: Überschriften, Buttons, wichtige Labels

• Text-Sekundär: rgba(255, 255, 255, 0.7) (70% Weiß)

  • Verwendung: Beschreibungen, Hilfstexte

• Text-Tertiär: rgba(255, 255, 255, 0.6) (60% Weiß)

  • Verwendung: Statusmeldungen, Copyright

Spezialfarben

• Fehler/Gefahr: #FF4444 (Rot)

  • Verwendung: Close-Buttons (Hover), Fehlermeldungen

• Sidebar-Hintergrund: #0A0A0A (Fast-Schwarz)

  • Verwendung: Sidebar-Bereich

2. TYPOGRAFIE

Schriftfamilie

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

Schriftgrößen

• Große Titel: 32px (z.B. Seitenüberschriften)
• Dialog-Titel: 24px
• Karten-Titel: 20px
• Navigation: 15px
• Standard-Text: 14px
• Kleine Texte: 13px
• Hilfstexte: 12px

Schriftgewichte

• Bold: 700 (Überschriften)
• Semibold: 600 (Buttons, wichtige Labels)
• Medium: 500 (Navigation)
• Regular: 400 (Normaler Text)

3. KOMPONENTEN

Karten (Tool Cards)

- Hintergrund: #1A1F3A
- Größe: 280x320px
- Border-Radius: 16px
- Padding: 32px
- Spacing: 24px (Grid-Gap)
- Hover: Border 1px solid #00D4FF, Background #232D53, translateY(-2px)
- Transition: all 0.3s ease

Buttons

Primary Button

- Hintergrund: #00D4FF
- Text: #000000
- Border-Radius: 24px
- Höhe: 48px
- Padding: 0 32px
- Hover: Background #00B8E6, Text #FFFFFF

Secondary Button

- Hintergrund: transparent
- Text: #FFFFFF
- Border: 1px solid #232D53
- Border-Radius: 24px
- Höhe: 48px
- Hover: Background #232D53

Eingabefelder

- Hintergrund: #232D53
- Border: none
- Border-Radius: 8px
- Padding: 12px 16px
- Text: #FFFFFF
- Focus: Background #2A3560

Dialoge/Popups

- Hintergrund: #000000
- Border-Radius: 8px
- Titelleiste: Background #232D53, Höhe 40px
- Close-Button: Hover-Background #FF4444

Scrollbar

- Hintergrund: #1A1F3A
- Handle: #00D4FF
- Handle-Hover: #00B8E6
- Breite: 8px
- Border-Radius: 4px

4. LAYOUT & SPACING

Grid-System

• Container-Padding: 40px
• Karten-Grid: 3 Spalten
• Grid-Gap: 24px
• Sidebar-Breite: 260px

Standard-Abstände

• Groß: 40px (Seitencontent)
• Mittel: 32px (Karten-Innenabstand)
• Klein: 16px (Zwischen Elementen)
• Mini: 8px (Inline-Abstände)

5. INTERAKTIONSMUSTER

Hover-Effekte

• Generell: Keine Borders im Normalzustand
• Karten: Cyan-Border + Hintergrundwechsel + leichtes Anheben
• Buttons: Farbwechsel mit smooth transition
• Navigation: Hintergrund-Highlight

Transitions

• Standard: transition: all 0.3s ease
• Nur für Hover-States, nicht für normale Zustände

Focus-States

• Keine sichtbaren Focus-Borders
• Stattdessen Hintergrundfarben-Änderung

6. WICHTIGE REGELN

1. Keine Borders - Nur bei Hover-States verwenden
2. Minimalistisch - Keine überflüssigen Dekorationen
3. Hoher Kontrast - Wichtig für Lesbarkeit auf dunklem Hintergrund
4. Konsistente Radien - 8px, 16px, 24px je nach Komponente
5. Behörden-gerecht - Seriös, professionell, keine verspielten Elemente

7. BARRIEREFREIHEIT

• Kontrastverhältnis Text/Hintergrund: Mindestens 7:1
• Alle interaktiven Elemente mindestens 44x44px
• Klare Hover-States für alle klickbaren Elemente
• Keine Information nur durch Farbe vermitteln

8. ANWENDUNGSBEISPIEL

# PyQt6 Beispiel für Primary Button
button.setStyleSheet("""
    QPushButton {
        background-color: #00D4FF;
        color: #000000;
        border: none;
        border-radius: 24px;
        padding: 0 32px;
        font-size: 15px;
        font-weight: 600;
        min-height: 48px;
    }
    QPushButton:hover {
        background-color: #00B8E6;
        color: #FFFFFF;
    }
""")

9. DOS AND DON'TS

DO ✓

• Verwende die exakten Hex-Codes
• Halte die Hover-Effekte subtil
• Nutze ausreichend Weißraum
• Behalte die Hierarchie bei

DON'T ✗

• Keine Emojis in professionellen Anwendungen
• Keine zusätzlichen Farben ohne Absprache
• Keine Borders im Normalzustand
• Keine Animationen außer Hover-Transitions