luna-recipes/features/DESIGN-CONCEPT.md

🎨 Luna Recipes — Design-Konzept

1. Farbschema

Warm, einladend, modern-feminin ohne kitschig zu wirken. Inspiriert von Backzutaten: Vanille, Karamell, Beeren.

Rolle	Farbe	Hex	Verwendung
Primary	Dusty Rose	#C4737E	Buttons, aktive States, Akzente
Primary Light	Soft Blush	#F2D7DB	Hover, Badges, Tags
Secondary	Warm Caramel	#D4A574	Sekundäre Buttons, Icons
Background	Cream White	#FBF8F5	Seitenhintergrund
Surface	Pure White	#FFFFFF	Cards, Modals
Text Primary	Espresso	#2D2016	Überschriften, Body
Text Secondary	Warm Grey	#7A6E65	Subtexte, Metadaten
Success	Sage Green	#7BAE7F	Timer fertig, Erfolg
Error	Berry Red	#C94C4C	Fehler, Löschen
Border	Sand	#E8E0D8	Trennlinien, Card-Borders

Dark Mode (optional, Phase 2)

• Background: #1A1614
• Surface: #2D2620
• Text: #F5EDE8

2. Typografie

Rolle	Font	Gewicht	Größe
Logo/Brand	Playfair Display	700	28px
H1	Playfair Display	600	24px
H2	Playfair Display	600	20px
H3	Inter	600	17px
Body	Inter	400	15px
Small/Meta	Inter	400	13px
Kochmodus	Inter	500	22–28px
Timer	JetBrains Mono	500	48px

Playfair Display für Eleganz in Überschriften, Inter als saubere UI-Schrift. Monospace nur für Timer-Anzeige.

3. Screen-Übersicht

┌─────────────────────────────────────────────┐
│                  App-Struktur               │
├─────────────────────────────────────────────┤
│                                             │
│  📱 Bottom Navigation:                      │
│  [Startseite] [Suche] [+Neu] [Liste] [Me]  │
│                                             │
│  Screens:                                   │
│  ├── Startseite (Feed)                      │
│  ├── Kategorie-Ansicht                      │
│  ├── Suche + Filter                         │
│  ├── Rezept-Detail                          │
│  │   ├── Kochmodus (Fullscreen)             │
│  │   └── Notizen-Sheet                      │
│  ├── Rezept erstellen/bearbeiten            │
│  ├── Einkaufsliste                          │
│  ├── Profil / Einstellungen                 │
│  └── Onboarding (Erststart)                 │
│                                             │
└─────────────────────────────────────────────┘

4. Component-Liste

Layout

• AppShell — Wrapper mit Bottom-Nav
• BottomNav — 5 Icons, aktiver State mit Farbe + Label
• TopBar — Kontextuell: Titel, Back-Button, Actions
• FullscreenOverlay — Für Kochmodus

Cards

• RecipeCard — Foto (3:4), Titel, Kategorie-Badge, Dauer, Favorit-Herz
• RecipeCardSmall — Horizontal, Thumbnail links, Infos rechts
• CategoryCard — Rundes Bild + Label darunter

Rezept-Detail

• HeroImage — Parallax-Scroll Foto oben
• RecipeMeta — Dauer, Portionen, Schwierigkeit als Icons
• IngredientList — Checkbare Zutatenliste mit Mengenrechner
• StepList — Nummerierte Schritte mit optionalen Bildern
• NoteSection — Eigene Notizen mit Bearbeiten-Button
• ActionBar — Kochmodus starten, zur Liste hinzufügen, Teilen

Kochmodus

• CookingStep — Großer Text, Schrittnummer, Swipe-Geste
• CookingTimer — Kreisförmiger Countdown, Vibration bei Ende
• CookingProgress — Fortschrittsbalken oben
• CookingNav — Vor/Zurück-Buttons unten

Suche & Filter

• SearchBar — Prominent, mit Mikrofon-Icon (Phase 2)
• FilterChips — Horizontale Scroll-Chips (Kategorie, Zeit, Zutat)
• FilterSheet — Bottom-Sheet mit erweiterten Filtern

Einkaufsliste

• ShoppingItem — Checkbox + Zutat + Menge + Rezeptherkunft
• ShoppingSection — Gruppiert nach Rezept oder Abteilung
• AddItemInput — Schnelles Hinzufügen eigener Einträge

Formulare

• RecipeForm — Multi-Step Formular für Rezepterstellung
• ImageUpload — Drag/Drop + Kamera-Auslöser
• IngredientInput — Menge + Einheit + Zutat als Inline-Row
• StepInput — Textfeld + optionales Bild + Timer-Feld

Allgemein

