IntelSight/Styleguide
3
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität
Files
main
Styleguide/CORPORATE_DESIGN_DARK_MODE.md
Claude Project Manager 4de24269e2 Logo und so
2025-07-12 21:34:58 +02:00

12 KiB
Originalformat Permalink Blame Verlauf

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, Validierungsfehler

  • Erfolg: #4CAF50 (Grün)

    • Verwendung: Erfolgreiche Aktionen, positive Statusmeldungen

  • Warnung: #FFC107 (Gelb)

    • Verwendung: Warnhinweise, Aufmerksamkeit erfordernde Elemente

  • Information: #2196F3 (Blau)

    • Verwendung: Informative Hinweise, neutrale Statusmeldungen

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

    • Verwendung: Sidebar-Bereich

2. TYPOGRAFIE

Schriftfamilie

/* Primär - für Überschriften und wichtige UI-Elemente */
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

/* Standard - für Fließtext */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

/* Monospace für Code/Daten */
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;

Hinweis: Poppins sollte über Google Fonts eingebunden werden:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

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 (Große Überschriften mit Poppins)
  • Semibold: 600 (Buttons, wichtige Labels - bevorzugt mit Poppins)
  • Medium: 500 (Navigation)
  • Regular: 400 (Normaler Text)

Text-Eigenschaften

  • Letter-Spacing für Überschriften: 1-2px
  • Letter-Spacing für Buttons: 0.5-1px
  • Text-Transform: Uppercase für Navigation und kleine Labels
  • Line-Height: 1.5-1.6 für bessere Lesbarkeit

Verwendung von Poppins

  • Logo-Text: Immer Poppins 600
  • Hauptüberschriften: Poppins 700
  • Buttons: Poppins 600
  • Navigation: Poppins 500
  • Karten-Titel: Poppins 600

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

Tabellen

- Header-Hintergrund: #232D53
- Header-Text: #FFFFFF
- Zeilen-Hintergrund: transparent
- Zeilen-Hover: #1A1F3A
- Alternating Rows: rgba(26, 31, 58, 0.3)
- Borders: 1px solid rgba(255, 255, 255, 0.1)
- Padding: 12px 16px

Form-Elemente

Select/Dropdown

- Gleicher Style wie Eingabefelder
- Dropdown-Hintergrund: rgba(26, 31, 58, 0.95)
- Backdrop-Filter: blur(5px)
- Option-Hover: #232D53

Checkbox/Radio

- Border: 2px solid #232D53
- Checked-Hintergrund: #00D4FF
- Checked-Icon: #000000
- Größe: 20x20px
- Border-Radius: 4px (Checkbox), 50% (Radio)

Toggle Switch

- Hintergrund: #232D53
- Active: #00D4FF
- Slider: #FFFFFF
- Größe: 44x24px
- Border-Radius: 12px

Progress Bar

- Hintergrund: #232D53
- Füllung: #00D4FF
- Höhe: 8px
- Border-Radius: 4px
- Animation: ease-out 0.3s

Badges & Tags

- Default: Background rgba(255, 255, 255, 0.1), Text #FFFFFF
- Primary: Background #00D4FF, Text #000000
- Success: Background #4CAF50, Text #FFFFFF
- Warning: Background #FFC107, Text #000000
- Error: Background #FF4444, Text #FFFFFF
- Padding: 4px 12px
- Border-Radius: 12px
- Font-Size: 12px
- Font-Weight: 600

Tooltips & Popovers

- Hintergrund: #232D53
- Border: 1px solid rgba(0, 212, 255, 0.2)
- Box-Shadow: 0 4px 12px rgba(0, 0, 0, 0.4)
- Border-Radius: 8px
- Padding: 8px 12px
- Font-Size: 13px
- Z-Index: 1000

Loading States

/* Spinner */
- Farbe: #00D4FF
- Größe: 24px, 32px, 48px
- Animation: rotate 1s linear infinite

