docs: refine DESIGN_GUIDE.md with browser inspection findings and GSAP curves
This commit is contained in:
+69
-45
@@ -1,44 +1,80 @@
|
|||||||
# FlixCooks Design-System & Feature-Katalog
|
# FlixCooks – Premium Web Design Guide
|
||||||
|
|
||||||
Dieses Dokument dient als zentrale Design-Richtlinie und Anweisungs-Katalog für die KI, um das visuelle Erscheinungsbild und die Interaktionen der Website **FlixCooks** auf ein absolut erstklassiges Premium-Niveau zu heben. Die Design-Prinzipien und Features basieren auf den herausragenden Merkmalen von Vorbild-Websites:
|
Dieser Design Guide definiert die visuellen Prinzipien, Typografie, Farbpaletten und Interaktionsmuster für die **FlixCooks-Website**. Inspiriert von den modernen, immersiven Web-Standards führender Kreativ- und Lifestyle-Marken (wie *Capitolium*, *fromanother* und *Floema*) setzen wir auf **flüssige Bewegung, charakterstarke Kontraste und ein harmonisches, erdiges Farbklima**.
|
||||||
1. **Capitolium** ([collabcapitolium.fr](https://www.collabcapitolium.fr/)) — *Historischer Retro-Luxus, Goldtöne, elegante Serifen und edle Steinstrukturen.*
|
|
||||||
2. **From Another** ([fromanother.love](https://www.fromanother.love/)) — *Künstlerisch-flüssige Moderne, Micro-Interaktionen, flüssige Overlays und organische Übergänge.*
|
Dieses Dokument dient als zentrale Design-Richtlinie und Anweisungs-Katalog für die KI, um das visuelle Erscheinungsbild und die Interaktionen auf ein absolut erstklassiges Premium-Niveau zu heben.
|
||||||
3. **Floema** ([floema.com/en](https://www.floema.com/en)) — *Natürliche Eleganz, architektonische Grid-Präzision, elastische Animationen und erdige Töne.*
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🎨 Globales Design-System & Tokens
|
## 1. Farbphilosophie & Paletten
|
||||||
|
|
||||||
Die folgenden CSS-Variablen definieren die Farbwelt, Typografie und Abstände und kombinieren die besten Aspekte aller drei Welten.
|
Wir distanzieren uns von sterilen, reinweißen Hintergründen und hartem, reinem Schwarz. Stattdessen nutzen wir warme, organische Töne für maximalen Sehkomfort und Premium-Charakter.
|
||||||
|
|
||||||
|
### Option A: Warm Premium (Empfohlen für Hauptmarke)
|
||||||
|
* **Hintergrund:** Warm Ivory / Creme (`#f2efea` oder `#f0e3cf`)
|
||||||
|
* **Text & Konturen:** Dunkles Anthrazit / Steinkohle (`#241f21` oder `#0b090a`)
|
||||||
|
* **Akzente & Primärfarbe:** Edles Mattgold / Bronze (`#c3a677`)
|
||||||
|
* **Sekundäre Grautöne:** `#58595b` (Dunkelgrau), `#a7a0a1` (Hellgrau)
|
||||||
|
|
||||||
|
### Option B: Atmospheric Dark (Für immersive Storytelling-Bereiche)
|
||||||
|
* **Hintergrund:** Tiefes Mitternachtsblau (`#051236`)
|
||||||
|
* **Text & Konturen:** Pastell-Creme-Gelb (`#fffde2`)
|
||||||
|
* **Akzente:** Elektrisierendes Kobaltblau (`#1740a9`)
|
||||||
|
* **Opacity-Abstufungen:**
|
||||||
|
* Sekundärtexte: `rgba(255, 253, 226, 0.6)`
|
||||||
|
* Deaktiviert/Untergeordnet: `rgba(255, 253, 226, 0.3)`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Typografie & Skalierung
|
||||||
|
|
||||||
|
Die Typografie lebt von einem **starken Kontrast** zwischen organisch-charismatischen Display-Schriften für Headlines und hochlesbaren, geometrischen serifenlosen Schriften für Fließtext.
|
||||||
|
|
||||||
|
* **Überschriften (Headlines - h1, h2, h3):**
|
||||||
|
* **Schriftart:** Eine ausdrucksstarke, historische oder organische Serif-Schrift (z. B. *Zimula* oder *gin* Stil).
|
||||||
|
* **Verhalten:** Viewport-relative Skalierung (z. B. `font-size: clamp(3rem, 8vw, 8.5rem)`), um auf Desktop-Screens eine massive, monolithische Präsenz zu erzielen.
|
||||||
|
* **Fließtext & Buttons:**
|
||||||
|
* **Schriftart:** Eine geometrische, schnörkellose Sans-Serif (z. B. *Rubik* oder ein hochwertiger Neo-Grotesque-Schnitt).
|
||||||
|
* **Größe:** `14px` bis `16px` für optimales, luftiges Satzbild.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Layout, Spacing & Responsive Grid
|
||||||
|
|
||||||
|
Statt starrer Spacing-Klassen setzen wir auf vollkommen fluide Abstände und intelligente Grids auf Root-Ebene.
|
||||||
|
|
||||||
|
* **24-Spalten-Grid:** Für asymmetrische, redaktionelle Layouts wird ein 24-spaltiges CSS-Grid etabliert.
|
||||||
|
* **Fluide Variablen auf `:root`:**
|
||||||
```css
|
```css
|
||||||
:root {
|
:root {
|
||||||
/* --- Farbpalette (Erdig, Edel, High-End Kontrast) --- */
|
--grid-gap: clamp(14px, 1vw + 4px, 28px);
|
||||||
--color-bg-light: #f2efea; /* Helles Creme-Elfenbein (Floema) */
|
--grid-margin: clamp(16px, 1.5vw + 10px, 36px);
|
||||||
--color-bg-dark: #241f21; /* Tiefes Steinkohle-Braun (Floema) */
|
--grid-width: calc(100vw - var(--grid-margin) * 2);
|
||||||
--color-accent-gold: #c3a677; /* Dunkles, edles Gold (Capitolium) */
|
|
||||||
--color-light-gold: #f0e3cf; /* Warmes, helles Seidengold (Capitolium) */
|
|
||||||
--color-white: #ffffff;
|
|
||||||
--color-terracotta: #f76c46; /* Akzent-Farbe für Highlights/Aktionen */
|
|
||||||
--color-forest: #042d2b; /* Dunkles Waldgrün für Tiefe */
|
|
||||||
--color-text-muted: #7a716d; /* Gedämpftes Braun-Grau */
|
|
||||||
|
|
||||||
/* --- Typografie (Kombination aus Serifen-Eleganz & cleaner Struktur) --- */
|
|
||||||
--font-serif-classic: 'Times New Roman', Times, serif;
|
|
||||||
--font-serif-display: 'gin', 'Zimula', Georgia, serif;
|
|
||||||
--font-sans-clean: 'Inter', system-ui, -apple-system, sans-serif;
|
|
||||||
|
|
||||||
/* --- Grid & Spacings (Präzise Floema-Berechnung) --- */
|
|
||||||
--grid-columns: 24;
|
|
||||||
--grid-gap: clamp(14px, 9.71px + 1.1vw, 28px);
|
|
||||||
--grid-margin: clamp(16px, 10.15px + 1.5vw, 36px);
|
|
||||||
|
|
||||||
/* --- Animation Easing Curves (Cubic-Bezier Signaturen) --- */
|
|
||||||
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); /* Ultraschnelle, weiche Verlangsamung */
|
|
||||||
--ease-overshoot: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Elastischer Bouncing-Effekt */
|
|
||||||
--ease-fluid-slide: cubic-bezier(0.76, 0, 0.24, 1); /* Gleitende, organische Bewegung */
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
* **Responsive Anpassung:** Die Abstände atmen stufenlos mit der Viewportbreite (`100vw` / `dvh`). Dadurch entfallen sprunghafte Media-Query-Knicke fast vollständig.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Motion & Interaktions-Design
|
||||||
|
|
||||||
|
Eine Premium-Website fühlt sich lebendig und geschmeidig an. Das Nutzererlebnis basiert auf weicher Entschleunigung und präzisen Interaktionen.
|
||||||
|
|
||||||
|
### A. Smooth Scrolling (Lenis)
|
||||||
|
* **Standard:** Die gesamte Seite nutzt **Lenis smooth scroll**, um ein trägheitsbasiertes, sanftes Abbremsen beim Scrollen zu gewährleisten.
|
||||||
|
|
||||||
|
### B. GSAP ScrollTrigger & Pinned Storytelling
|
||||||
|
* Anstelle von standardmäßig herunterscrollbaren Textblöcken werden emotionale Schlüsselbereiche (z. B. Rezepte-Showcase, Teig-Prozess) **gepinnt** (z. B. eine Sektionshöhe von `300vh` bis `600vh`).
|
||||||
|
* Während des Pinnens animieren sich Elemente (Zutaten, Textpassagen, Kochschritte) horizontal, blenden sich butterweich über- und untereinander oder enthüllen sich durch geometrische Masken.
|
||||||
|
|
||||||
|
### C. Hover-Zustände & Easings
|
||||||
|
* **Navigationslinks:** Minimale, hochpräzise Bewegungen statt simpler Farbwechsel. Ein sanfter Nudge/Slide nach rechts oder oben:
|
||||||
|
`transition: margin 0.3s cubic-bezier(0.19, 1, 0.22, 1);`
|
||||||
|
* **Bild-Hover:** Zoom- und Parallax-Effekte bei Interaktion.
|
||||||
|
* **Cubic-Bezier Easing-Bibliothek:**
|
||||||
|
* `--easeOutQuart`: `cubic-bezier(0.165, 0.84, 0.44, 1)`
|
||||||
|
* `--easeInOutQuart`: `cubic-bezier(0.76, 0, 0.24, 1)`
|
||||||
|
* `--easeInOutCubic`: `cubic-bezier(0.65, 0, 0.35, 1)`
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -247,7 +283,7 @@ Die folgenden CSS-Variablen definieren die Farbwelt, Typografie und Abstände un
|
|||||||
```
|
```
|
||||||
|
|
||||||
#### 🆔 `SlideUpTextHover`
|
#### 🆔 `SlideUpTextHover`
|
||||||
* **Beschreibung**: Animierter Link-Text-Effekt (bekannt von *From Another*). Der Text verdoppelt sich unsichtbar. Beim Hover gleitet der Originaltext nach oben aus dem Sichtbereich, während von unten zeitgleich ein Klon-Text nach oben nachrückt.
|
* **Beschreibung**: Animierter Link-Text-Effekt (bekannt von *fromanother*). Der Text verdoppelt sich unsichtbar. Beim Hover gleitet der Originaltext nach oben aus dem Sichtbereich, während von unten zeitgleich ein Klon-Text nach oben nachrückt.
|
||||||
* **HTML-Struktur**:
|
* **HTML-Struktur**:
|
||||||
```html
|
```html
|
||||||
<a href="#" class="slide-hover-link">
|
<a href="#" class="slide-hover-link">
|
||||||
@@ -460,7 +496,7 @@ Die folgenden CSS-Variablen definieren die Farbwelt, Typografie und Abstände un
|
|||||||
```
|
```
|
||||||
|
|
||||||
#### 🆔 `IndexSectionIndicator`
|
#### 🆔 `IndexSectionIndicator`
|
||||||
* **Beschreibung**: Eine diskrete, minimalistische Fortschrittsanzeige am Bildschirmrand (bekannt von *From Another*). Sie zeigt die aktuelle Seitennummer, den Kategorienamen und eine sich dynamisch füllende vertikale Linie an.
|
* **Beschreibung**: Eine diskrete, minimalistische Fortschrittsanzeige am Bildschirmrand (bekannt von *fromanother*). Sie zeigt die aktuelle Seitennummer, den Kategorienamen und eine sich dynamisch füllende vertikale Linie an.
|
||||||
* **HTML-Struktur**:
|
* **HTML-Struktur**:
|
||||||
```html
|
```html
|
||||||
<div class="section-indicator">
|
<div class="section-indicator">
|
||||||
@@ -512,15 +548,3 @@ Die folgenden CSS-Variablen definieren die Farbwelt, Typografie und Abstände un
|
|||||||
.section-indicator { display: none; }
|
.section-indicator { display: none; }
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📋 Arbeitsanweisung für die KI
|
|
||||||
|
|
||||||
1. **Behalte den Premium-Anspruch bei**: Jedes Element, das auf FlixCooks neu erstellt oder verändert wird, muss sich an diesem Leitfaden orientieren. Keine grellen Primärfarben, keine unnatürlichen Ecken oder unsauberen Abstände.
|
|
||||||
2. **Nutze fließende Skalierung (`clamp()`)**: Benutze für alle Schriftgrößen, Abstände (`padding`/`margin`) und Höhen CSS-Klammern (`clamp()`), damit das Layout auf 4K-Monitoren genauso atemberaubend aussieht wie auf Mobilgeräten.
|
|
||||||
3. **Kombiniere die Features harmonisch**:
|
|
||||||
* Nutze `AuraMarbleBackground` als globale Grundlage.
|
|
||||||
* Richte die Inhalte strikt am `FloemaLayoutGrid` aus.
|
|
||||||
* Biete geschmeidige Navigation mit `LiquidOverlayMenu` und dem interaktiven `SlideUpTextHover`.
|
|
||||||
4. **Vergiss Micro-Animationen nicht**: Buttons müssen unter Verwendung der passenden Easing-Kurven (`var(--ease-out-expo)` oder `var(--ease-overshoot)`) einladend auf Berührung reagieren.
|
|
||||||
|
|||||||
Reference in New Issue
Block a user