myCRM/docs/design/VISUAL_DESIGN_GUIDE.md

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

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

// 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

<!-- Screen reader announcements -->
<div aria-live="polite" aria-atomic="true" class="sr-only">
  <span v-if="saving">Rechnung wird gespeichert...</span>
  <span v-if="saved">Rechnung wurde gespeichert</span>
  <span v-if="error">Fehler: {{ errorMessage }}</span>
</div>

<!-- Status updates -->
<div aria-live="assertive" role="alert" class="sr-only">
  Position {{ index + 1 }} wurde entfernt
</div>

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

@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