Light-Mode
Dieser Commit ist enthalten in:
Claude Project Manager
@ -7,7 +7,7 @@
|
||||
- **Path**: `A:\GiTea\Styleguide`
|
||||
- **Files**: 1736 files
|
||||
- **Size**: 3.0 MB
|
||||
- **Last Modified**: 2025-07-10 23:39
|
||||
- **Last Modified**: 2025-07-11 01:06
|
||||
|
||||
## Technology Stack
|
||||
|
||||
@ -70,3 +70,4 @@ This project is managed with Claude Project Manager. To work with this project:
|
||||
- README generated on 2025-07-08 22:51:20
|
||||
- README updated on 2025-07-08 22:51:49
|
||||
- README updated on 2025-07-11 00:57:18
|
||||
- README updated on 2025-07-12 15:24:24
|
||||
|
||||
562
CORPORATE_DESIGN_LIGHT_MODE.md
Normale Datei
562
CORPORATE_DESIGN_LIGHT_MODE.md
Normale Datei
@ -0,0 +1,562 @@
|
||||
# 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
|
||||
```css
|
||||
/* 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:
|
||||
```html
|
||||
<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)
|
||||
```css
|
||||
- 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**
|
||||
```css
|
||||
- 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**
|
||||
```css
|
||||
- Hintergrund: transparent
|
||||
- Text: #1A365D
|
||||
- Border: 1px solid #E2E8F0
|
||||
- Border-Radius: 24px
|
||||
- Höhe: 48px
|
||||
- Hover: Background #F7FAFC, Border #CBD5E0
|
||||
```
|
||||
|
||||
#### Eingabefelder
|
||||
```css
|
||||
- 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
|
||||
```css
|
||||
- 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
|
||||
```css
|
||||
- Hintergrund: #F1F5F9
|
||||
- Handle: #CBD5E0
|
||||
- Handle-Hover: #A0AEC0
|
||||
- Breite: 8px
|
||||
- Border-Radius: 4px
|
||||
```
|
||||
|
||||
#### Tabellen
|
||||
```css
|
||||
- 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**
|
||||
```css
|
||||
- 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**
|
||||
```css
|
||||
- Border: 2px solid #CBD5E0
|
||||
- Background: #FFFFFF
|
||||
- Checked-Hintergrund: #3182CE
|
||||
- Checked-Icon: #FFFFFF
|
||||
- Größe: 20x20px
|
||||
- Border-Radius: 4px (Checkbox), 50% (Radio)
|
||||
```
|
||||
|
||||
**Toggle Switch**
|
||||
```css
|
||||
- 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
|
||||
```css
|
||||
- Hintergrund: #E2E8F0
|
||||
- Füllung: #3182CE
|
||||
- Höhe: 8px
|
||||
- Border-Radius: 4px
|
||||
- Animation: ease-out 0.3s
|
||||
```
|
||||
|
||||
#### Badges & Tags
|
||||
```css
|
||||
- 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
|
||||
```css
|
||||
- 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
|
||||
```css
|
||||
/* 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
|
||||
```css
|
||||
- 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
|
||||
```css
|
||||
- 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
|
||||
- `ressources/logo/intelsight-name-light.svg` - Nur Name
|
||||
- `ressources/logo/intelsight-icon-light.svg` - Nur Icon
|
||||
- **Mindestabstand**: 20px zu anderen Elementen
|
||||
|
||||
#### Sprach-Flags
|
||||
- **Verfügbar**: DE, EN, ES, FR, JA
|
||||
- **Pfad**: `ressources/flags/[sprache].svg`
|
||||
- **Größe**: 24x16px
|
||||
- **Styling**:
|
||||
```css
|
||||
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
|
||||
```css
|
||||
- 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
|
||||
```css
|
||||
- Text: #718096
|
||||
- Separator: #CBD5E0
|
||||
- Active: #1A365D
|
||||
- Hover: #3182CE
|
||||
- Font-Size: 13px
|
||||
```
|
||||
|
||||
### 10. TRANSPARENZEN & EFFEKTE
|
||||
|
||||
#### Glassmorphism (sehr dezent)
|
||||
```css
|
||||
- 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
|
||||
```css
|
||||
- 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
|
||||
|
||||
```python
|
||||
# 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
|
||||
```css
|
||||
: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
|
||||
```html
|
||||
<!-- 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
|
||||
```tsx
|
||||
// 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
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren