143 lines
2.7 KiB
Markdown
143 lines
2.7 KiB
Markdown
# 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.
|
||
|