# 🎨 BYTEMALTE Design System v1.1

Dieses Dokument definiert die visuelle Identität für alle Projekte von **ByteMalte**. Konsistenz vor Komplexität.

---

## 🌈 Farbpalette (Hex)

| Rolle | Hex-Code | Kontrast (auf `#0F172A`) | Einsatzbereich |
| :--- | :--- | :--- | :--- |
| **Primary** | `#8888FF` | 5.7:1 | Buttons, Links, Brand-Elemente |
| **Secondary** | `#3DDC84` | 7.0:1 | Success-Meldungen, Akzente, Tags |
| **Background** | `#0F172A` | — | Haupt-Hintergrund (Dark Mode bevorzugt) |
| **Surface** | `#1E293B` | — | Karten, Sektionen, Modals |
| **Text (High)** | `#F8FAFC` | 15.4:1 | Überschriften, Fließtext |
| **Text (Muted)** | `#B0BDD0` | 7.2:1 | Beschreibungen, Footer, sekundärer Text |
| **Accent/Error** | `#EF4444` | 4.5:1 | Fehler, Löschen-Buttons |

> Alle Farben erfüllen WCAG AA (mindestens 4.5:1 für normalen Text, 3:1 für großen Text).

---

## 📐 Layout & Abrundungen (Borders)

Wir nutzen ein weiches, modernes Design mit großzügigen Radien.

* **Buttons:** `8px` (Medium Round)
* **Cards / Container:** `16px` (Large Round)
* **Inputs / Formulare:** `8px`
* **Profilbilder:** `50%` (Circle)

---

## 🖋️ Typografie

* **Font Family:** `Inter, system-ui, sans-serif` (Clean & Programmierer-Vibe)
* **Headline Scale:**
    * **h1:** `2.5rem` | Bold (700)
    * **h2:** `1.8rem` | Semi-Bold (600)
    * **h3:** `1.2rem` | Medium (500)
* **Body:** `1rem` | Regular (400) | Line-height: `1.6`

---

## ⚡ UI-Komponenten Spezifikationen

### Buttons
* **Default:** Primary Background, White Text, keine Border.
* **Hover:** Helligkeit +10%, leichter Box-Shadow (`0 4px 6px -1px rgb(0 0 0 / 0.1)`).
* **Active:** Skalierung auf `0.98` (Click-Effekt).

### Karten (Cards)
* **Background:** `Surface` (`#1E293B`)
* **Border:** `1px solid #334155`
* **Padding:** `24px`

---

> **Pro-Tipp für die KI:** Kopiere dieses File in den Prompt und sage: "Erstelle die UI basierend auf dem BYTEMALTE Design System."