# Yumder Design System & Styleguide

Dieses Dokument beschreibt das **aktuelle** Design-System des Yumder-Projekts. Es dient als menschenlesbare Referenz. Für Coding-Agenten ist die [`AGENTS.md`](../AGENTS.md) verbindlich – dort stehen die für Agenten relevanten Regeln kompakt zusammengefasst.

## 🤖 KI-Instruktionen (AI Agent Rules)

- **Regel 1:** Verwende NIEMALS hart kodierte Hex-Werte in neuen Komponenten. Nutze immer die definierten Tailwind-Tokens (z. B. `text-yumder-pink`, `bg-adminbg`).
- **Regel 2:** Halte Border-Radius konsistent: bevorzugt `rounded-full`, `rounded-xl`, `rounded-2xl` oder `rounded-3xl`.
- **Regel 3:** Buttons und interaktive Elemente werden **inline per Tailwind** gestylt. Es gibt keine CSS-Klassen `.btn-primary`, `.btn-teal` oder `.btn-secondary`.
- **Regel 4:** Wiederverwende vorhandene Utilities aus `app/globals.css`, insbesondere `.glass`.
- **Regel 5:** Neue globale Styles kommen nur in `app/globals.css`; keine ad-hoc-Styles in einzelnen Komponenten.

---

## 🎨 1. Design Tokens: Farben

Die Farben sind in `tailwind.config.js` hinterlegt.

### Brand Colors

| Name | Hex | Tailwind-Klasse |
|---|---|---|
| Yumder Pink | `#FE3C72` | `bg-yumder-pink`, `text-yumder-pink` |
| Yumder Teal | `#00C2A8` | `bg-yumder-teal`, `text-yumder-teal` |

Häufig verwendete Kombinationen:

- Pink-Gradient für CTAs: `bg-gradient-to-r from-yumder-pink to-pink-500`
- Pink-zu-Teal-Gradient für Headlines: `bg-gradient-to-r from-yumder-pink via-pink-400 to-yumder-teal bg-clip-text text-transparent`

### Admin Palette

| Name | Hex | Verwendung |
|---|---|---|
| `adminbg` | `#f8f9fa` | Admin-Hintergrund |
| `admincard` | `#ffffff` | Admin-Karten |
| `admintext` | `#1a1a1a` | Admin-Haupttext |
| `adminmuted` | `#6c757d` | Admin-Sekundärtext |
| `adminborder` | `#e9ecef` | Admin-Rahmen |
| `adminsuccess` | `#28a745` | Erfolg |
| `adminwarning` | `#ffc107` | Warnung |
| `admindanger` | `#dc3545` | Fehler/Gefahr |

### Neutrals (je nach Bereich)

- **Public App (mobile-first Swipe-UI):** dunkles Theme
  - Hintergrund: `bg-neutral-950`
  - Karten: `bg-neutral-900/60` mit `backdrop-blur-xl` und `border-white/10`
  - Text: `text-white`, `text-neutral-200`, `text-neutral-300`, `text-neutral-400`
- **Admin Dashboard:** helles Theme
  - Hintergrund: `bg-neutral-50`
  - Karten: `bg-white` mit `border-slate-200`
  - Text: `text-slate-900`, `text-slate-500`

---

## 🔤 2. Typografie

- **Primary Font:** `Inter`, `system-ui`, `-apple-system`, `Segoe UI`, `sans-serif` (Tailwind-Default)
- **Akzent Font:** `Pacifico` wird **nicht** im Projekt verwendet.

**Hierarchie (Typische Patterns im Projekt):**

- Hero/Headline: `text-5xl font-extrabold tracking-tight`
- Section-Title: `text-3xl font-extrabold tracking-tight`
- Card-Title: `text-lg font-bold` oder `font-semibold`
- Body: `text-sm` bis `text-base`, meist `text-neutral-400` (Public) bzw. `text-slate-600` (Admin)
- Labels: `text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500`

---

## ⬛ 3. UI Komponenten & Layout

### Glassmorphism-Cards

Zentrale Card-Komponenten in der Public App nutzen einen weichen Glas-Effekt:

```
border-radius: 1.5rem;              /* rounded-2xl / rounded-3xl */
border: 1px solid rgba(0,0,0,.07);  /* border-white/10 im Dark Theme */
background: rgba(255,255,255,.85);  /* bg-white/85 oder bg-neutral-900/60 */
backdrop-filter: blur(20px);
box-shadow: 0 20px 45px -18px rgba(24,24,27,.12);
```

Die Utility-Klasse `.glass` in `app/globals.css` definiert die helle Variante. Im dunklen Theme wird das Pattern inline mit Tailwind-Klassen umgesetzt.

### Buttons

Es gibt keine globalen Button-Klassen. Typische Primary-Button-Patterns:

```text
bg-gradient-to-r from-yumder-pink to-pink-500
font-semibold rounded-xl px-4 py-3.5
text-white
shadow-[0_0_25px_rgba(254,60,114,0.4)]
transition-all hover:-translate-y-0.5 hover:scale-[1.03]
```

Teal- oder Secondary-Buttons passen sich analog an:

- Teal: `bg-yumder-teal` oder `bg-gradient-to-r from-yumder-teal to-teal-400`, oft `rounded-full`
- Secondary/Outline: `bg-white border border-slate-200` (Admin) oder `bg-neutral-800/70 border border-white/5` (Public)

### Spacing & Layout

- **Public App:** Zentrierte Karten meist `max-w-sm mx-auto`, volle Höhe `min-h-dvh-safe`
- **Admin Dashboard:** Container orientieren sich an `max-w-6xl mx-auto px-5`
- Layout wird intensiv mit Flexbox und Grid umgesetzt (`flex`, `grid`, `gap-5`)

---

## 💻 4. Code-Snippets

### Tailwind Config (`tailwind.config.js`)

```javascript
module.exports = {
  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        yumder: {
          pink: '#FE3C72',
          teal: '#00C2A8',
        },
        adminbg: '#f8f9fa',
        admincard: '#ffffff',
        admintext: '#1a1a1a',
        adminmuted: '#6c757d',
        adminborder: '#e9ecef',
        adminsuccess: '#28a745',
        adminwarning: '#ffc107',
        admindanger: '#dc3545',
      },
    },
  },
};
```

### Die `.glass` Utility-Klasse (`app/globals.css`)

```css
.glass {
  border-radius: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 45px -18px rgba(24, 24, 27, 0.12);
}
```

---

## ✅ Zusammenfassung der wichtigsten Do's and Don'ts

- ✅ Tailwind-Tokens (`yumder-pink`, `yumder-teal`, `admin*`) verwenden
- ✅ `.glass`, `.scrollbar-hide`, `.safe-top`, `.safe-bottom`, `.min-h-dvh-safe` wiederverwenden
- ✅ Konsistente Radii: `rounded-xl`, `rounded-2xl`, `rounded-full`
- ✅ Buttons inline per Tailwind gestalten
- ❌ Keine hart kodierten Hex-Werte
- ❌ Keine neuen Button-Klassen wie `.btn-primary` anlegen
- ❌ Keine `Pacifico`-Schriftart verwenden (nicht im Projekt)