AV Dashboard Redesign — nexu-io/open-design inspiriert

AV Dashboard Redesign

Kompletter visueller Neustart. Infrastruktur (Content Collections, vault.ts, format.ts, auth.ts, data-JSONs) bleibt unangetastet — alles Visuelle wird ersetzt.

Design-Thesis

“Mercury for Operators”: Weisses Arbeitsfeld mit dunkel verankerter Sidebar. Zahlen sind die Helden — gross, Monospace, negatives Letter-Spacing. Die UI verschwindet, nur Information bleibt sichtbar.

Inspiration aus nexu-io/open-design:

• Vercel: Shadow-as-border (kein expliziter CSS-Border), generoeser Whitespace
• Stripe: Zahlen mit Gewicht 300/400 bei grosser Groesse, monospace Metriken, blaue Akzente
• Mercury Banking: Sehr grosszuegige Padding in Cards, weisse Flaechen, ein einziger Akzent-Farbton

Was sich strukturell aendert

Das groesste visuelle Delta: Sidebar statt Top-Nav

Vorher (Top-Nav):
[AV Dashboard] [Heute] [Projekte] [Cloud] [Finanzen]    [Logout]
─────────────────────────────────────────────────────────────────
<Content>

Nachher (Sidebar):
┌───────────┬─────────────────────────────────────────────────┐
│  AV       │                                                 │
│           │  <Content, max 720px, 32px Padding>             │
│  Heute    │                                                 │
│  Projekte │                                                 │
│  Cloud    │                                                 │
│  Finanzen │                                                 │
│           │                                                 │
│  Pipeline │                                                 │
│  ○ Pre 1  │                                                 │
│  ● Vert 2 │                                                 │
│  ● Pilot1 │                                                 │
│  ○ Aktiv 0│                                                 │
│           │                                                 │
│  Stand    │                                                 │
│  Logout   │                                                 │
└───────────┴─────────────────────────────────────────────────┘

Sidebar: 220px, bg #111111 (near-black), weisse Schrift
Content: weiss, max 720px

Die Sidebar traegt die Pipeline — so ist der Projektstatus jederzeit sichtbar, egal auf welcher Seite man ist.

Neues Token-System

Farben (Tailwind-Config)

colors: {
  ink: {
    0: '#ffffff',
    50: '#f9fafb',
    100: '#f3f4f6',
    200: '#e5e7eb',
    300: '#d1d5db',
    400: '#9ca3af',
    500: '#6b7280',
    600: '#4b5563',
    700: '#374151',
    800: '#1f2937',
    900: '#111827',
    950: '#030712',
  },
  rail: {
    bg: '#111111',      // Sidebar Hintergrund
    text: '#ffffff',
    muted: 'rgba(255,255,255,0.5)',
    active: '#ffffff',
    hover: 'rgba(255,255,255,0.08)',
    line: 'rgba(255,255,255,0.1)',
  },
  accent: {
    DEFAULT: '#2563eb',
    light: '#dbeafe',
    dim: '#1d4ed8',
  },
  ok: '#16a34a',
  warn: '#d97706',
  err: '#dc2626',
},
boxShadow: {
  border: '0 0 0 1px rgba(0,0,0,0.08)',
  card: '0 0 0 1px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04)',
  elevated: '0 0 0 1px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.08)',
}

Typografie

Inter Variable (npm: @fontsource-variable/inter)    -- alle UI-Texte
JetBrains Mono (npm: @fontsource/jetbrains-mono)   -- alle Zahlen, Metriken, Dates

Gewichts-System (3 Stufen):
  400  body, Fliesstext
  500  Labels, Nav-Links, UI-Elemente
  600  Card-Titel, Seiten-Ueberschriften
  300  Grosse Metriken (Burn-Rate-Zahl, Belege-Counter) — Stripe-Muster: Leichtigkeit = Selbstvertrauen

Display-Zahlen: font-mono, weight 300, tracking -0.04em, size 3rem+

Komponenten-Inventar

Bleibt (unveraendert)

• src/content.config.ts
• src/lib/vault.ts
• src/lib/format.ts
• src/lib/auth.ts
• src/lib/data.ts
• src/data/cloud-current.json
• src/data/finanzen-current.json

Wird ersetzt

Alt	Neu	Was sich aendert
layouts/Dashboard.astro	layouts/DashboardV4.astro	Sidebar-Layout statt Top-Nav
components/DateHeader.astro	components/PageHeader.astro	Schlankerer Header ohne Eyebrow
components/PipelineStrip.astro	in Sidebar integriert	Pipeline in Sidebar-Rail, nicht als Page-Strip
components/ProjectCardCompact.astro	components/ProjectCard.astro	Unified Card: shadow-as-border, kein Strip
components/ProjectCardKanban.astro	components/ProjectCard.astro	Gleiche Komponente, Props steuern Variante
components/KpiCard.astro	components/MetricCard.astro	Sehr grosse Zahl, Sparkline, Delta-Badge

Neu

• components/TaskRow.astro — Einzelne Task-Zeile fuer Heute
• components/BallBadge.astro — ball_bei Badge (mir/kunde/extern)

Seiten-Aufbau

/heute (index.astro)

[PageHeader: Mittwoch · 14. Mai — Stand 12 min]

[ Was steht an heute                              ]
[ Beer Bedachung  Quick-Wins-Deck...  02. Jun  ]
[ Markus Erlei   Naechsten Schritt...  —        ]
                                                   
[ Wartet auf andere (gedaempft)                   ]
[ Becker / Vibe Factory / Icking                  ]

[ Aktive Projekte                     alle → ]
[ Card  Card ]
[ Card  Card ]

[ Burn-Rate Cloud    Belege offen ]
[ €23.30  +18%       4            ]
[ Sparkline          Top 3 Liste  ]

/projekte (projekte.astro)

[PageHeader: Projekte — 5 aktiv, 2 off-track]

[Kanban 4 Spalten: Pre-Sales | Vertrag | Pilot | Aktiv]
[Cards in jeder Spalte: shadow-as-border, kein Strip]

[Off-Track: Unklar + Cold, gedaempft]
[Ungepflegt: ... ]

/cloud + /finanzen

Gleiche Infrastruktur, neues visuelles Kleid via DashboardV4.

Implementierungs-Reihenfolge

1. Tokens: tailwind.config.mjs + globals.css + Fonts installieren
2. Layout: DashboardV4.astro (Sidebar + Content Shell)
3. Komponenten: MetricCard, ProjectCard, TaskRow, BallBadge, PageHeader
4. Seiten: /heute → /projekte → /cloud + /finanzen
5. Dark Mode: CSS-Custom-Properties fuer Dark-Sidebar-Override (Content bleibt hell)

Anti-Patterns (explizit verboten in diesem Design)

• Kein expliziter border: auf Cards — nur box-shadow (shadow-as-border)
• Keine bunten Left-Strips auf Cards (war v3-Designentscheid, jetzt raus)
• Kein border-radius > 8px auf Cards
• Keine Outline-Buttons (kein border: 1px solid accent)
• Kein font-weight: 700 irgendwo (max 600)
• Kein text-transform: uppercase auf Seiten-Titeln (nur auf Section-Labels)
• Keine Top-Bar (durch Sidebar ersetzt)