my2/docs/DESIGN_SYSTEM.md

# experimenta Design System

**Version:** 1.0
**Letzte Aktualisierung:** 2025-10-29
**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.

---

## Inhaltsverzeichnis

1. [Farbpalette](#farbpalette)
2. [Typografie](#typografie)
3. [Spacing & Layout](#spacing--layout)
4. [Komponenten](#komponenten)
5. [Animationen & Transitions](#animationen--transitions)
6. [Accessibility](#accessibility)

---

## Farbpalette

### Primärfarben

**Experimenta Magenta** (Hauptfarbe)

```css
--color-primary: #e6007e;
--color-primary-hover: #c2006a;
--color-primary-light: #ff4081;
```

**Verwendung:** Primary Buttons, Links, aktive Zustände, Brand-Elemente

**Experimenta Pink**

```css
--color-secondary: #e91e63;
--color-secondary-dark: #c2185b;
```

**Verwendung:** Secondary Buttons, Footer Headings, Social Media Icons

**Experimenta Orange** (Akzent)

```css
--color-accent: #f59d24;
--color-accent-hover: #ffb347;
```

**Verwendung:** Border-Akzente (links), Hover-Effekte, Highlights, Labels

**Experimenta Rot** (Button-Gradient)

```css
--color-red: #e40521;
```

**Verwendung:** Button-Gradienten, Error-Zustände (zusammen mit Magenta)

### Background-Farben

**Dark Gradient** (Haupt-Background)

```css
--bg-gradient-primary: linear-gradient(135deg, #2e1065 0%, #1a0a3a 50%, #0f051d 100%);
```

**Purple Variants**

```css
--color-purple-dark: #2e1065; /* Start des Gradienten */
--color-purple-deeper: #1a0a3a; /* Mitte des Gradienten */
--color-purple-darkest: #0f051d; /* Ende des Gradienten */
```

**Header Background**

```css
--bg-header: rgba(46, 16, 101, 0.95); /* Mit backdrop-filter: blur(10px) */
```

**Footer Background**

```css
--bg-footer: linear-gradient(135deg, #1a0a3a 0%, #0f051d 100%);
```

### Glassmorphism (Cards & Containers)

```css
--glass-background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
--glass-backdrop: blur(15px);
--glass-border: 1px solid rgba(255, 255, 255, 0.2);
--glass-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
```

**Section Backgrounds (auf Glassmorphism Cards)**

```css
--bg-section: rgba(255, 255, 255, 0.08); /* Leicht heller als Card */
--bg-section-hover: rgba(255, 255, 255, 0.15);
```

### Semantische Farben

**Success**

```css
--color-success: #46c74a;
--color-success-dark: #3ba83e;
--color-success-gradient: linear-gradient(90deg, #46c74a 0%, #66d96a 50%, #46c74a 100%);
```

**Error**

```css
--color-error: #e53e3e;
--color-error-dark: #c53030;
```

**Warning**

```css
--color-warning: #f59d24;
--color-warning-dark: #dd8a1e;
```

**Info**

```css
--color-info: #4299e1;
--color-info-dark: #3182ce;
```

### Text-Farben

```css
--text-primary: #ffffff; /* Haupt-Text auf dunklem BG */
--text-secondary: rgba(255, 255, 255, 0.9); /* Sekundär-Text */
--text-muted: rgba(255, 255, 255, 0.8); /* Footer, Labels */
--text-disabled: rgba(255, 255, 255, 0.5); /* Disabled Elemente */

/* Text auf hellem Background (falls benötigt) */
--text-dark: #333333;
--text-dark-secondary: #666666;
```

### Border-Farben

```css
--border-accent: 4px solid #f59d24; /* Links-Border für Sections */
--border-light: 1px solid rgba(255, 255, 255, 0.2); /* Card Borders */
--border-footer: 1px solid rgba(255, 255, 255, 0.1); /* Footer Divider */
```

---

## Typografie

### Font-Family

**Roboto** (Open Source, ähnlich zu DIN OT)

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

**Import:**

```html
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
  rel="stylesheet"
/>
```

**Gewichte:**

- `300` - Light (Headlines)
- `400` - Regular (Body Text)
- `500` - Medium (Buttons, Labels)
- `700` - Bold (Footer Links, Strong Text)

### Font-Scale (Desktop)

| Element        | Size | Weight | Line Height | Letter Spacing |
| -------------- | ---- | ------ | ----------- | -------------- |
| **H1**         | 36px | 300    | 1.2         | -1px           |
| **H2**         | 30px | 300    | 1.3         | -0.5px         |
| **H3**         | 24px | 400    | 1.4         | 0              |
| **H4**         | 20px | 500    | 1.4         | 0              |
| **H5**         | 18px | 500    | 1.5         | 0.5px          |
| **H6**         | 16px | 600    | 1.5         | 0.5px          |
| **Body**       | 18px | 400    | 1.7         | 0              |
| **Body Small** | 16px | 400    | 1.6         | 0              |
| **Caption**    | 14px | 400    | 1.6         | 0              |
| **Tiny**       | 12px | 400    | 1.5         | 0              |

### Responsive Font-Scale

**Tablet (≤768px):**

```css
H1: 28px
H2: 24px
H3: 20px
Body: 16px
```

**Mobile (≤480px):**

```css
H1: 24px
H2: 20px
H3: 18px
Body: 14px
```

### Tailwind Klassen

```html
<!-- Headlines -->
<h1 class="text-4xl md:text-3xl sm:text-2xl font-light tracking-tight">
  <h2 class="text-3xl md:text-2xl sm:text-xl font-light">
    <h3 class="text-2xl md:text-xl sm:text-lg font-normal">
      <!-- Body Text -->
      <p class="text-lg md:text-base sm:text-sm leading-relaxed">
        <!-- Labels -->
        <span class="text-lg md:text-base sm:text-sm font-medium tracking-wide"></span>
      </p>
    </h3>
  </h2>
</h1>
```

---

## Spacing & Layout

### Spacing-System (8px Grid)

```css
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 30px;
--space-10: 40px;
--space-15: 60px;
--space-20: 80px;
```

### Container Max-Widths

```css
--container-main: 800px; /* Main Content (forms, text) */
--container-wide: 1200px; /* Footer, wide sections */
--container-full: 1760px; /* Full-width content (aus Website) */
```

### Border-Radius

```css
--radius-sm: 6px; /* Small elements (badges) */
--radius-md: 12px; /* Sections, Info-Cards */
--radius-lg: 15px; /* Standard Cards (mobile) */
--radius-xl: 20px; /* Standard Cards (desktop) */
--radius-2xl: 25px; /* Buttons */
--radius-full: 100%; /* Icons, Avatar */
```

### Breakpoints

```css
/* Mobile First */
--breakpoint-sm: 480px; /* Small phones */
--breakpoint-md: 768px; /* Tablets */
--breakpoint-lg: 1024px; /* Small desktops */
--breakpoint-xl: 1280px; /* Large desktops */
```

**Verwendung in Tailwind:**

```html
<!-- Mobile First: base = mobile, md = tablet, lg = desktop -->
<div class="p-4 md:p-8 lg:p-15"></div>
```

### Standard Paddings

**Cards:**

```css
/* Desktop */
padding: 60px 40px;

/* Tablet */
@media (max-width: 768px) {
  padding: 40px 20px;
}

/* Mobile */
@media (max-width: 480px) {
  padding: 30px 15px;
}
```

**Sections:**

```css
padding: 30px;

/* Tablet */
@media (max-width: 768px) {
  padding: 25px 20px;
}

/* Mobile */
@media (max-width: 480px) {
  padding: 20px 15px;
}
```

---

## Komponenten

### 1. Buttons

#### Primary Button

**Style:**

```css
background: #e6007e;
background-image: linear-gradient(to left, #e6007e, #e6007e, #e40521, #e6007e);
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-primary">Zur experimenta Startseite</button>
```

**CSS Klasse (Tailwind Config):**

```css
.btn-primary {
  @apply bg-gradient-to-l from-primary via-red to-primary;
  @apply bg-[length:300%] bg-left;
  @apply text-white px-8 py-2.5 rounded-full;
  @apply text-lg font-medium;
  @apply transition-all duration-300;
  @apply hover:bg-right;
}
```

#### Secondary Button

```html
<button class="btn-secondary">Abbrechen</button>
```

```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 transition-all duration-300;
  @apply hover:bg-accent hover:text-white;
}
```

#### Button Sizes

```html
<!-- Large (default) -->
<button class="btn-primary text-lg px-8 py-2.5">
  <!-- Medium -->
  <button class="btn-primary text-base px-6 py-2">
    <!-- Small (mobile) -->
    <button class="btn-primary text-base px-6 py-2 md:px-8 md:py-2.5"></button>
  </button>
</button>
```

---

### 2. Cards

#### Glass-morphism Card (Main Pattern)

**Style:**

```css
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(15px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
padding: 60px 40px;
```

**Tailwind:**

```html
<div class="card-glass">
  <!-- Content -->
</div>
```

**CSS Klasse:**

```css
.card-glass {
  @apply bg-gradient-to-br from-white/10 to-white/5;
  @apply backdrop-blur-xl;
  @apply rounded-2xl border border-white/20;
  @apply shadow-2xl;
  @apply p-15 md:p-10 sm:p-8;
}
```

#### Info Section Card

**Style:**

```css
background: rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 30px;
border-left: 4px solid #f59d24;
```

**Tailwind:**

```html
<div class="card-info">
  <h3 class="text-accent font-medium mb-4">Überschrift</h3>
  <p class="text-white/90">Inhalt...</p>
</div>
```

**CSS Klasse:**

```css
.card-info {
  @apply bg-white/8 rounded-xl;
  @apply p-8 md:p-6 sm:p-5;
  @apply border-l-4 border-accent;
}
```

---

### 3. Status Messages

#### Success Message

```html
<div class="status-message status-success">
  <div class="status-icon">✓</div>
  <h1>Verlängerung erfolgreich!</h1>
  <p>Ihre Jahreskarte wurde verlängert.</p>
</div>
```

**CSS:**

```css
.status-icon {
  @apply flex items-center justify-center;
  @apply w-25 h-25 rounded-full;
  @apply text-6xl text-white;
  @apply mb-8;
  @apply animate-pulse;
}

.status-success .status-icon {
  @apply bg-success;
}
```

#### Error Message

```html
<div class="status-message status-error">
  <div class="status-icon">✖</div>
  <h1>Ein Fehler ist aufgetreten</h1>
  <p>Bitte versuchen Sie es erneut.</p>
</div>
```

```css
.status-error .status-icon {
  @apply bg-error;
}
```

---

### 4. Progress Bar

```html
<div class="progress-container">
  <div class="progress-header">
    <h3 class="progress-title">Verlängerungsfortschritt</h3>
    <div class="progress-stats">5 / 10</div>
  </div>

  <div class="progress-bar-wrapper">
    <div class="progress-bar" style="width: 50%"></div>
    <div class="progress-percentage">50%</div>
  </div>
</div>
```

**CSS:**

```css
.progress-container {
  @apply bg-white/8 rounded-2xl;
  @apply p-8 md:p-6;
  @apply border-l-4 border-accent;
}

.progress-bar-wrapper {
  @apply relative w-full h-8;
  @apply bg-white/10 rounded-full;
  @apply overflow-hidden;
  @apply shadow-inner;
}

.progress-bar {
  @apply h-full rounded-full;
  @apply bg-gradient-to-r from-success via-[#66d96a] to-success;
  @apply bg-[length:200%] animate-shimmer;
  @apply transition-all duration-500;
}

.progress-percentage {
  @apply absolute inset-0;
  @apply flex items-center justify-center;
  @apply text-base font-semibold text-white;
  @apply drop-shadow-lg;
}
```

---

### 5. Forms

#### Input Field

```html
<div class="form-field">
  <label for="email" class="form-label">E-Mail-Adresse</label>
  <input type="email" id="email" class="form-input" placeholder="ihre.email@example.com" />
</div>
```

**CSS:**

```css
.form-label {
  @apply block text-lg font-medium text-white/90;
  @apply mb-3;
}

.form-input {
  @apply w-full px-4 py-3;
  @apply bg-white/10 border border-white/20;
  @apply rounded-xl;
  @apply text-white placeholder:text-white/50;
  @apply focus:outline-none focus:ring-2 focus:ring-accent;
  @apply transition-all duration-300;
}

.form-input:hover {
  @apply bg-white/15;
}
```

#### Checkbox

```html
<label class="form-checkbox">
  <input type="checkbox" class="checkbox-input" />
  <span class="checkbox-label">Adresse für zukünftige Bestellungen speichern</span>
</label>
```

**CSS:**

```css
.form-checkbox {
  @apply flex items-start gap-3 cursor-pointer;
}

.checkbox-input {
  @apply w-5 h-5 mt-0.5;
  @apply rounded border-2 border-white/30;
  @apply bg-white/10;
  @apply checked:bg-accent checked:border-accent;
  @apply focus:ring-2 focus:ring-accent;
  @apply cursor-pointer;
}

.checkbox-label {
  @apply text-base text-white/90;
}
```

---

### 6. Links

```html
<a href="#" class="link-primary">Mehr erfahren</a> <a href="#" class="link-accent">Hier klicken</a>
```

**CSS:**

```css
.link-primary {
  @apply text-primary underline;
  @apply font-medium;
  @apply transition-colors duration-300;
  @apply hover:text-primary-light;
}

.link-accent {
  @apply text-accent underline;
  @apply font-medium;
  @apply transition-colors duration-300;
  @apply hover:text-accent-hover;
}
```

---

### 7. Logo

**SVG Logo** (Experimenta X-Logo)

Wird in den Design-Vorlagen verwendet. Sollte als Vue-Komponente gespeichert werden:

```vue
<!-- components/ExperimentaLogo.vue -->
<template>
  <svg
    class="logo"
    viewBox="0 0 382.94 87.17"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <!-- SVG paths from design examples -->
  </svg>
</template>

<style scoped>
.logo {
  width: 300px;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Tablet */
@media (max-width: 768px) {
  .logo {
    width: 250px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .logo {
    width: 200px;
  }
}
</style>
```

---

## Animationen & Transitions

### Pulse (für Status Icons)

```css
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}
```

### Shimmer (für Progress Bars)

```css
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  animation: shimmer 3s ease-in-out infinite;
}
```

### Button Gradient Animation

```css
.btn-primary {
  background-size: 300%;
  background-position: left;
  transition:
    background-position 1s ease,
    all 0.3s ease;
}

.btn-primary:hover {
  background-position: right;
}
```

### Hover Transitions

```css
/* Standard Hover */
.hover-scale {
  @apply transition-transform duration-300;
  @apply hover:scale-105;
}

/* Logo Hover */
.logo:hover {
  transform: scale(1.05);
  transition: all 0.3s ease;
}

/* Social Links Hover */
.social-link:hover {
  transform: translateY(-3px);
  transition: all 0.3s ease;
}
```

---

## Accessibility

### Farb-Kontraste

Alle Text-Farben wurden auf **WCAG AA Standard** getestet:

- **Weiß auf Dark Purple**: ✅ AAA (Kontrast > 7:1)
- **Magenta Buttons**: ✅ AA (Kontrast > 4.5:1)
- **Orange Akzente**: ✅ AA (Kontrast > 4.5:1)

### Focus States

```css
/* Alle interaktiven Elemente */
.focus-visible {
  @apply focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-purple-darkest;
}
```

### Screen Reader Support

```html
<!-- Buttons -->
<button aria-label="Zur experimenta Startseite zurückkehren">Zurück</button>

<!-- Status Messages -->
<div role="alert" aria-live="polite">
  <p>Ihre Jahreskarte wurde erfolgreich verlängert.</p>
</div>
```

### Keyboard Navigation

- **Tab-Reihenfolge**: Logisch von oben nach unten
- **Focus Indicators**: Sichtbarer Fokus-Ring auf allen interaktiven Elementen
- **Skip Links**: "Zum Hauptinhalt springen" Link am Anfang

---

## Verwendung in Nuxt 4

### 1. Tailwind Config importieren

Siehe `tailwind.config.ts` für die vollständige Theme-Konfiguration.

### 2. Komponenten verwenden

```vue
<template>
  <div class="card-glass">
    <div class="status-icon bg-success">✓</div>
    <h1 class="text-4xl md:text-3xl sm:text-2xl font-light tracking-tight mb-8">Erfolgreich!</h1>
    <p class="text-lg md:text-base leading-relaxed text-white/90">Ihre Aktion war erfolgreich.</p>

    <button class="btn-primary mt-8">Weiter</button>
  </div>
</template>
```

### 3. shadcn-nuxt Komponenten anpassen

Die shadcn-nuxt Komponenten können mit den experimenta-Farben überschrieben werden:

```vue
<!-- components/ui/button/Button.vue -->
<Button class="btn-primary">Click me</Button>
```

---

## Beispiel: Complete Page Layout

```vue
<template>
  <div class="min-h-screen bg-gradient-primary">
    <!-- Header -->
    <header class="bg-header backdrop-blur-lg sticky top-0 z-50 py-8">
      <div class="container-wide mx-auto px-5">
        <ExperimentaLogo />
      </div>
    </header>

    <!-- Main Content -->
    <main class="container-main mx-auto px-5 py-10">
      <div class="card-glass">
        <!-- Success Icon -->
        <div class="status-icon bg-success">✓</div>

        <!-- Headline -->
        <h1 class="text-4xl md:text-3xl sm:text-2xl font-light tracking-tight mb-8">
          Verlängerung erfolgreich!
        </h1>

        <!-- Body Text -->
        <p class="text-lg md:text-base leading-relaxed text-white/90 mb-6">
          Ihre Pädagogische Jahreskarte wurde erfolgreich verlängert.
        </p>

        <!-- Info Section -->
        <div class="card-info mt-8">
          <h3 class="text-accent font-medium text-lg mb-4">Ihre Vorteile</h3>
          <p class="text-white/90">
            Mit der Jahreskarte erhalten Sie ein Jahr lang freien Eintritt...
          </p>
        </div>

        <!-- Button -->
        <button class="btn-primary mt-8">Zur experimenta Startseite</button>
      </div>
    </main>

    <!-- Footer -->
    <footer class="bg-footer mt-20">
      <div class="container-wide mx-auto px-5 py-15">
        <div
          class="border-t border-white/10 pt-8 flex flex-wrap justify-between items-center gap-5"
        >
          <p class="text-white/80">
            © 2025 experimenta gGmbH – Das Science Center. Alle Rechte vorbehalten.
          </p>
          <div class="flex gap-8">
            <a href="#" class="link-primary">Kontakt</a>
            <a href="#" class="link-primary">Impressum</a>
            <a href="#" class="link-primary">Datenschutz</a>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>
```

---

## Weiterführende Ressourcen

- **Roboto Font:** [Google Fonts](https://fonts.google.com/specimen/Roboto)
- **Tailwind CSS v4:** [Tailwind Docs](https://tailwindcss.com/docs)
- **shadcn-nuxt:** [shadcn-nuxt Docs](https://www.shadcn-vue.com/docs/installation/nuxt.html)
- **WCAG Accessibility:** [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)

---

**Maintainer:** Experimenta Team
**Fragen?** → `docs@experimenta.science`