diff --git a/Design-System.md b/Design-System.md deleted file mode 100644 index 79a49a6..0000000 --- a/Design-System.md +++ /dev/null @@ -1,232 +0,0 @@ -# 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 - - - -``` - -### Fill-Icons (Sidebar) -Ausschliesslich für die Sidebar-Navigation. - -```html - - - -``` - -### 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 - -