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

14 KiB
Originalformat Permalink Blame Verlauf

CORPORATE DESIGN SYSTEM - LIGHT MODE

Professional Toolbox Design Guidelines

1. FARBPALETTE

Hauptfarben

  • Primär: #3182CE (Mittleres Blau)

    • Verwendung: Buttons, Icons, Links, Hauptakzente
    • Hover-Variante: #2563EB (Dunkleres Blau)
    • Active-Variante: #1D4ED8 (Noch dunkler für gedrückte Zustände)

  • Hintergrund: #F8FAFC (Sehr helles Grau-Blau)

    • Verwendung: Haupthintergrund der Anwendung

  • Sekundär-Hintergrund: #FFFFFF (Reines Weiß)

    • Verwendung: Karten, Sidebar, Container
    • Hover-Variante: #F7FAFC (Leicht getönt)

  • Tertiär-Hintergrund: #F0F4F8 (Helles Grau)

    • Verwendung: Title Bar, Header-Bereiche

  • Akzent-Hintergrund: #E6F2FF (Sehr helles Blau)

    • Verwendung: Icon-Container, aktive Sidebar-Buttons, Highlight-Bereiche

Textfarben

  • Text-Primär: #1A365D (Dunkles Navy-Blau)

    • Verwendung: Überschriften, wichtige Labels, Haupttexte

  • Text-Sekundär: #2D3748 (Dunkelgrau)

    • Verwendung: Input-Texte, normale Texte

  • Text-Tertiär: #4A5568 (Mittelgrau)

    • Verwendung: Sekundärtexte, Labels, Beschreibungen

  • Text-Quaternär: #718096 (Hellgrau)

    • Verwendung: Statusmeldungen, Hilfstexte

  • Text-Placeholder: #A0AEC0 (Sehr hellgrau)

    • Verwendung: Placeholder-Texte in Eingabefeldern

Rahmen & Linien

  • Standard-Rahmen: #E2E8F0 (Hellgrau)

    • Verwendung: Standardrahmen für Container und Karten

  • Dialog-Rahmen: #E1E8F0 (Minimal dunkler)

    • Verwendung: Dialog- und Modal-Rahmen

  • Input-Rahmen: #CBD5E0 (Mittelgrau)

    • Verwendung: Eingabefeld-Rahmen

  • Divider: #F1F5F9 (Sehr hell)

    • Verwendung: Trennlinien, Scrollbar-Hintergrund

Spezialfarben

  • Erfolg: #059669 (Grün)

    • Verwendung: Erfolgreiche Aktionen, positive Statusmeldungen, Aktiv-Status
    • Hintergrund-Variante: #D1FAE5 (Sehr helles Grün)

  • Fehler/Gefahr: #DC2626 (Rot)

    • Verwendung: Fehlermeldungen, Löschaktionen, kritische Buttons
    • Hover-Hintergrund: #FEE2E2 (Sehr helles Rot für Close-Button)

  • Warnung: #D97706 (Orange)

    • Verwendung: Warnhinweise, Aufmerksamkeit erfordernde Elemente
    • Hintergrund-Variante: #FEF3C7 (Sehr helles Orange)

  • Information: #2563EB (Blau)

    • Verwendung: Informative Hinweise, neutrale Statusmeldungen
    • Hintergrund-Variante: #DBEAFE (Sehr helles Blau)

Interaktionsfarben

  • Hover-Hintergrund: #F7FAFC (Minimal getönt)

    • Verwendung: Hover-States für Karten und Buttons

  • Window-Controls-Hover: #E2E8F0 (Grau)

    • Verwendung: Minimize/Maximize Buttons

  • Focus-Outline: #3182CE (Primärblau)

    • Verwendung: Keyboard-Navigation Focus-Rahmen

  • Active-Button-Text: #1E40AF (Dunkles Blau)

    • Verwendung: Text auf aktiven Sidebar-Buttons

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: #FFFFFF
- Größe: 280x320px
- Border: 1px solid #E2E8F0
- Border-Radius: 16px
- Padding: 32px
- Spacing: 24px (Grid-Gap)
- Box-Shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
- Hover: Border 1px solid #3182CE, Background #F7FAFC, translateY(-2px)
- Transition: all 0.3s ease

Buttons

Primary Button

- Hintergrund: #3182CE
- Text: #FFFFFF
- Border-Radius: 24px
- Höhe: 48px
- Padding: 0 32px
- Hover: Background #2563EB
- Active: Background #1D4ED8
- Box-Shadow: 0 1px 2px rgba(0, 0, 0, 0.05)

Secondary Button

- Hintergrund: transparent
- Text: #1A365D
- Border: 1px solid #E2E8F0
- Border-Radius: 24px
- Höhe: 48px
- Hover: Background #F7FAFC, Border #CBD5E0

Eingabefelder

