1.9 KiB
1.9 KiB
🎨 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)
- h1:
- 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."