# experimenta Design System **Version:** 1.0 **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) 2. [Typografie](#typografie) 3. [Spacing & Layout](#spacing--layout) 4. [Komponenten](#komponenten) - [Buttons](#1-buttons) - [Cards](#2-cards) - [Status Messages](#3-status-messages) - [Progress Bar](#4-progress-bar) - [Forms](#5-forms) - [Links](#6-links) - [Logo](#7-logo) - [Icons](#8-icons) 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, lokal gehostet) ```css font-family: 'Roboto', sans-serif; ``` **Lokales Hosting:** 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) - `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

``` --- ## 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
``` ### 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 ``` **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 **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 ``` **CSS Klasse (Tailwind Config):** ```css .btn-secondary { @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-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 ``` **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 ``` --- ### 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
``` **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

Überschrift

Inhalt...

``` **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
✓

Verlängerung erfolgreich!

Ihre Jahreskarte wurde verlängert.

``` **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
✖

Ein Fehler ist aufgetreten

Bitte versuchen Sie es erneut.

``` ```css .status-error .status-icon { @apply bg-error; } ``` --- ### 4. Progress Bar ```html

Verlängerungsfortschritt

5 / 10
50%
``` **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
``` **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 ``` **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 Mehr erfahren Hier klicken ``` **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 ``` --- ### 8. Icons **Icon Library:** [Lucide Vue Next](https://lucide.dev) (bereits installiert) Das Projekt verwendet **lucide-vue-next** für alle Icons. Lucide bietet über 1.500+ hochwertige, konsistente Icons, die perfekt mit shadcn-nuxt und unserem Design System harmonieren. #### Installation ```bash # Bereits installiert in package.json pnpm add lucide-vue-next ``` #### Verwendung **Import:** ```vue ``` #### Häufig verwendete Icons ```vue ``` #### Icons in Komponenten **Alert mit Icon:** ```vue ``` **Button mit Icon:** ```vue ``` **Login Form mit Icons:** ```vue ``` #### Icon-Größen ```vue ``` #### Icon-Farben ```vue ``` #### Status Icons Pattern Für Status-Meldungen verwenden wir konsistente Icons: ```vue ``` #### Best Practices 1. **Tree-Shaking:** Nutze Named Imports statt `import * as Icons` ```vue ✅ import { Mail, Lock } from 'lucide-vue-next' ❌ import * as Icons from 'lucide-vue-next' ``` 2. **Accessibility:** Verwende `aria-label` wenn Icons ohne Text stehen ```vue ``` 3. **Konsistenz:** Verwende innerhalb einer Komponente einheitliche Icon-Größen 4. **Farben:** Nutze Tailwind-Klassen für Farben statt inline-Styles 5. **Stroke Width:** Lucide Icons haben eine Standardstärke von 2. Für dünnere/dickere Linien: ```vue ``` #### Icon-Übersicht Alle verfügbaren Icons: [https://lucide.dev/icons/](https://lucide.dev/icons/) **Kategorien:** - **Arrows & Chevrons:** ChevronRight, ArrowRight, ChevronDown - **Shopping:** ShoppingCart, CreditCard, Package, Truck - **User & Auth:** User, UserCircle, LogIn, LogOut, Lock, Key - **Status:** CheckCircle, XCircle, AlertTriangle, Info - **Actions:** Plus, Minus, Edit, Trash2, Search, Filter - **Media:** Image, File, FileText, Download, Upload - **Navigation:** Menu, X, Home, Settings, HelpCircle --- ## 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

Ihre Jahreskarte wurde erfolgreich verlängert.

``` ### 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 ``` ### 3. shadcn-nuxt Komponenten anpassen Die shadcn-nuxt Komponenten können mit den experimenta-Farben überschrieben werden: ```vue ``` --- ## Beispiel: Complete Page Layout ```vue ``` --- ## 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`