Files
mcalc/BYTEMALTE.md

58 lines
1.8 KiB
Markdown

# 🎨 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`
---