Update DESIGN_SYSTEM.md to reflect the latest changes in font usage, including local hosting of the Roboto font, and enhance button styles with detailed design rationale.

2025-10-30 10:48:47 +01:00
parent c571f35cb3
commit 23afddd73d
1 changed files with 119 additions and 12 deletions
--- a/docs/DESIGN_SYSTEM.md
+++ b/docs/DESIGN_SYSTEM.md
@@ -1,13 +1,31 @@
 # experimenta Design System

 **Version:** 1.0
-**Letzte Aktualisierung:** 2025-10-29
+**Letzte Aktualisierung:** 2025-10-30
 **Font:** Roboto (Open Source Alternative zu DIN OT)

 Dieses Design System definiert die visuelle Identität und Komponenten-Bibliothek für **my.experimenta.science**. Es basiert auf dem Corporate Design der experimenta Science Center Website und den bereitgestellten Design-Vorlagen.

 ---

+## ⚠️ Wichtiger Hinweis zu Schriftarten
+
+**Wir verwenden Roboto statt der DIN OT Hausschrift.**
+
+**Gründe:**
+- **Open Source:** Roboto ist kostenlos und frei verfügbar
+- **Web-Performance:** Optimiert für digitale Anwendungen
+- **Ähnliche Optik:** Moderne, klare Sans-Serif ähnlich zu DIN OT
+- **DSGVO-konform:** Lokales Hosting ohne externe CDN-Abhängigkeit (Google Fonts)
+
+**Font-Hosting:**
+- Die Roboto-Schrift wird lokal aus `/public/fonts/roboto/` geladen
+- @font-face Deklarationen befinden sich in `assets/css/tailwind.css`
+- Benötigte Weights: 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold)
+- Format: WOFF2 (beste Kompression, moderne Browser-Unterstützung)
+
+---
+
 ## Inhaltsverzeichnis

 1. [Farbpalette](#farbpalette)
@@ -161,21 +179,28 @@ Dieses Design System definiert die visuelle Identität und Komponenten-Bibliothe

 ### Font-Family

-**Roboto** (Open Source, ähnlich zu DIN OT)
+**Roboto** (Open Source, ähnlich zu DIN OT, lokal gehostet)

 ```css
 font-family: 'Roboto', sans-serif;
 ```

-**Import:**
+**Lokales Hosting:**

-```html
-<link
-  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
-  rel="stylesheet"
-/>
+Die Roboto-Schrift wird lokal aus `/public/fonts/roboto/` geladen:
+
+```bash
+public/fonts/roboto/
+├── Roboto-VariableFont-latin.woff2  # Variable Font (Weight 100-900)
+└── roboto.css                        # @font-face Deklarationen
 ```

+**Variable Font:** Wir nutzen eine einzige Variable Font Datei, die alle Weights von 100-900 abdeckt. Das bedeutet bessere Performance (nur eine Datei statt 4 separate Dateien) und nahtlose Übergänge zwischen Font-Weights.
+
+**@font-face Deklarationen:** Siehe `assets/css/tailwind.css` (Zeile 15-40)
+
+**Download:** Die Datei wurde bereits heruntergeladen. Falls neu benötigt: [Google Fonts - Roboto](https://fonts.google.com/specimen/Roboto) → Download → WOFF2 Format → Variable Font auswählen
+
 **Gewichte:**

 - `300` - Light (Headlines)
@@ -373,20 +398,102 @@ background-position: 100%;

 #### Secondary Button

+**Style:**
+
+```css
+background: transparent;
+border: 2px solid rgba(255, 255, 255, 0.3);
+color: #ffffff;
+padding: 10px 30px;
+border-radius: 25px;
+font-size: 18px;
+font-weight: 500;
+transition: all 0.3s ease;
+
+/* Hover */
+background: #ffffff;
+color: #2e1065; /* Dark purple text on white */
+border-color: #ffffff;
+```
+
+**Tailwind:**
+
 ```html
 <button class="btn-secondary">Abbrechen</button>
 ```

+**CSS Klasse (Tailwind Config):**
+
 ```css
 .btn-secondary {
-  @apply bg-transparent border-2 border-accent text-accent;
-  @apply px-8 py-2.5 rounded-full;
-  @apply text-lg font-medium;
+  @apply inline-block relative;
+  @apply px-[30px] py-[10px];
+  @apply text-lg font-medium text-white;
+  @apply rounded-[25px];
+  @apply bg-transparent border-2 border-white/30;
  @apply transition-all duration-300;
-  @apply hover:bg-accent hover:text-white;
+  @apply hover:bg-white hover:text-purple-darkest hover:border-white;
 }
 ```

+#### Destructive Button
+
+**Verwendung:** Gefährliche/irreversible Aktionen (z.B. "Konto löschen", "Bestellung stornieren", "Aus Warenkorb entfernen")
+
+**Style:**
+
+```css
+background: #ea5b0c;
+background-image: linear-gradient(to left, #ea5b0c, #ea5b0c, #c7490a, #ea5b0c);
+background-size: 300%;
+color: #ffffff;
+padding: 10px 30px;
+border-radius: 25px;
+font-size: 18px;
+font-weight: 500;
+transition: background-position 1s, all 0.3s ease;
+
+/* Hover */
+background-position: 100%;
+```
+
+**Tailwind:**
+
+```html
+<button class="btn-destructive">Aus Warenkorb entfernen</button>
+```
+
+**CSS Klasse (Tailwind Config):**
+
+```css
+.btn-destructive {
+  @apply inline-block relative;
+  @apply px-[30px] py-[10px];
+  @apply text-lg font-medium text-white;
+  @apply rounded-[25px];
+  @apply cursor-pointer;
+  @apply border-0 outline-0;
+  @apply no-underline;
+  background: #ea5b0c;
+  background-image: linear-gradient(to left, #ea5b0c, #ea5b0c, #c7490a, #ea5b0c);
+  background-size: 300%;
+  background-position: 0%;
+  line-height: 1.7em;
+  transition: background-position 1s, all 0.3s ease;
+}
+
+.btn-destructive:hover {
+  background-position: 100%;
+}
+```
+
+**Design-Rationale:**
+- **EXP Signalorange** (#ea5b0c) aus dem offiziellen experimenta Styleguide
+- Signalisiert "Vorsicht" und "Gefahr" (stärker als gelbes Orange, weniger aggressiv als reines Rot)
+- Konsistentes Animations-Pattern wie Primary Button (1s Gradient-Shift)
+- Klar unterscheidbar vom Primary Button (Pink/Rot vs. Signal-Orange)
+- Offizielle CI-Farbe für Warnungen und destruktive Aktionen
+
 #### Button Sizes

 ```html