58 lines
1.8 KiB
Markdown
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`
|
|
|
|
---
|