ui

2025-12-20 15:53:19 +01:00
parent 769462c439
commit e9807a60d5
11 changed files with 1023 additions and 0 deletions
--- a/design/tokens.css
+++ b/design/tokens.css
@ -0,0 +1,95 @@
+/*
+ wlkns-dev-standards
+ Design Tokens – CSS
+ Version: v1.0
+
+ Zweck:
+ Zentrale, technologieunabhängige Design-Tokens für Web-UIs.
+ Dieses File ist die Single Source of Truth für Farben, Typografie
+ und grundlegende Abstände.
+*/
+
+:root {
+  /* =========================
+     Farben – Identity
+     ========================= */
+
+  --color-primary: #1F2A37;   /* Header, Navigation, Headlines */
+  --color-accent:  #0EA5A4;   /* Links, Fokus, aktive States */
+
+  /* =========================
+     Farben – Status
+     ========================= */
+
+  --color-success: #16A34A;
+  --color-warning: #D97706;
+  --color-error:   #DC2626;
+
+  /* =========================
+     Farben – Neutrals (Light)
+     ========================= */
+
+  --color-bg:        #F8FAFC;
+  --color-surface:   #FFFFFF;
+  --color-border:    #E5E7EB;
+
+  --color-text:          #111827;
+  --color-text-muted:   #4B5563;
+
+  /* =========================
+     Typografie
+     ========================= */
+
+  --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
+             'Segoe UI', sans-serif;
+
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular,
+               Menlo, Consolas, monospace;
+
+  --font-size-xs: 0.75rem;   /* 12px */
+  --font-size-sm: 0.875rem;  /* 14px */
+  --font-size-md: 1rem;      /* 16px */
+  --font-size-lg: 1.125rem;  /* 18px */
+  --font-size-xl: 1.25rem;   /* 20px */
+
+  --line-height-tight: 1.3;
+  --line-height-base:  1.6;
+
+  /* =========================
+     Spacing (8px Grid)
+     ========================= */
+
+  --space-1: 0.25rem;  /* 4px */
+  --space-2: 0.5rem;   /* 8px */
+  --space-3: 0.75rem;  /* 12px */
+  --space-4: 1rem;     /* 16px */
+  --space-5: 1.5rem;   /* 24px */
+  --space-6: 2rem;     /* 32px */
+
+  /* =========================
+     Radius & Effects
+     ========================= */
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+/* =========================
+   Base Styles (optional)
+   ========================= */
+
+body {
+  font-family: var(--font-ui);
+  font-size: var(--font-size-md);
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+  background-color: var(--color-bg);
+}
+
+code, pre {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+}