202 Zeilen
4.8 KiB
Markdown
202 Zeilen
4.8 KiB
Markdown
# 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
|
|
```css
|
|
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)
|
|
```css
|
|
- 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**
|
|
```css
|
|
- Hintergrund: #00D4FF
|
|
- Text: #000000
|
|
- Border-Radius: 24px
|
|
- Höhe: 48px
|
|
- Padding: 0 32px
|
|
- Hover: Background #00B8E6, Text #FFFFFF
|
|
```
|
|
|
|
**Secondary Button**
|
|
```css
|
|
- Hintergrund: transparent
|
|
- Text: #FFFFFF
|
|
- Border: 1px solid #232D53
|
|
- Border-Radius: 24px
|
|
- Höhe: 48px
|
|
- Hover: Background #232D53
|
|
```
|
|
|
|
#### Eingabefelder
|
|
```css
|
|
- Hintergrund: #232D53
|
|
- Border: none
|
|
- Border-Radius: 8px
|
|
- Padding: 12px 16px
|
|
- Text: #FFFFFF
|
|
- Focus: Background #2A3560
|
|
```
|
|
|
|
#### Dialoge/Popups
|
|
```css
|
|
- Hintergrund: #000000
|
|
- Border-Radius: 8px
|
|
- Titelleiste: Background #232D53, Höhe 40px
|
|
- Close-Button: Hover-Background #FF4444
|
|
```
|
|
|
|
#### Scrollbar
|
|
```css
|
|
- 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
|
|
|
|
```python
|
|
# 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 |