- Hintergrund: #FFFFFF
- Border: 1px solid #CBD5E0
- Border-Radius: 8px
- Padding: 12px 16px
- Text: #2D3748
- Placeholder: #A0AEC0
- Focus: Border #3182CE, Box-Shadow 0 0 0 3px rgba(49, 130, 206, 0.1)

Dialoge/Popups

- Hintergrund: #FFFFFF
- Border: 1px solid #E1E8F0
- Border-Radius: 8px
- Box-Shadow: 0 10px 25px rgba(0, 0, 0, 0.1)
- Titelleiste: Background #F0F4F8, Höhe 40px
- Close-Button: Hover-Background #FEE2E2, Hover-Color #DC2626

Scrollbar

- Hintergrund: #F1F5F9
- Handle: #CBD5E0
- Handle-Hover: #A0AEC0
- Breite: 8px
- Border-Radius: 4px

Tabellen

- Header-Hintergrund: #F0F4F8
- Header-Text: #1A365D
- Header-Border: 1px solid #E2E8F0
- Zeilen-Hintergrund: #FFFFFF
- Zeilen-Hover: #F7FAFC
- Alternating Rows: #F8FAFC
- Borders: 1px solid #E2E8F0
- Padding: 12px 16px

Form-Elemente

Select/Dropdown

- Gleicher Style wie Eingabefelder
- Dropdown-Hintergrund: #FFFFFF
- Box-Shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
- Option-Hover: #E6F2FF
- Border: 1px solid #E2E8F0

Checkbox/Radio

- Border: 2px solid #CBD5E0
- Background: #FFFFFF
- Checked-Hintergrund: #3182CE
- Checked-Icon: #FFFFFF
- Größe: 20x20px
- Border-Radius: 4px (Checkbox), 50% (Radio)

Toggle Switch

- Hintergrund: #E2E8F0
- Active: #3182CE
- Slider: #FFFFFF
- Größe: 44x24px
- Border-Radius: 12px
- Box-Shadow: 0 2px 4px rgba(0, 0, 0, 0.1)

Progress Bar

- Hintergrund: #E2E8F0
- Füllung: #3182CE
- Höhe: 8px
- Border-Radius: 4px
- Animation: ease-out 0.3s

Badges & Tags

- Default: Background #F0F4F8, Text #4A5568
- Primary: Background #3182CE, Text #FFFFFF
- Success: Background #059669, Text #FFFFFF
- Warning: Background #D97706, Text #FFFFFF
- Error: Background #DC2626, Text #FFFFFF
- Light variants:
  - Success-Light: Background #D1FAE5, Text #059669
  - Warning-Light: Background #FEF3C7, Text #D97706
  - Error-Light: Background #FEE2E2, Text #DC2626
  - Info-Light: Background #DBEAFE, Text #2563EB
- Padding: 4px 12px
- Border-Radius: 12px
- Font-Size: 12px
- Font-Weight: 600

Tooltips & Popovers

- Hintergrund: #1A365D
- Text: #FFFFFF
- Border: none
- Box-Shadow: 0 4px 12px rgba(0, 0, 0, 0.15)
- Border-Radius: 8px
- Padding: 8px 12px
- Font-Size: 13px
- Z-Index: 1000

Loading States

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

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

Tabs

- Inaktiv: Background transparent, Text #718096
- Aktiv: Background transparent, Text #1A365D, Bottom-Border 2px solid #3182CE
- Hover: Background #F7FAFC
- Padding: 12px 24px
- Transition: all 0.2s ease

Modal/Dialog Overlay

- Overlay: rgba(0, 0, 0, 0.5)
- 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

  • Karten: Blauer Border + leichter Hintergrundwechsel + Schatten + leichtes Anheben
  • Buttons: Farbintensivierung mit smooth transition
  • Navigation: Hintergrund-Highlight mit #F7FAFC
  • Links: Underline oder Farbwechsel zu #2563EB

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 #3182CE, outline-offset: 2px
  • Alternative: Box-Shadow für Eingabefelder
  • Wichtig für Keyboard-Navigation

