# DESIGN.md

## Ziel
Dieses Dokument definiert das **visuelle und strukturelle Design‑Fundament** für alle Projekte, die sich an den wlkns‑Standards orientieren.

Ziel ist kein Show‑Design, sondern:
- hohe Lesbarkeit
- geringe kognitive Last
- langfristige Wartbarkeit
- klare Wiedererkennbarkeit

Design ist hier **Arbeitsmittel**, kein Selbstzweck.

---

## Grundhaltung

- **Light‑Mode first**
- ruhig, technisch, sachlich
- modern, aber nicht modisch
- funktional vor dekorativ

Merksatz:
> Sieht gut aus. Stört nicht. Funktioniert.

Dark Mode ist optional und wird **abgeleitet**, nicht gleichwertig entworfen.

---

## Farb‑System

### Design‑Prinzipien
- Farbe transportiert Bedeutung
- keine rein dekorativen Farben
- Akzentfarben sparsam einsetzen
- Rot ist Fehlerfarbe – immer

### Farb‑Tokens (Light Mode)

**Primärfarbe (Identität)**
- `--color-primary: #1F2A37;`  
  Verwendung: Header, Navigation, Überschriften

**Akzentfarbe (Interaktion)**
- `--color-accent: #0EA5A4;`  
  Verwendung: Links, aktive Zustände, Fokus

**Statusfarben**
- Success: `#16A34A`
- Warning: `#D97706`
- Error: `#DC2626`

**Neutrale Farben**
- Background: `#F8FAFC`
- Surface: `#FFFFFF`
- Border: `#E5E7EB`
- Text Primary: `#111827`
- Text Secondary: `#4B5563`

Farben dürfen nur aus diesem Set verwendet werden.

---

## Typografie

### Grundsatz
Lesbarkeit schlägt Individualität.

### Schriftarten
- **Primary UI Font:** Inter
- **Code / Monospace:** JetBrains Mono

### Schriftschnitte
- Headings: SemiBold
- Body: Regular
- Hervorhebung: Medium

### Regeln
- maximal eine Schriftfamilie pro Kontext
- keine verspielten Fonts
- keine Schriftmischung ohne funktionalen Grund

---

## Layout‑Prinzipien

- 8‑px‑Grid
- Weißraum vor Linien
- Inhalte in klaren Sections
- visuelle Hierarchie vor Rahmen

### Komponenten‑Denken
- Header
- Content‑Bereich
- Status / Feedback

Jede Oberfläche soll sich **vorhersehbar** anfühlen.

---

## Interaktion & Feedback

- Hover‑Effekte sind dezent
- Animationen nur, wenn sie Information transportieren
- Fokus‑Zustände müssen sichtbar sein

Kein visuelles Feedback ohne funktionale Bedeutung.

---

## Do / Don’t

### Do
- konsistente Abstände
- klare Typo‑Hierarchien
- ruhige Farbflächen

### Don’t
- harte Kontraste ohne Grund
- Schatten als Deko
- mehr als eine Akzentfarbe pro Screen

---

## Geltungsbereich

Dieses Design‑System gilt für:
- Web‑Oberflächen
- Desktop‑GUIs
- Dokumentation
- Status‑Dashboards

CLI‑Ausgaben orientieren sich an denselben Prinzipien (Lesbarkeit, Klarheit, Zurückhaltung).

---

## Status

Version: **v1.0 (Baseline)**

Änderungen am Design‑Fundament erfolgen bewusst, versioniert und dokumentiert.