• Button — Primary, Secondary, Ghost, Danger Varianten
• Badge — Kategorie-Tags farblich kodiert
• Toast — Erfolgs-/Fehlermeldungen
• EmptyState — Illustration + Text wenn Liste leer
• Skeleton — Loading-Platzhalter für Cards

5. Wireframe-Beschreibungen

5.1 Startseite (Feed)

┌──────────────────────────┐
│ 🍰 Luna Recipes    [👤]  │  ← TopBar mit Logo + Profil-Avatar
├──────────────────────────┤
│ ○Backen ○Torten ○Mittag  │  ← Horizontale Kategorie-Chips (scrollbar)
│  ○Frühstück ○Snacks ...  │
├──────────────────────────┤
│ ┌────────┐ ┌────────┐   │
│ │ 📷     │ │ 📷     │   │  ← Pinterest-artiges Masonry Grid
│ │        │ │  groß  │   │     Unterschiedliche Höhen
│ │ Titel  │ │        │   │     Tap → Rezept-Detail
│ │ 30min ❤│ │ Titel  │   │
│ └────────┘ │ 45min ❤│   │
│ ┌────────┐ └────────┘   │
│ │ 📷     │ ┌────────┐   │
│ │ Titel  │ │ 📷     │   │
│ │ 20min ❤│ │ Titel  │   │
│ └────────┘ └────────┘   │
├──────────────────────────┤
│ [🏠] [🔍] [➕] [🛒] [👤] │  ← Bottom Navigation
└──────────────────────────┘

• Standard: Alle Rezepte, neuste zuerst
• Kategorie-Chips filtern den Feed inline
• Pull-to-Refresh
• Endlos-Scroll mit Lazy Loading
• Favorit-Herz direkt auf der Card antippbar

5.2 Suche + Filter

┌──────────────────────────┐
│ [← ] 🔍 Suche...    [✕] │  ← Autofokus auf Suchfeld
├──────────────────────────┤
│ Letzte Suchen:           │
│ Schokoladentorte  Pasta  │  ← Antippbare Tags
├──────────────────────────┤
│ [Kategorie ▼] [Zeit ▼]  │  ← Filter-Chips
│ [Schwierigkeit ▼]       │
├──────────────────────────┤
│ 3 Ergebnisse             │
│ ┌────────────────────┐   │
│ │ 🖼 │ Schwarzwälder  │   │  ← RecipeCardSmall Layout
│ │    │ Kirschtorte    │   │     Horizontal für Suchergebnisse
│ │    │ ⏱90min ⭐Mittel │   │
│ └────────────────────┘   │
│ ┌────────────────────┐   │
│ │ 🖼 │ Schoko-Mousse  │   │
│ └────────────────────┘   │
└──────────────────────────┘

• Suche durchsucht: Titel, Zutaten, Tags, Notizen
• Debounced (300ms) Live-Ergebnisse
• Filter kombinierbar (AND-Verknüpfung)
• Zeitfilter: <15min, 15–30, 30–60, >60min

5.3 Rezept-Detail

┌──────────────────────────┐
│ [←]              [❤] [⋯]│  ← Floating über Hero-Bild
│                          │
│     ┌──────────────┐     │
│     │              │     │  ← Hero-Image, 16:10
│     │    📷 Foto   │     │     Parallax beim Scrollen
│     │              │     │
│     └──────────────┘     │
├──────────────────────────┤
│ Schwarzwälder Kirschtorte│  ← H1 Playfair Display
│ 🏷 Torten  ⏱ 90min      │
│ 👤 8 Portionen  ⭐ Mittel │
├──────────────────────────┤
│ [🍳 Kochen] [🛒 Liste]   │  ← Primary + Secondary Button
├──────────────────────────┤
│ ── Zutaten ──────────────│
│ Portionen: [−] 8 [+]    │  ← Mengenrechner
│ ☐ 200g Mehl              │
│ ☐ 150g Zucker            │  ← Antippbar → Einkaufsliste
│ ☐ 5 Eier                 │
│ ☐ 500ml Sahne            │
│ ...                      │
├──────────────────────────┤
│ ── Zubereitung ──────────│
│ 1. Eier trennen und...   │
│ 2. Mehl mit Kakao...     │  ← Kompakte Schritt-Liste
│ 3. Backofen auf 180°...  │
│ ...                      │
├──────────────────────────┤
│ ── Meine Notizen ────────│
│ 📝 "Nächstes Mal weniger │  ← Editierbar
│ Zucker, dafür mehr       │
│ Kirschen!"               │
│ [✏️ Bearbeiten]           │
├──────────────────────────┤
│ [🏠] [🔍] [➕] [🛒] [👤] │
└──────────────────────────┘

• Drei-Punkte-Menü (⋯): Bearbeiten, Teilen, Löschen
• Zutaten-Checkbox → einzeln zur Einkaufsliste
• Portionen-Rechner skaliert alle Mengen live
• Notizen: Inline-Edit, Markdown-Unterstützung