Active States

  • Buttons: Dunklere Farbe (#1D4ED8) + transform: scale(0.98)
  • Links: Gleiche Farbe wie Hover

Disabled States

  • Opacity: 0.6
  • Cursor: not-allowed
  • Keine Hover-Effekte
  • Background: #F0F4F8 für Eingabefelder

6. WICHTIGE REGELN

  1. Subtile Borders - Im Gegensatz zum Dark Mode werden Borders standardmäßig verwendet
  2. Weiche Schatten - Dezente Box-Shadows für Tiefe
  3. Hoher Kontrast - Mindestens 4.5:1 für normale Texte, 3:1 für große Texte
  4. Konsistente Radien - 8px, 16px, 24px je nach Komponente
  5. Behörden-gerecht - Seriös, professionell, keine verspielten Elemente

7. ICONS & RESSOURCEN

Mode Toggle

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

Logos

  • Hauptlogo: Light-Varianten auf hellem Hintergrund
  • Verfügbare Varianten:
    • /ressources/logo/intelsight-full-light.svg - Vollständiges Logo (jetzt transparent)
    • /ressources/logo/intelsight-name-light.svg - Nur Name (jetzt transparent)
    • /ressources/logo/intelsight-icon-light.svg - Nur Icon (transparent)
  • Mindestabstand: 20px zu anderen Elementen

Sprach-Flags

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

8. BARRIEREFREIHEIT

  • Kontrastverhältnis Text/Hintergrund: Mindestens 4.5:1 (AA), idealerweise 7:1 (AAA)
  • 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: #FFFFFF
- Breite: 260px
- Padding: 20px
- Border-Right: 1px solid #E2E8F0
- Item-Padding: 12px 16px
- Item-Hover: Background #F7FAFC
- Active-Item: Background #E6F2FF, Text #1E40AF, Left-Border 3px solid #3182CE
- Divider: 1px solid #F1F5F9
- Icon-Größe: 20x20px
- Icon-Margin: 12px
- Icon-Farbe: #4A5568 (normal), #3182CE (aktiv)

Breadcrumbs

- Text: #718096
- Separator: #CBD5E0
- Active: #1A365D
- Hover: #3182CE
- Font-Size: 13px

10. TRANSPARENZEN & EFFEKTE

Glassmorphism (sehr dezent)

- Modal-Overlay: rgba(0, 0, 0, 0.5)
- Dropdown-Background: rgba(255, 255, 255, 0.98)
- Backdrop-Filter: blur(8px) - nur für Overlays
- Border für Glassmorphism: 1px solid rgba(255, 255, 255, 0.5)

Schatten

- Klein: 0 1px 2px rgba(0, 0, 0, 0.05)
- Mittel: 0 4px 6px rgba(0, 0, 0, 0.1)
- Groß: 0 10px 15px rgba(0, 0, 0, 0.1)
- XL: 0 20px 25px rgba(0, 0, 0, 0.1)
- Focus-Glow: 0 0 0 3px rgba(49, 130, 206, 0.1)

11. ANWENDUNGSBEISPIEL

# PyQt6 Beispiel für Primary Button
button.setStyleSheet("""
    QPushButton {
        background-color: #3182CE;
        color: #FFFFFF;
        border: none;
        border-radius: 24px;
        padding: 0 32px;
        font-size: 15px;
        font-weight: 600;
        min-height: 48px;
    }
    QPushButton:hover {
        background-color: #2563EB;
    }
    QPushButton:pressed {
        background-color: #1D4ED8;
    }
""")

12. WEITERE CODE-BEISPIELE

CSS Variables

:root {
    /* Farben */
    --primary-blue: #3182CE;
    --primary-blue-hover: #2563EB;
    --primary-blue-active: #1D4ED8;
    --primary-blue-dark: #1E40AF;
    --bg-main: #F8FAFC;
    --bg-white: #FFFFFF;
    --bg-gray: #F0F4F8;
    --bg-accent: #E6F2FF;
    --text-primary: #1A365D;
    --text-secondary: #2D3748;
    --text-tertiary: #4A5568;
    --text-quaternary: #718096;
    --text-placeholder: #A0AEC0;
    --border-default: #E2E8F0;
    --border-input: #CBD5E0;
    --success: #059669;
    --warning: #D97706;
    --error: #DC2626;
    --info: #2563EB;
    
    /* 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;
    
    /* Schatten */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
}

HTML/CSS Beispiel

<!-- Badge Component -->
<span class="badge badge-success-light">Aktiv</span>

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

.badge-success-light {
    background-color: #D1FAE5;
    color: #059669;
}
</style>

React/TypeScript Beispiel

// Card Component mit Light Mode
const Card: React.FC<{title: string}> = ({title, children}) => (
    <div className="card">
        <h3 className="card-title">{title}</h3>
        {children}
    </div>
);

// Styles
const cardStyles = {
    backgroundColor: '#FFFFFF',
    border: '1px solid #E2E8F0',
    borderRadius: '16px',
    padding: '32px',
    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
    transition: 'all 0.3s ease'
};

13. DOS AND DON'TS

DO ✓

  • Verwende die exakten Hex-Codes
  • Nutze subtile Schatten für Tiefe
  • Halte genügend Kontrast für Lesbarkeit
  • Verwende Borders zur Strukturierung
  • Nutze ausreichend Weißraum

DON'T ✗

  • Keine Emojis in professionellen Anwendungen
  • Keine zusätzlichen Farben ohne Absprache
  • Keine zu starken Schatten
  • Keine zu niedrigen Kontraste
  • Keine Animationen außer Hover-Transitions