# Visual Design Guide - Invoice Form
**myCRM Billing Module | Design Reference**
---
## 1. Farbpalette & Kontraste
### Status Colors (Semantic)
```
┌─────────────────────────────────────────────────────────────┐
│ DRAFT (Entwurf) │ #6B7280 │ ░░░░░░░░░░░░ Secondary │
│ OPEN (Offen) │ #06B6D4 │ ████████████ Info │
│ PAID (Bezahlt) │ #22C55E │ ████████████ Success │
│ PARTIAL (Teilzahlung) │ #F59E0B │ ████████████ Warning │
│ OVERDUE (Überfällig) │ #EF4444 │ ████████████ Danger │
│ CANCELLED (Storniert) │ #6B7280 │ ░░░░░░░░░░░░ Secondary │
└─────────────────────────────────────────────────────────────┘
```
### Surface Colors
```
Light Mode: Dark Mode:
┌──────────────────────────────┐ ┌──────────────────────────────┐
│ Background #FFFFFF │ │ Background #0F172A │
│ Surface-0 #FFFFFF │ │ Surface-0 #1E293B │
│ Surface-50 #F9FAFB │ │ Surface-50 #334155 │
│ Surface-100 #F3F4F6 │ │ Surface-100 #475569 │
│ Surface-200 #E5E7EB │ │ Surface-200 #64748B │
└──────────────────────────────┘ └──────────────────────────────┘
```
### Text Colors
```
┌────────────────────────────────────────────────────────────┐
│ Primary Text #111827 ████ High contrast (main text) │
│ Secondary Text #6B7280 ████ Medium contrast (labels) │
│ Muted Text #9CA3AF ████ Low contrast (hints) │
└────────────────────────────────────────────────────────────┘
```
### Accessibility Compliance
```
WCAG 2.1 AA Requirements:
✓ Normal Text (14px): 4.5:1 contrast ratio
✓ Large Text (18px+): 3.0:1 contrast ratio
✓ UI Components: 3.0:1 contrast ratio
WCAG 2.1 AAA Requirements:
✓ Normal Text (14px): 7.0:1 contrast ratio
✓ Large Text (18px+): 4.5:1 contrast ratio
```
---
## 2. Typography System
### Font Stack
```css
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
```
### Type Scale
```
┌──────────────────────────────────────────────────────────────┐
│ Dialog Title 24px / 1.5rem Bold (600) │
│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ │
│ │
│ Section Title 20px / 1.25rem Semibold (600) │
│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ │
│ │
│ Subsection 16px / 1rem Medium (500) │
│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ │
│ │
│ Body Text 14px / 0.875rem Regular (400) │
│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ │
│ │
│ Small Text 12px / 0.75rem Regular (400) │
│ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ │
└──────────────────────────────────────────────────────────────┘
```
### Line Heights
```
Headings: 1.2 (tight)
Body: 1.5 (normal)
Dense: 1.3 (compact tables)
Relaxed: 1.75 (long form text)
```
---
## 3. Spacing System
### Base Unit: 4px
```
┌───────────────────────────────────────────────────────────┐
│ Space Size Usage │
├───────────────────────────────────────────────────────────┤
│ 0.25rem 4px │ Minimal gap (inline icons) │
│ 0.5rem 8px ││ Label margin, tight spacing │
│ 0.75rem 12px │││ Inline field gaps │
│ 1rem 16px ││││ Field gaps (standard) │
│ 1.5rem 24px │││││││ Section padding │
│ 2rem 32px ││││││││││ Section gaps │
│ 3rem 48px │││││││││││││││││ Empty state padding │
└───────────────────────────────────────────────────────────┘
```
### Component Spacing
```
FORM SECTION:
┌─────────────────────────────────────┐
│ [24px padding] │
│ │
│ ┌─────────────────────────────┐ │
│ │ Header │ │
│ └─────────────────────────────┘ │
│ [24px gap] │
│ ┌─────────────────────────────┐ │
│ │ Field 1 [16px gap] Field 2 │ │
│ └─────────────────────────────┘ │
│ [16px gap] │
│ ┌─────────────────────────────┐ │
│ │ Field 3 │ │
│ └─────────────────────────────┘ │
│ │
│ [24px padding] │
└─────────────────────────────────────┘
[32px gap between sections]
```
---
## 4. Component Anatomy
### Invoice Item Card
```
┌─────────────────────────────────────────────────────────────┐
│ Position 1 [Delete] ←16px │
│ ─────────────────────────────────────────────────────────── │ 16px
│ │
│ ┌───────────────────────────────────────────────────────┐ │ │
│ │ Beschreibung │ │ │
│ │ (Textarea - 2 rows) │ │ │
│ └───────────────────────────────────────────────────────┘ │ │
│ ↕ 12px gap │
│ ┌─────────────┐ ┌──────────────┐ ┌──────┐ │ │
│ │ Menge │ │ Einzelpreis │ │ MwSt │ │ │
│ │ 1.00 Stk. │ │ 100,00 € │ │ 19% │ │ │
│ └─────────────┘ └──────────────┘ └──────┘ │ │
│ ↕ 16px gap │
│ ─────────────────────────────────────────────────────────── │
│ Zwischensumme: 119,00 € ←semibold │
└─────────────────────────────────────────────────────────────┘
↑ ↑
16px padding 16px padding
```
### Invoice Summary Box
```
┌─────────────────────────────────────────────────────────────┐
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
│ ┃ Zusammenfassung [24px padding] ┃ │
│ ┃ ───────────────────────────────────────────────────── ┃ │
│ ┃ ┃ │
│ ┃ Nettobetrag: 1.000,00 € ← 8px │ │
│ ┃ MwSt (19%): 190,00 € ┃ │
│ ┃ MwSt (7%): 14,00 € ┃ │
│ ┃ ↕ 12px gap ┃ │
│ ┃ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ┃ │
│ ┃ ↕ 16px gap ┃ │
│ ┃ GESAMTBETRAG: 1.204,00 € ┃ │
│ ┃ (20px font, bold) ┃ │
│ ┃ ┃ │
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
└─────────────────────────────────────────────────────────────┘
Gradient background: primary-50 → primary-100
Border: 2px solid primary-color
```
### Empty State
```
┌─────────────────────────────────────────────────────────────┐
│ │
│ 48px ↓ │
│ ┌──────────────┐ │
│ │ │ │
│ │ Inbox │ ← 48px icon, muted │
│ │ Icon │ │
│ └──────────────┘ │
│ 16px ↓ │
│ Noch keine Positionen hinzugefügt │
│ (16px, medium weight, secondary color) │
│ 8px ↓ │
│ Fügen Sie mindestens eine Position hinzu, │
│ um die Rechnung zu erstellen │
│ (12px, muted color) │
│ 24px ↓ │
│ ┌──────────────────────────┐ │
│ │ Erste Position hinzufügen │ │
│ └──────────────────────────┘ │
│ │
│ 48px ↓ │
└─────────────────────────────────────────────────────────────┘
```
---
## 5. Interactive States
### Button States
```
DEFAULT:
┌──────────────┐
│ Speichern │ Background: primary-color
└──────────────┘ Text: white
Height: 40px (2.5rem)
Padding: 12px 20px
Border-radius: 6px
HOVER:
┌──────────────┐
│ Speichern │ Background: primary-600 (darker)
└──────────────┘ Transform: scale(1.02)
Transition: 0.2s ease
FOCUS:
┌──────────────┐
│ Speichern │ Outline: 2px solid primary-color
└──────────────┘ Outline-offset: 2px
LOADING:
┌──────────────┐
│ ⟳ Speichern │ Spinner icon rotating
└──────────────┘ Cursor: wait
Opacity: 0.8
DISABLED:
┌──────────────┐
│ Speichern │ Background: surface-200
└──────────────┘ Text: text-muted
Cursor: not-allowed
Opacity: 0.6
```
### Input Field States
```
DEFAULT (FloatLabel):
┌─────────────────────────────────────┐
│ Rechnungsnummer │ ← Label (12px, top)
│ INV-2025-001 │ ← Value (14px)
└─────────────────────────────────────┘
Border: 1px solid surface-200
Height: 44px (touch-friendly)
FOCUS:
┌─────────────────────────────────────┐
│ Rechnungsnummer │ ← Label (primary color)
│ INV-2025-001│ │ ← Cursor visible
└─────────────────────────────────────┘
Border: 2px solid primary-color
Box-shadow: 0 0 0 3px primary-50
ERROR:
┌─────────────────────────────────────┐
│ Rechnungsnummer │ ← Label (danger color)
│ INV-2025-001 │
└─────────────────────────────────────┘
⚠ Rechnungsnummer ist erforderlich ← Error message (12px, danger)
Border: 2px solid danger-color
DISABLED:
┌─────────────────────────────────────┐
│ Rechnungsnummer │ ← Label (muted)
│ INV-2025-001 │ ← Value (muted)
└─────────────────────────────────────┘
Background: surface-100
Cursor: not-allowed
Opacity: 0.6
```
---
## 6. Animation & Transitions
### Timing Functions
```javascript
// Fast interactions (hover, focus)
transition: all 0.15s ease-in-out;
// Standard interactions (expand, collapse)
transition: all 0.2s ease;
// Slow interactions (page transitions)
transition: all 0.3s ease;
```
### List Animations (Invoice Items)
```
ENTER (new item):
┌─────────────┐ ┌─────────────┐
│ Opacity │ → │ Opacity │
│ 0.0 │ │ 1.0 │
└─────────────┘ └─────────────┘
↓ ↓
TranslateY(-20px) TranslateY(0)
Duration: 0.3s ease-out
LEAVE (deleted item):
┌─────────────┐ ┌─────────────┐
│ Opacity │ → │ Opacity │
│ 1.0 │ │ 0.0 │
└─────────────┘ └─────────────┘
↓ ↓
TranslateX(0) TranslateX(20px)
Duration: 0.3s ease
```
### Micro-interactions
```
Button Click:
• Transform: scale(0.98)
• Duration: 0.1s
• Timing: ease-out
Card Hover:
• Box-shadow: 0 2px 8px rgba(0,0,0,0.08)
• Border-color: primary-color
• Duration: 0.2s
• Timing: ease
Toast Notification:
• Slide in from right
• Transform: translateX(100%) → translateX(0)
• Duration: 0.3s
• Timing: cubic-bezier(0.4, 0, 0.2, 1)
```
---
## 7. Responsive Breakpoints
```
┌────────────────────────────────────────────────────────────┐
│ BREAKPOINT WIDTH COLUMNS LAYOUT │
├────────────────────────────────────────────────────────────┤
│ Small Mobile < 576px 1 Stack all fields │
│ Mobile 576-768px 1 Stack + full width │
│ Tablet 768-992px 1-2 Hybrid layout │
│ Desktop 992-1200px 2 2-column grid │
│ Large Desktop > 1200px 2-3 Optimized spacing │
└────────────────────────────────────────────────────────────┘
```
### Layout Examples
**Desktop (992px+)**
```
┌─────────────────────────────────────────────────────┐
│ Rechnungsinformationen [Tag] │
│ ─────────────────────────────────────────────────── │
│ ┌────────────────┐ ┌────────────────┐ │
│ │ Rechnungsnr. │ │ Status │ │
│ └────────────────┘ └────────────────┘ │
│ ┌──────────────────────────────────────────────┐ │
│ │ Kunde (full width) │ │
│ └──────────────────────────────────────────────┘ │
│ ┌────────────────┐ ┌────────────────┐ │
│ │ Datum │ │ Fälligk. │ │
│ └────────────────┘ └────────────────┘ │
└─────────────────────────────────────────────────────┘
```
**Tablet (768-992px)**
```
┌─────────────────────────────────────┐
│ Rechnungsinformationen [Tag] │
│ ───────────────────────────────────── │
│ ┌───────────────────────────────┐ │
│ │ Rechnungsnr. │ │
│ └───────────────────────────────┘ │
│ ┌───────────────────────────────┐ │
│ │ Status │ │
│ └───────────────────────────────┘ │
│ ┌───────────────────────────────┐ │
│ │ Kunde │ │
│ └───────────────────────────────┘ │
│ ┌───────────────────────────────┐ │
│ │ Datum │ │
│ └───────────────────────────────┘ │
│ ┌───────────────────────────────┐ │
│ │ Fälligkeit │ │
│ └───────────────────────────────┘ │
└─────────────────────────────────────┘
```
**Mobile (< 768px)**
```
┌─────────────────────────┐
│ Rechnung │
│ [Tag] │
│ ─────────────────────── │
│ ┌─────────────────────┐ │
│ │ Rechnungsnr. │ │
│ └─────────────────────┘ │
│ ┌─────────────────────┐ │
│ │ Status │ │
│ └─────────────────────┘ │
│ ┌─────────────────────┐ │
│ │ Kunde │ │
│ └─────────────────────┘ │
│ ... │
└─────────────────────────┘
Dialog = Full Screen
Summary = Sticky Bottom
```
---
## 8. Iconography
### PrimeIcons Usage
```
┌────────────────────────────────────────────────────────┐
│ CONTEXT ICON SIZE USAGE │
├────────────────────────────────────────────────────────┤
│ Add Item pi-plus 1rem Buttons │
│ Remove Item pi-trash 1rem Buttons │
│ Save pi-check 1rem Buttons │
│ Cancel pi-times 1rem Buttons │
│ Upload pi-upload 2rem Empty state │
│ PDF pi-file-pdf 2.5rem Preview │
│ Calendar pi-calendar 0.875 Input icon │
│ Building/Company pi-building 1rem Dropdown │
│ Info pi-info-circle 1rem Messages │
│ Warning pi-exclamation 1rem Alerts │
│ Success pi-check-circle 1rem Toast │
│ Error pi-times-circle 1rem Toast │
└────────────────────────────────────────────────────────┘
```
### Icon Colors
```
Default: var(--text-secondary) #6B7280
Primary: var(--primary-color) #3B82F6
Success: var(--success-color) #22C55E
Warning: var(--warning-color) #F59E0B
Danger: var(--danger-color) #EF4444
Muted: var(--text-muted) #9CA3AF (opacity: 0.5)
```
---
## 9. Error Handling & Validation
### Validation Patterns
```
INLINE VALIDATION (on blur):
┌─────────────────────────────────────┐
│ E-Mail │
│ invalid.email │ ← Invalid input
└─────────────────────────────────────┘
⚠ Ungültige E-Mail-Adresse ← Error appears immediately
Duration: 0.2s fade-in
SUBMIT VALIDATION:
┌─────────────────────────────────────┐
│ Rechnungsnummer │
│ │ ← Empty required field
└─────────────────────────────────────┘
⚠ Rechnungsnummer ist erforderlich
All errors show simultaneously on submit
Focus moves to first invalid field
```
### Error States Visual Hierarchy
```
PRIORITY 1 - Critical Errors (Red border + icon):
┌─────────────────────────────────────┐
│ ⚠ Rechnungsnummer │ ← Red label
│ │
└─────────────────────────────────────┘
Border: 2px solid danger-color
PRIORITY 2 - Warnings (Orange border):
┌─────────────────────────────────────┐
│ ⚠ Fälligkeitsdatum │ ← Orange label
│ 01.01.2024 │
└─────────────────────────────────────┘
⚠ Datum liegt in der Vergangenheit
Border: 2px solid warning-color
PRIORITY 3 - Info (Blue border):
┌─────────────────────────────────────┐
│ ℹ Steuer-ID │
│ DE123456789 │
└─────────────────────────────────────┘
ℹ Optional, aber empfohlen
Border: 1px solid info-color
```
---
## 10. Loading & Empty States
### Skeleton Screens
```
LOADING FORM:
┌─────────────────────────────────────┐
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ ← Animated gradient
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
│ ▓▓▓▓▓▓▓▓▓▓ │
└─────────────────────────────────────┘
Animation: shimmer effect (1.5s loop)
Background: linear-gradient 200% width
LOADING BUTTON:
┌──────────────┐
│ ⟳ Lädt... │ ← Spinner rotates
└──────────────┘
Disabled: true
Cursor: wait
```
### Progress Indication
```
UPLOAD PROGRESS:
┌─────────────────────────────────────┐
│ rechnung_2025_001.pdf │ [×] │
│ 2.4 MB │
│ ▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░ 45% │ ← Progress bar
└─────────────────────────────────────┘
Height: 6px
Background: success-color
Animation: smooth increment
```
---
## 11. Accessibility Features
### Focus Management
```
TAB ORDER:
1. Rechnungsnummer [← First field]
2. Status
3. Kunde
4. Rechnungsdatum
5. Fälligkeitsdatum
6. Position 1 - Beschreibung
7. Position 1 - Menge
8. Position 1 - Preis
9. Position 1 - MwSt
10. Position hinzufügen Button
...
N-1. Abbrechen Button
N. Speichern Button [← Last focusable]
ESC: Return to previous focusable
```
### ARIA Live Regions
```html
Rechnung wird gespeichert...
Rechnung wurde gespeichert
Fehler: {{ errorMessage }}
Position {{ index + 1 }} wurde entfernt
```
### Keyboard Navigation Hints
```
┌────────────────────────────────────────────────────────┐
│ [Ctrl+S] Speichern • [Ctrl+⇧+P] Position hinzufügen │
│ [Esc] Abbrechen • [Tab] Nächstes Feld │
└────────────────────────────────────────────────────────┘
Display: Desktop & Tablet only
Hidden on mobile (<768px)
Can be toggled with [?] key
```
---
## 12. Print Styles
```css
@media print {
/* Hide interactive elements */
.form-actions,
.keyboard-hints,
.invoice-item-actions,
button { display: none !important; }
/* Optimize for paper */
.form-section {
box-shadow: none;
page-break-inside: avoid;
}
/* Black & white optimization */
.invoice-summary {
background: white;
border: 2px solid black;
}
/* Add page breaks */
.page-break { page-break-after: always; }
}
```
### Print Layout Preview
```
PAGE 1:
┌─────────────────────────────────────┐
│ myCRM Logo │
│ ─────────────────────────────────── │
│ │
│ RECHNUNG INV-2025-001 │
│ │
│ Rechnungsinformationen │
│ Rechnungsnr: INV-2025-001 │
│ Datum: 12.12.2025 │
│ Kunde: ACME Corp │
│ │
│ Rechnungspositionen │
│ 1. Consulting Services │
│ 10 Stk × 100,00 € = 1.000,00 € │
│ │
│ ─────────────────────────────────── │
│ Nettobetrag: 1.000,00 € │
│ MwSt (19%): 190,00 € │
│ GESAMTBETRAG: 1.190,00 € │
│ │
│ Seite 1 von 1 │
└─────────────────────────────────────┘
```
---
**Document Version:** 1.0
**Last Updated:** 2025-12-12
**Author:** UX Designer Agent
**Project:** myCRM Billing Module