5.4 Kochmodus (Fullscreen)

┌──────────────────────────┐
│ Schritt 3 von 12    [✕]  │  ← Progress-Info + Schließen
│ ████████░░░░░░░░░░░░░░░░ │  ← Fortschrittsbalken
├──────────────────────────┤
│                          │
│                          │
│  Backofen auf 180°C      │  ← GROSSE SCHRIFT (22–28px)
│  Ober-/Unterhitze         │     Zentriert
│  vorheizen.              │     Max 3-4 Zeilen
│                          │
│                          │
│      ┌──────────┐        │
│      │  05:00   │        │  ← Timer (falls Schritt Timer hat)
│      │  ▶ Start │        │     Kreisförmig
│      └──────────┘        │
│                          │
├──────────────────────────┤
│  [← Zurück]  [Weiter →]  │  ← Navigation + Swipe-Geste
└──────────────────────────┘

• Bildschirm bleibt an (Wake Lock API)
• Swipe links/rechts für Navigation
• Timer: Antippen startet, Vibration + Sound bei 0:00
• Mehrere Timer gleichzeitig möglich (Badge-Anzeige)
• Schließen fragt "Wirklich beenden?"

5.5 Einkaufsliste

┌──────────────────────────┐
│ Einkaufsliste     [🗑 ✓] │  ← Erledigte löschen
├──────────────────────────┤
│ [+ Eigenen Artikel ...]  │  ← Quick-Add Input
├──────────────────────────┤
│ 🍰 Schwarzwälder Kirsch. │  ← Gruppiert nach Rezept
│   ☐ 200g Mehl            │
│   ☑ 150g Zucker          │  ← Durchgestrichen
│   ☐ 5 Eier               │
│   ☐ 500ml Sahne          │
├──────────────────────────┤
│ 🥗 Caesar Salad           │
│   ☐ 1 Römersalat         │
│   ☐ Parmesan             │
├──────────────────────────┤
│ 📝 Eigene                 │
│   ☐ Küchenrolle          │
├──────────────────────────┤
│ [🏠] [🔍] [➕] [🛒] [👤] │
└──────────────────────────┘

• Gleiche Zutaten aus verschiedenen Rezepten werden zusammengefasst (Phase 2)
• Wisch nach links → Artikel entfernen
• Sortierbar: nach Rezept oder nach Abteilung
• Offline verfügbar (PWA!)

5.6 Rezept erstellen/bearbeiten

┌──────────────────────────┐
│ [✕] Neues Rezept  [Save] │
├──────────────────────────┤
│ Schritt 1 von 4         │
│ ●───○───○───○            │  ← Stepper
├──────────────────────────┤
│                          │
│ [📷 Foto hinzufügen]     │  ← Kamera oder Galerie
│                          │
│ Titel *                  │
│ [________________________]│
│                          │
│ Kategorie *              │
│ [Backen ▼]               │
│                          │
│ Tags                     │
│ [Schoko] [Torte] [+ ...]│
│                          │
│ Portionen    Dauer       │
│ [_8_]        [_90_] min  │
│                          │
│ Schwierigkeit            │
│ ○ Einfach ● Mittel ○ Pro│
│                          │
│         [Weiter →]       │
└──────────────────────────┘

• 4 Schritte: Basis → Zutaten → Zubereitung → Vorschau
• Auto-Save als Entwurf
• Zutaten: dynamische Rows (Menge + Einheit + Name)
• Zubereitung: Schritte mit optionalem Timer pro Schritt

5.7 Profil / Einstellungen

• Anzahl Rezepte, Favoriten
• Kategorien verwalten (eigene hinzufügen)
• Einheiten-Präferenz (metrisch/imperial)
• Dark Mode Toggle
• Daten exportieren/importieren
• App-Version & Info

6. Design-Prinzipien

1. Fotos im Fokus — Große, appetitliche Bilder treiben die Navigation
2. One-Thumb-Use — Alle wichtigen Aktionen im Daumenbereich
3. Kochmodus = Stressfrei — Große Schrift, einfache Navigation, keine Ablenkung
4. Schnelles Wiederfinden — Suche, Kategorien, Favoriten auf max 2 Taps
5. Offline First — Einkaufsliste und gespeicherte Rezepte immer verfügbar

7. Animationen & Micro-Interactions

• Card-Tap: Sanftes Scale-Up (0.98 → 1.0)
• Favorit-Herz: Kurze Bounce-Animation + Farbwechsel
• Kochmodus-Swipe: Slide-Transition zwischen Schritten
• Timer-Ende: Pulsieren + Vibration
• Pull-to-Refresh: Custom Cupcake-Animation (Phase 2)
• Page-Transitions: Shared Element Transition für Hero-Image (Card → Detail)