ui

design/component_guide.md

@@ -0,0 +1,117 @@
+# COMPONENT_GUIDE.md
+
+## Zweck
+Dieses Dokument beschreibt die **standardisierten UI-Komponenten** für Buttons und Forms.
+
+Ziel:
+- konsistentes Look & Feel
+- vorhersehbare Interaktion
+- minimale Variantenvielfalt
+
+---
+
+## Buttons
+
+### Grundregel
+
+Buttons sind **Aktionen**, keine Dekoration.
+
+Maximal **eine Primary-Action pro View**.
+
+---
+
+### Button-Typen
+
+#### Primary
+- wichtigste Aktion
+- nutzt Akzentfarbe
+
+```html
+<button class="button primary">Speichern</button>
+```
+
+#### Secondary
+- alternative Aktionen
+- kein visueller Fokus
+
+```html
+<button class="button secondary">Abbrechen</button>
+```
+
+#### Danger
+- destruktive Aktionen
+- immer bewusst einsetzen
+
+```html
+<button class="button danger">Löschen</button>
+```
+
+---
+
+### Disabled State
+
+```html
+<button class="button primary" disabled>Speichern</button>
+```
+
+Disabled bedeutet: Aktion derzeit nicht möglich – nicht verstecken.
+
+---
+
+## Forms
+
+### Struktur
+
+```html
+<div class="form-group">
+  <label>Name</label>
+  <input type="text" />
+  <div class="hint">Pflichtfeld</div>
+</div>
+```
+
+---
+
+### Validierung
+
+```html
+<div class="form-group form-error">
+  <label>Email</label>
+  <input type="email" />
+  <div class="hint">Ungültige Adresse</div>
+</div>
+```
+
+Regeln:
+- Fehler sind sichtbar
+- keine Farbcodes ohne Text
+
+---
+
+## Do / Don’t
+
+### Do
+- klare Button-Texte
+- konsistente Platzierung
+- sichtbare Fokus-Zustände
+
+### Don’t
+- Icons ohne Text
+- mehrere Primary-Buttons
+- versteckte Fehlermeldungen
+
+---
+
+## Erweiterbarkeit
+
+- weitere Komponenten dürfen ergänzt werden
+- bestehende Klassen nicht brechen
+- Tokens bleiben die Grundlage
+
+---
+
+## Status
+
+Version: **v1.0 (Baseline)**
+
+Dieses Dokument ergänzt `DESIGN.md` und `CSS_GUIDE.md`.