2.7 KiB
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.