/* Skeleton Screen */
- Hintergrund: linear-gradient(90deg, #1A1F3A 0%, #232D53 50%, #1A1F3A 100%)
- Animation: shimmer 1.5s infinite

Tabs

- Inaktiv: Background transparent, Text rgba(255, 255, 255, 0.6)
- Aktiv: Background transparent, Text #FFFFFF, Bottom-Border 2px solid #00D4FF
- Hover: Background rgba(35, 45, 83, 0.3)
- Padding: 12px 24px
- Transition: all 0.2s ease

Modal/Dialog Overlay

- Overlay: rgba(0, 0, 0, 0.8)
- Backdrop-Filter: blur(4px)
- Z-Index: 999

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
  • Links: Underline oder Farbwechsel zu #00D4FF

Transitions

  • Standard: transition: all 0.3s ease
  • Schnell: transition: all 0.2s ease (für kleinere Elemente)
  • Nur für Hover-States, nicht für normale Zustände

Focus-States

  • Standard: outline: 2px solid #00D4FF, outline-offset: 2px
  • Alternative: Hintergrundfarben-Änderung
  • Wichtig für Keyboard-Navigation

Active States

  • Buttons: Leicht dunklere Farbe + transform: scale(0.98)
  • Links: Gleiche Farbe wie Hover

Disabled States

  • Opacity: 0.5
  • Cursor: not-allowed
  • Keine Hover-Effekte

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. ICONS & RESSOURCEN

Mode Toggle

  • Dark Mode Icon: /ressources/dark-and-light-mode/moon.svg
  • Light Mode Icon: /ressources/dark-and-light-mode/sun.svg
  • Größe: 20x20px bis 24x24px
  • Farbe: #00D4FF

Logos

  • Hauptlogo: Immer weiße Variante (transparent)
  • Verfügbare Varianten:
    • /ressources/logo/intelsight-full-dark.svg - Vollständiges Logo (weiß auf transparent)
    • /ressources/logo/intelsight-name-dark.svg - Nur Name (weiß auf transparent)
    • /ressources/logo/intelsight-icon-dark.svg - Nur Icon (weiß auf transparent)
  • Mindestabstand: 20px zu anderen Elementen
  • Hinweis: Alle Dark Mode Logos sind transparent und optimal für dunkle Hintergründe

Sprach-Flags

  • Verfügbar: DE, EN, ES, FR, JA
  • Pfad: /ressources/flags/[sprache].svg
  • Größe: 24x16px
  • Styling: 
    opacity: 0.8;
border-radius: 2px;
transition: opacity 0.2s ease;

8. 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
  • Focus-Indikatoren für Keyboard-Navigation
  • Unterstützung für prefers-reduced-motion

9. NAVIGATION & SIDEBAR

Sidebar-Navigation

- Hintergrund: #0A0A0A
- Breite: 260px
- Padding: 20px
- Item-Padding: 12px 16px
- Item-Hover: Background rgba(35, 45, 83, 0.5)
- Active-Item: Background #232D53, Left-Border 3px solid #00D4FF
- Divider: 1px solid rgba(255, 255, 255, 0.1)
- Icon-Größe: 20x20px
- Icon-Margin: 12px

Breadcrumbs

- Text: rgba(255, 255, 255, 0.6)
- Separator: rgba(255, 255, 255, 0.3)
- Active: #FFFFFF
- Hover: #00D4FF
- Font-Size: 13px

10. TRANSPARENZEN & EFFEKTE

Glassmorphism (dezent)

- Modal-Overlay: rgba(0, 0, 0, 0.8)
- Dropdown-Background: rgba(26, 31, 58, 0.95)
- Backdrop-Filter: blur(5px) - nur sparsam verwenden
- Box-Shadow: 0 8px 32px rgba(0, 0, 0, 0.4)

Schatten

- Klein: 0 2px 4px rgba(0, 0, 0, 0.3)
- Mittel: 0 4px 12px rgba(0, 0, 0, 0.4)
- Groß: 0 8px 24px rgba(0, 0, 0, 0.5)
- Glow: 0 0 20px rgba(0, 212, 255, 0.3) - nur für wichtige Elemente

11. 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;
    }
""")

12. WEITERE CODE-BEISPIELE

CSS Variables

:root {
    /* Farben */
    --primary-blue: #232D53;
    --accent-cyan: #00D4FF;
    --accent-cyan-hover: #00B8E6;
    --bg-black: #000000;
    --bg-secondary: #1A1F3A;
    --bg-sidebar: #0A0A0A;
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.6);
    --success: #4CAF50;
    --warning: #FFC107;
    --error: #FF4444;
    --info: #2196F3;
    
    /* Schriftarten */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
}

HTML/CSS Beispiel

<!-- Badge Component -->
<span class="badge badge-primary">Neu</span>

<style>
.badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-primary {
    background-color: var(--accent-cyan);
    color: var(--bg-black);
}
</style>

React/TypeScript Beispiel

// Toggle Switch Component
const ToggleSwitch: React.FC<{checked: boolean}> = ({checked}) => (
    <div className={`toggle ${checked ? 'active' : ''}`}>
        <div className="toggle-slider" />
    </div>
);

// Styles
const toggleStyles = {
    background: checked ? '#00D4FF' : '#232D53',
    transition: 'all 0.3s ease'
};

13. 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