# PrimeVue Light Theme Guidelines

Datum: 2026-05-17

## Ziel

Das JARVIS Finance User Dashboard nutzt ein helles PrimeVue/Aura Theme. Lesbarkeit hat Vorrang vor dekorativer Zurückhaltung: keine helle Schrift auf hellen Flächen, keine alten Dark-Mode-Reste im User Mode.

## Textfarben

- Haupttext: `#172033` oder Tailwind `text-slate-900` / `text-slate-950`.
- Sekundärtext: `#475569` bis `#64748b`, z. B. `text-slate-600`.
- Muted Text: maximal `text-slate-500`; nicht heller auf weißem Hintergrund.
- Links: ruhiges Blau/Türkis, bevorzugt `#0b7285` oder `text-cyan-700`.

## Backgrounds

- App Surface: sehr helles Grau, `#f7fafc` / `bg-slate-50`.
- Cards/Dialoge: Weiß oder `bg-white/80`.
- Sekundäre Flächen: `bg-slate-50`, `bg-cyan-50`, `bg-emerald-50`, `bg-amber-50`, `bg-rose-50`.
- Keine User-Dashboard-Flächen mit `bg-slate-950`, `bg-slate-900`, `bg-gray-900`.

## Card Design

- Weiße Card-Flächen mit dezenter Border `#e2e8f0`.
- Moderater Radius, dezenter Shadow.
- Card-Titel dunkel, Beschreibungen gut lesbar in `text-slate-600`.
- Keine riesigen leeren dunklen Panels.

## Table Design

- Header: `bg-slate-50`, Text `text-slate-600` oder dunkler.
- Body: `text-slate-900` für primäre Werte; `text-slate-600` für Hilfstext.
- Beträge rechtsbündig mit tabular nums.
- Row Hover hell und dezent, z. B. `hover:bg-slate-50`.

## Badge Design

- Status-Badges müssen immer Text enthalten, nicht nur Farbe.
- Success: heller grüner Hintergrund + `text-emerald-800`.
- Warning: heller gelber/oranger Hintergrund + `text-amber-800`.
- Danger: heller roter Hintergrund + `text-red-800`.
- Info: heller cyan/blauer Hintergrund + `text-cyan-800`.

## Chart Farben

- Primary: `#0f8ea8`.
- Success: `#16a34a`.
- Warning: `#f59e0b`.
- Danger: `#dc2626`.
- Muted/Other: `#64748b`.
- Legenden immer dunkel genug; Tooltips mit klarem Text.

## Do

- Nutze `PageHeader`, `SectionCard`, `ChartPanel`, `KpiCard`, `StatusBadge` und `FilterToolbar` für neue User-Seiten.
- Nutze helle Badge-Hintergründe mit dunklem Text.
- Prüfe Crypto, Portfolio, Aktien/ETF und Position hinzufügen immer auf tatsächliche Lesbarkeit.
- Halte Read-only Hinweise dezent.

## Don't

- Kein `text-white`, `text-slate-100`, `text-slate-200`, `text-slate-300` auf hellen Flächen.
- Keine Dark-Surfaces im User Dashboard: `bg-slate-950`, `bg-slate-900`, `bg-gray-900`.
- Keine Statusinformationen nur über Farbe vermitteln.
- Keine Fake-Buttons für nicht implementierte Aktionen; deaktivieren und kurz erklären.