docs: Design System Wiki-Seite hinzugefügt

- Farb-Tokens (Primär, Semantisch, Hintergründe) - Typografie (Desktop + Mobile, Armarium-spezifische Festlegungen) - Icon-Konventionen (Outline vs. Fill) - Komponenten-Regeln (Buttons, Inputs, Cards, Alerts) - Layout-Patterns und Responsive-Strategien - Dark Mode Umsetzung - Technologie-Stack Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-24 22:15:20 +02:00
parent 4c5c8b94d5
commit 055824a4d1
2 changed files with 233 additions and 0 deletions
@@ -0,0 +1,232 @@
+# Armarium – Design System
+
+## Farben
+
+### Primärfarbe (Violet)
+Tailwind `violet` wird durchgehend als Primärfarbe verwendet.
+
+| Token | Tailwind-Klasse | Hex | Verwendung |
+|---|---|---|---|
+| Primary | `violet-700` | `#6d28d9` | Buttons, aktive Nav-Links |
+| Primary Hover | `violet-800` | `#5b21b6` | Button Hover |
+| Primary Dark | `violet-600` | `#7c3aed` | Buttons im Dark Mode |
+| Primary Dark Hover | `violet-700` | `#6d28d9` | Button Hover im Dark Mode |
+| Focus Ring | `violet-300` | `#c4b5fd` | `focus:ring-violet-300` |
+| Focus Ring Dark | `violet-800` | `#5b21b6` | `dark:focus:ring-violet-800` |
+| Accent Light | `violet-100` | `#ede9fe` | Badges, aktiver Sidebar-BG |
+| Accent Text | `violet-700` | `#6d28d9` | Badge-Text, Links |
+
+### Semantische Farben
+
+| Bedeutung | Light | Dark | Verwendung |
+|---|---|---|---|
+| Erfolg | `emerald-600` | `emerald-400` | Positive Werte, Erfolgsmeldungen |
+| Fehler / Gefahr | `red-600` | `red-400` | Fehlermeldungen, Danger Zone |
+| Warnung | `amber-600` | `amber-400` | Warnhinweise, Backup-Codes |
+| Neutral | `gray-500` | `gray-400` | Sekundärer Text |
+
+### Hintergründe
+
+| Bereich | Light | Dark |
+|---|---|---|
+| App-Hintergrund | `gray-50` | `gray-900` |
+| Cards / Panels | `white` | `gray-800` |
+| Input-Felder | `gray-50` | `gray-700` |
+| Sidebar | `white` | `gray-800` |
+| Navbar | `white` | `gray-800` |
+| Modale Backdrop | `gray-900/50` | `gray-900/80` |
+
+---
+
+## Typografie
+
+**Font:** Roboto – selbst-gehostet via `@fontsource/roboto` (kein Google Fonts CDN, DSGVO/nDSG-konform)
+
+**Weights:** 300 (Light) · 400 (Regular) · 500 (Medium) · 700 (Bold)
+
+### Schriftgrössen — Desktop
+
+| Element | Richtwert | Tailwind-Klasse | px | Verwendung |
+|---|---|---|---|---|
+| Überschrift H1 | 24–32px | `text-2xl` | 24px | Page Titles, Dashboard-Greeting (`font-light`) |
+| Überschrift H2 | 20–24px | `text-xl` / `text-2xl` | 20–24px | KPI-Werte, grosse Kennzahlen |
+| Überschrift H3 | 16–20px | `text-lg font-semibold` | 18px | Modal-Titel, Card-Header |
+| Fliesstext / Body | 14–16px | `text-sm` | 14px | Standardtext, Tabelleninhalt |
+| Buttons | 14–15px | `text-sm` | 14px | Alle Buttons |
+| Navigationselemente | 13–15px | `text-sm` | 14px | Sidebar, Navbar |
+| Labels / Captions | 12–13px | `text-xs` | 12px | Formular-Labels, Badges, Hints |
+| Tooltips / Helper Text | 11–12px | `text-2xs` / `text-xs` | 11–12px | Tooltips, sekundäre Hinweise |
+
+### Schriftgrössen — Mobile
+
+> **Stand v1.1.0:** Responsive Schriftgrössen für Body/Buttons noch nicht umgesetzt — geplant für v1.2.0.
+> Aktuell werden auf Mobile dieselben Klassen wie Desktop verwendet (`text-sm` = 14px).
+> Ausnahme: KPI-Werte bereits responsiv (`text-xl sm:text-2xl`).
+
+| Element | Plattform-Richtwert | Aktuell (v1.1.0) | Ziel (v1.2.0) |
+|---|---|---|---|
+| Überschriften | 20–28px | `text-xl sm:text-2xl` ✅ | — |
+| Fliesstext / Body | 15–17px | `text-sm` (14px) | `text-sm sm:text-base` |
+| Buttons | 15–16px | `text-sm` (14px) | `text-sm sm:text-base` |
+| Navigationselemente | 13–14px | `text-sm` (14px) ✅ | — |
+| Labels / Captions | 12–13px | `text-xs` (12px) ✅ | — |
+| Tooltips / Helper Text | 11–12px | `text-xs` (12px) ✅ | — |
+
+### Armarium-spezifische Festlegungen
+
+| Rolle | Klasse | Begründung |
+|---|---|---|
+| Dashboard-Greeting H1 | `text-2xl font-light` | Bewusst leicht (300) für persönlichen Charakter |
+| Card-Überschriften H3 | `text-base font-semibold` | Kompakter als H3-Richtwert, passt zu Card-Layout |
+| Savings Rate | `text-3xl font-bold` | Bewusst grösser als H1 für visuelle Wirkung |
+| KPI-Werte | `text-xl sm:text-2xl font-bold` | Responsiv: kleiner auf Mobile |
+
+---
+
+## Icons
+
+**Bibliothek:** Flowbite Icons (SVG, inline)
+
+### Outline-Icons (Standard)
+Für Navbar, Modale, Alerts, Buttons — überall ausser Sidebar-Navigation.
+
+```html
+<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="..."/>
+</svg>
+```
+
+### Fill-Icons (Sidebar)
+Ausschliesslich für die Sidebar-Navigation.
+
+```html
+<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+  <path d="..."/>
+</svg>
+```
+
+### Häufig verwendete Icons
+
+| Icon | Flowbite-Name | Verwendung |
+|---|---|---|
+| Bearbeiten | `pen-to-square` (outline) | Edit-Buttons in Tabellen |
+| Löschen | `trash-bin` (outline) | Delete-Buttons in Tabellen |
+| Schliessen | `close` / X-Pfade (outline) | Modal-Close-Buttons |
+| Logout | `arrow-right-to-bracket` (outline) | Avatar-Dropdown |
+| Sonne | `sun` (outline) | Dark-Mode-Toggle |
+| Mond | `moon` (outline) | Dark-Mode-Toggle |
+| Glocke | `bell` (outline) | Notifications |
+
+---
+
+## Komponenten-Regeln
+
+### Buttons
+
+```html
+<!-- Primary -->
+<button class="rounded-lg bg-violet-700 px-4 py-2 text-sm font-medium text-white
+  hover:bg-violet-800 focus:outline-none focus:ring-4 focus:ring-violet-300
+  dark:bg-violet-600 dark:hover:bg-violet-700 dark:focus:ring-violet-800 transition-colors">
+
+<!-- Danger -->
+<button class="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white
+  hover:bg-red-700 focus:outline-none focus:ring-4 focus:ring-red-300
+  dark:focus:ring-red-900 transition-colors">
+
+<!-- Secondary / Ghost -->
+<button class="rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium
+  text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100
+  dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400
+  dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700">
+```
+
+### Icon-only Buttons
+Minimum Touch-Target: `p-2` (niemals `p-1.5`).
+
+```html
+<button class="inline-flex items-center justify-center rounded-lg p-2
+  text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors">
+```
+
+### Input-Felder
+
+```html
+<input class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm
+  text-gray-900 placeholder-gray-400
+  focus:border-violet-600 focus:outline-none focus:ring-2 focus:ring-violet-300
+  dark:border-gray-600 dark:bg-gray-700 dark:text-white
+  dark:focus:border-violet-500 dark:focus:ring-violet-500" />
+```
+
+### Cards
+
+```html
+<div class="rounded-lg bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 p-6">
+```
+
+### Erfolgsmeldung / Fehlermeldung
+
+```html
+<!-- Erfolg -->
+<div class="flex items-center gap-2 rounded-lg bg-emerald-50 px-4 py-3 text-sm text-emerald-700
+  dark:bg-emerald-900/30 dark:text-emerald-400">
+
+<!-- Fehler -->
+<div class="flex items-center gap-2 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700
+  dark:bg-red-900/30 dark:text-red-400">
+```
+
+---
+
+## Layout
+
+### Breakpoints (Tailwind Standard)
+
+| Präfix | Breite | Einsatz |
+|---|---|---|
+| _(default)_ | 0px+ | Mobile First |
+| `sm:` | 640px+ | Tablet / grosse Phones |
+| `md:` | 768px+ | Kleine Laptops |
+| `lg:` | 1024px+ | Desktop |
+
+### Sidebar
+- **Desktop:** fixe Breite `w-64` (expandiert) / `w-16` (kollabiert)
+- **Mobile:** Slide-in Drawer, Overlay mit `bg-black/50` Backdrop
+- **Kollabiert:** Flyout-Submenus für Budgets/Accounts
+
+### Navbar
+- Fixe Höhe `57px` (entspricht `pt-[57px]` am Main-Content)
+- Alle Dropdowns per Angular-State (`signal<boolean>` + Backdrop-Div) — kein Flowbite JS
+
+### Responsive Patterns
+
+| Problem | Lösung |
+|---|---|
+| Tabellenspalten zu breit | `hidden sm:table-cell` / `hidden md:table-cell` |
+| Zwei-Spalten-Grid auf Mobile | `grid-cols-1 sm:grid-cols-2` |
+| Input + Button nebeneinander | `flex-col sm:flex-row` |
+| Langer Text in Karten | `min-w-0 flex-1` + `truncate` auf Text-Spans |
+| KPI-Karten auf Mobile | `p-3 sm:p-5`, Werte `text-xl sm:text-2xl` |
+
+---
+
+## Dark Mode
+
+- Aktivierung via CSS-Klasse `.dark` auf `<html>` (Tailwind `darkMode: 'class'`)
+- Standard: **Dark Mode aktiv** (Präferenz in `localStorage`)
+- Jede Komponente hat explizite `dark:` Klassen — kein automatisches Invertieren
+
+---
+
+## Technologie-Stack
+
+| Bereich | Technologie |
+|---|---|
+| Framework | Angular 21 (Standalone Components, Signals) |
+| CSS | Tailwind CSS v4 |
+| UI-Bibliothek | Flowbite (Icons + Plugin; kein Flowbite JS Runtime) |
+| Charts | ApexCharts 3.46 |
+| i18n | ngx-translate (DE / FR / IT / EN) |
+| Font | `@fontsource/roboto` (selbst-gehostet) |
+| Theme-Datei | `frontend/src/budget-app-theme.css` |
@@ -9,4 +9,5 @@ Willkommen im offiziellen Wiki von Armarium.
 - [Developer Setup](Developer-Setup)
 - [Deployment-Guide](Deployment-Guide)
 - [Feature-Dokumentation](Feature-Dokumentation)
+- [Design System](Design-System)
 - [Contributing Guide](Contributing-Guide)